FullCalendarの動きメモ

## 確認用ソース

```js
    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（カレンダー表示期間）
![Screen Shot 2015-09-06 at 19.58.41.png](https://qiita-image-store.s3.amazonaws.com/0/27895/3cd522bd-9900-5a74-34c1-b8557afd4017.png)
`start.toISOString() => 2015-09-06`
`end.toISOString() => 2015-09-13`
カレンダー表示日が `9/6 - 9/12` なのでendが`+1`されて
`2015-09-13`になっているものと思われる。

ということでサーバーに送るクエリはーこんな感じ。
![Screen Shot 2015-09-06 at 21.44.20.png](https://qiita-image-store.s3.amazonaws.com/0/27895/40d39732-7133-c7f8-2de7-dcd8a69e681c.png)


### select（なぞって新規イベント作成）
`start.toISOString() => 2015-09-08T06:00:00`
`end.toISOString() => 2015-09-08T06:30:00`

ということでサーバーに送るクエリはーこんな感じ。
![Screen Shot 2015-09-06 at 21.46.36.png](https://qiita-image-store.s3.amazonaws.com/0/27895/42ea4c57-6ce9-c0a6-5ae7-013934140281.png)


### eventDrop（イベントを移動）
![Screen Shot 2015-09-06 at 20.03.52.png](https://qiita-image-store.s3.amazonaws.com/0/27895/d55da4ca-9b6a-7b44-4c04-71d50648add2.png)
`event.start.toISOString() => 2015-09-08T07:00:00`
`event.end.toISOString() => 2015-09-08T07:30:00`

ということでサーバーに送るクエリはーこんな感じ。
![Screen Shot 2015-09-06 at 21.48.21.png](https://qiita-image-store.s3.amazonaws.com/0/27895/353a1ae1-ab71-9f66-eddb-aee73023764b.png)


### eventClick（イベントをクリック）
`event.start.toISOString() => 2015-09-08T07:00:00`
`event.end.toISOString() => 2015-09-08T07:30:00`

### eventResize（リサイズで編集）
![Screen Shot 2015-09-06 at 20.22.50.png](https://qiita-image-store.s3.amazonaws.com/0/27895/749be24f-78e5-255b-bc73-16f05175b175.png)
`event.start.toISOString() => 2015-09-08T07:00:00`
`event.end.toISOString() => 2015-09-08T08:00:00`

ということでサーバーに送るクエリはーこんな感じ。
![Screen Shot 2015-09-06 at 21.49.39.png](https://qiita-image-store.s3.amazonaws.com/0/27895/2040cc21-3df0-4809-f9c2-0bc3162768b1.png)


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

![Screen Shot 2015-09-06 at 05.32.08.png](https://qiita-image-store.s3.amazonaws.com/0/27895/a1ecade7-e26b-b80e-82d0-3bb07de1bf9a.png)

```
var date = new Date();
date.toString();
date.getTimezoneOffset(); => 360
```
だろうと、

![Screen Shot 2015-09-06 at 20.33.04.png](https://qiita-image-store.s3.amazonaws.com/0/27895/c7ffc672-52cc-bb0e-646a-ec0eafaa9d43.png)

```
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`を示す文字列が付いた！