JQuery-UIのResizableとDraggableを利用してスケジュール表を作る その1(とりあえずお試し)

Javascript, 開発

おはようございます。

以前紹介した「FullCalendar」は、とても便利なんですが
複数人の予定を操作したり、参照したい時には少々使い勝手が悪いですよね。

FullCalendar自体を拡張して作りたいのはやまやまですが、
以前から Googleカレンダーみたいな操作の実現に興味があったので、自分で(JQueryの力を借りて)実装してみたいと思います。

記事も複数回(何回になるかわかりません)にわたって実装していき、完成形は、縦軸に人・横軸に日付や時刻とします。

とりあえず、実現に必要そうなプラグインを簡単なサンプルで触ってみます。

スポンサーリンク

JQuery-UI(Rsizable/Draggable)

JQuery-UIのプラグイン。
要素(イメージでもブロック要素でも)のサイズをドラッグで変更したり、要素事態をドラッグして移動できるようにしてくれます。

これも自分で実装すると、なかなか大変なんですよね。助かります。

プログラム

まずは要素のスタイルを簡単に定義します。

style.css

 

画面も簡単に。

sample.html

触ってみる

初期表示
初期表示
動かしてみた
動かしてみた

それぞれサイズ変更、移動してみた結果です。

まとめ

こんな感じで要素を動かせるので、
これをスケジュールに利用していきます。

次回はもう少し掘り下げて色々弄っていければと思います。

ではでは。

 

スポンサーリンク


関連するコンテンツ