FullCalendarの動きメモ

確認用ソース

    const $calendar = $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      defaultView: 'agendaWeek',
      editable: true,
      selectable: true,
      selectHelper: true,
      select: (start, end, jsEvent, view) => {
        console.log('select');
        console.log(start.toISOString());
        console.log(end.toISOString());
        $calendar.fullCalendar('renderEvent',
          {
            title: 'hoge',
            start: start,
            end: end
          },
          true
        );
        $calendar.fullCalendar('unselect');
      },
      eventClick: (event, jsEvent, view) => {
        console.log('eventClick');
        console.log(event.start.toISOString());
        console.log(event.end.toISOString());
        $calendar.fullCalendar('unselect');
      },
      eventResize: (event, delta, revertFunc, jsEvent, ui, view) => {
        console.log('eventResize');
        console.log(event.start.toISOString());
        console.log(event.end.toISOString());
        $calendar.fullCalendar('unselect');
      },
      eventDrop: (event, delta, revertFunc, jsEvent, ui, view) => {
        console.log('eventDrop');
        console.log(event.start.toISOString());
        console.log(event.end.toISOString());
        $calendar.fullCalendar('unselect');
      },
      events: (start, end, timezone, callback) => {
        console.log('events');
        console.log(start.toISOString());
        console.log(end.toISOString());
      },
      //eventRender: (event, element) => {
      //  console.log('eventRender');
      //}
    });

注意！！

【追記】
あとから気づいたことだが、上記確認用ソース
FullCalendarのタイムゾーンを設定していなかった。
設定しなかった場合は、
http://fullcalendar.io/docs/timezone/timezone/
false (no timezone, the default)
でデフォルトはno timezoneのようだ！！

ということで、
timezone: 'UTC'
を設定したものを下部に追加した

timezone: no timezoneの場合

events（カレンダー表示期間）

start.toISOString() => 2015-09-06
end.toISOString() => 2015-09-13
カレンダー表示日が 9/6 - 9/12 なのでendが+1されて
2015-09-13になっているものと思われる。

ということでサーバーに送るクエリはーこんな感じ。

select（なぞって新規イベント作成）

start.toISOString() => 2015-09-08T06:00:00
end.toISOString() => 2015-09-08T06:30:00

ということでサーバーに送るクエリはーこんな感じ。

eventDrop（イベントを移動）

event.start.toISOString() => 2015-09-08T07:00:00
event.end.toISOString() => 2015-09-08T07:30:00

ということでサーバーに送るクエリはーこんな感じ。

eventClick（イベントをクリック）

event.start.toISOString() => 2015-09-08T07:00:00
event.end.toISOString() => 2015-09-08T07:30:00

eventResize（リサイズで編集）

event.start.toISOString() => 2015-09-08T07:00:00
event.end.toISOString() => 2015-09-08T08:00:00

ということでサーバーに送るクエリはーこんな感じ。

ちなみにブラウザのタイムゾーンにかかわらず上記同じ

var date = new Date();
date.toString();
date.getTimezoneOffset(); => 360

だろうと、

var date = new Date();
date.toString();
date.getTimezoneOffset(); => -540

だろうとconsole.log()で表示された文字列は同じであった。

当然である。　FullCalendarの設定は、timezone: 'no timezone'　なのだから。

timezone: 'UTC'

events（カレンダー表示期間）

start.toISOString() => 2015-09-06
end.toISOString() => 2015-09-13

select（なぞって新規イベント作成）

start.toISOString() => 2015-09-08T06:00:00.000Z
end.toISOString() => 2015-09-08T06:30:00.000Z

eventDrop（イベントを移動）

event.start.toISOString() => 2015-09-08T07:00:00.000Z
event.end.toISOString() => 2015-09-08T07:30:00.000Z

eventClick（イベントをクリック）

event.start.toISOString() => 2015-09-08T07:00:00.000Z
event.end.toISOString() => 2015-09-08T07:30:00.000Z

eventResize（リサイズで編集）

event.start.toISOString() => 2015-09-08T07:00:00.000Z
event.end.toISOString() => 2015-09-08T08:00:00.000Z

結果

ちゃんとUTCを示す文字列が付いた！