fullcalendar その5 〜イベントをドラッグしてイベントの日付を変更してみた〜

まさかの5回目です。
過去の記事は以下をご参照下さい。

tsuralabo.hatenablog.com
tsuralabo.hatenablog.com
tsuralabo.hatenablog.com
tsuralabo.hatenablog.com

・fullcalendarの外枠を作ってプロパティ設定できた
・表示している月だけのカレンダーデータを取得できた
・設定済みのイベントをクリックしてモーダル表示、編集とかも何となくできた
・カレンダーをクリックしたりドラッグしたりしてイベント追加できた

多分できています。
仕上げは設定済みのイベントをドラッグして別の日に移動させてデータ更新です。

fullcalendarのプロパティを確認

「editable」をtrueに設定する必要があります。
これをやっておかないと一生動きません。
多分設定済みだとは思うのですが、一応確認しておいて下さい。

イベントドラッグイベントを登録

使用するのは「eventDrop」というイベントです。
ドラッグ完了時みたいな感じのイメージです。
サラっと書いてみます。

eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
    // ***** ここにドラッグ完了時の処理を書く *****
}

引数の意味合いはグーグル先生にお聞き下さい。
自分はeventしか今回使わなかったのでよくわかりません。

既にあるイベントデータを更新するわけですから、以下のデータがあれば実現できそうです。

・更新対象のイベントのID(今回の例ですと、schedules.idになります)
・日付移動させた先の開始日
・日付移動させた先の終了日

試行錯誤した結果、こんな感じにしました。

eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
    // ドラッグ後の日付にデータ更新する
    moveSchedule(event.id, event.start.format('YYYY-MM-DD'), event.end.format('YYYY-MM-DD'));
}

eventの中から必要なデータを取得して、引数としてJSに渡します。
渡した先のJS内でAjax使ってsaveすれば変更完了です。

save部分は普通のCake3の処理と変わりません。
これでなんとなくfullcalendarを使ったスケジュール表ができるんじゃないでしょうか。

こんなに記事が長くなると思ってませんでしたが、以上がCakePHP3 + Bootstrap3 + fullcalendarで作るスケジュール表っぽいもののサンプルになります。

問題なくできていますように。