fullcalendar その4 〜カレンダーをクリックしたりドラッグしたりしてイベント追加してみた〜

4回目になってしまいました。
過去の3回分はこちらになります。

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

クリックとドラッグの違い

なんて書くとバカっぽいのですが、fullcalendarはクリックかドラッグかをちゃんと判定してくれます。
1回目の記事でちょっと書きましたが、「selectMinDistance」というプロパティがその判定基準です。
ここに設定した値よりクリック時間が長い場合、ドラッグと判定してる「ぽい」です。
selectMinDistanceのデフォルト値は「0」になっているため、1以上の値にしないとクリックとドラッグの判定はできません。
逆に言えば、ここさえ設定しておけば大したことはありません。

とりあえずクリックイベントを追加してみる

クリックはdayClickというイベントを使用します。
回数を追うごとに雑になってきましたが、こんな感じです。

dayClick: function(date, jsEvent, view) {
    // ***** ここに処理を書く *****
},

カレンダーに対してイベントを追加するので、CalendarControllerのaddアクションでも作って飛ばせばいいんじゃないかと。
ということにした場合は、こんな風になります。

dayClick: function(date, jsEvent, view) {
    // ***** 対象日にイベント追加 *****
    location.href = "<?php echo $this->Url->build('/'); ?>calendars/add/" + date.format('YYYY-MM-DD') + "/";
},

addアクションに対象日付を渡しています。
あとはその渡した日に対してデータ登録すればOKじゃないかと思われます。

ドラッグイベントも追加してみる

ドラッグの時はselectイベントを使います。
多分合ってると思うんですけど。

select: function(start, end) {
    // ***** 対象日の範囲にイベント追加 *****
    location.href = "<?php echo $this->Url->build('/'); ?>calendars/add/" + start.format('YYYY-MM-DD') + "/" + end.format('YYYY-MM-DD') + "/" + start.format('HH:mm') + "/" + end.format('HH:mm') + "/";
},

ダサい引数ですね。でも、気にしないことにします。
範囲指定をするとstartとendにドラッグした範囲の年月日開始と終了が入ってきます。
あとは用途に応じてフォーマットをかけて渡してデータ登録処理をすればOKです。
例えば、2017-11-02から2017-11-05までドラッグした場合は、startに「2017-11-02」、endに「2017-11-05」が入ってくるわけです。
上で時間もフォーマットかけて渡しているのは、fullcalendarというものは日付だけではなく時間も設定するとカレンダー上のイベントの左側に時間が表示されるのです。
そこをできればnullにしたくなかっただけなのです。
好みみたいなものですので、その辺は柔らかく対応すればいいかなと思います。

fullcalendarはstartとendに合致するデータを範囲表示するように、どこかの偉い人が作ってくれておりますのでテーブルのstart、endに相当するカラムにセットすれば恐らくそのまま帯表示されるはずです。

と思うんですが、いかがでしょうか。