FullCalendar 2.6.1 の 日付リサイズ処理

jQueryの定番 カレンダーライブラリの FullCalendarですが、探しても出てこなかった私が躓いた点を纏めておこうと思います。

バージョンは2.6.1です。

 

■イベント情報の 終了日(end)がずれて表示される

これは、allDayオプションを有効にしているかどうかでも変動します。

まず無効にしている場合は、タイムゾーン設定が適用されます。

timezone: ‘Asia/Tokyo’  オプション

event.start  2016-04-22 T09:00:00+0900 

event.end  2016-04-25 T09:00:00+0900  など。

22日から25日までイベントが表示されます。

 

次にallDayを有効にした場合、上記データをそのまま使うと

22日から24日までイベントが表示されます。

 

仕様はよくわかりませんが、時刻を無視したデータでの終日判定らしいので  25日までと判断され

22 <= イベント  < 25    みたいな扱いになるのかもしれません。 ※憶測です。

 

これを回避する手法を色々探したのですが、  旧fullcalendarでは 日付型(new Date()) にすると治るとのことでしたが、試してみた結果なにも変動がありませんでした。

 

ですので、イベントデータを読み込む際のコールバックにて、1日プラスする処理を加えて対応しました。

 

 

■イベントの日付を編集する  ドラッグする。

イベントの日付を操作して更新したいときの処理ですが、イベント名が紛らわしく 欲しい情報が中々取得出来ませんでした。

マウス系日付操作イベントは主に6つあります。

 

そして今回はこの中の Resizeを使用していましたが、どうも意図した日付が取得出来ませんでした。

最初に使用していたのは  eventResizeStopで、リサイズが終了したら更新処理を。 と思っていたのですが、どうもこのイベントは終了時のデータが更新される前らしくeventResizeStartと同じ値がとれていました。

それに気づかず、値の取り方が悪いのだと必死にデータを探していましたが・・・。

 

というわけで、正しい処理をするには  eventResizeを使えばいいようです。

下記は一日減らそうとした場合。25日→ 24日

allDayの場合は、1日ずらして処理をしてしまっていますので、  アップデートする際は delta(経過ミリ秒 –86400000等)で計算するほうが楽かもしれません。