JQuery-UIのResizableとDraggableを利用してスケジュール表を作る その4(日付の取得)

Javascript,開発

おはようございます。

少し間が空きましたが、
JQuery-UIプラグインを用いたスケジュール表の続きです。

イベント処理を追加し、日付を取得、表示できるようにしてみました。

プログラムは前回のものを流用します。

スポンサーリンク

画面

sample.html

テーブル部分のプログラムは割愛しました。(長くなるので)
変更箇所は、日付を表示(確認)するラベル要素とスクリプト部分です。

スケジュール線要素をリサイズしたり、ドラッグした際に、
日付セルの幅、スケジュール線の幅、高さなどから日付を計算するようにしています。
(うまいやり方があったら教えてください。。)

起動してみる

リサイズ結果
リサイズ結果
ドラッグ結果
ドラッグ結果

無事に日付が表示されました。
スクショはありませんが、リサイズ、ドラッグ終了時にアラートでも表示するようにしています。

まとめ

まだまだ問題点は残るものの、日付の情報が取れれば色々な処理ができそうです。
次回は新規でスケジュール線を追加する処理を試してみようかと思います。
(おそらく最終回)

ではでは。

スポンサーリンク


関連するコンテンツ