Ruby on Railsとfullcalendar pluginでGoogleカレンダークローンを作る(2) #JavaScript

前回、カレンダーの枠まで表示できるようにしたので、
今回はイベントを登録して表示できるようにしてみる。

イベントを表示させる

scaffoldでeventを生成する。
カラムはfullcalendarのevent objectに合わせる。

bundle exec rails g scaffold event title start:datetime end:datetime color allDay:boolean
bundle exec rake db:migrate

localhost:3000/events/newからeventをDBに登録できるようになるので、
適当に登録しておく。

登録したeventはlocalhost:3000/eventsで参照できる。
また、localhost:3000/events.jsonとすると登録されたeventをjson形式で取得できる。

calendar.jsを以下のように書き換える。
eventsオプションで上記のeventをjson形式で取得するURLを指定することで、eventをカレンダー上に表示できるようになる。

calendar.js

$(document).ready(function() {
    $('#calendar').fullCalendar({
        events: '/events.json',
    });
});

イベントをカレンダーから登録する

まずはカレンダーを選択できるようにする。
そのためにはselectableオプションをtrueにして、selectオプションにコールバック関数を登録する。
引数は選択の開始日と終了日（１日だけ選択した場合には開始日と同じ日になる）、終日かのフラグ（月表示の場合はtrue）。

calendar.js

$(document).ready(function() {
    $('#calendar').fullCalendar({
        events: '/events.json',
        selectable: true,
        selectHelper: true,
        select: function(start, end, allDay) {
            console.log('start:' + start);
            console.log('end:' + end);
            console.log('allDay:' + allDay);
            alert('selected');
        }
    });
});

このコールバック関数内で、rails側にリクエストを投げてeventを登録する。
/eventsにPOSTでデータを投げればよいので、以下のようにしてみた。

promptでtitleを受け取り、dataを作ってajaxで/eventsに投げる。
成功したら、refetchEventsを呼んでデータの再取得・再描画を行う。
最後にunselectを呼んで、選択を解除する。

calendar.js

$(document).ready(function() {
    var select = function(start, end, allDay) {
        var title = window.prompt("title");
        var data = {event: {title: title,
                            start: start,
                            end: end, 
                            allDay: allDay}};
        $.ajax({
            type: "POST",
            url: "/events",
            data: data,
            success: function() {
                calendar.fullCalendar('refetchEvents');
            }
        });
        calendar.fullCalendar('unselect');
    };

    var calendar = $('#calendar').fullCalendar({
        events: '/events.json',
        selectable: true,
        selectHelper: true,
        ignoreTimezone: false,
        select: select
    });
});

個人的に２カ所でハマった。
1つ目はデータの受け渡しのところで、一度データを変数に入れないとrails側で認識できなかった。
2つ目は日付の扱いで、js側からはJSTで日付を送っているが、rails側ではUTCに変換してDBに保存するため、タイムゾーンを考慮する必要があった。
これについては、ignoreTimezoneオプションをfalseにすることで解決できた。