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

CRUDのうち、RとCまでやったので今回はUを実装してみる。

選択したイベントを更新する

選択したイベントを更新するためには、eventClickオプションに関数を登録する。
関数の中身は登録のときとほぼ同じでいける。
違いはリクエストを投げるURLが/events/[event.id]になるところと
dataの中身を_method: 'PUT', event: eventというようにして擬似的にPUTリクエストを投げるようにしているところ。
これによりrails側でupdate処理が実行される。

updateEvent

    var updateEvent = function(event, revertFunc) {
    var title = window.prompt("Edit title", event.title);
    var url = "/events/" + event.id;
    var data = {_method: 'PUT',
            event: {title: title,
                start: event.start,
                end: event.end,
                allDay: event.allDay}};
    $.ajax({
        type: "POST",
        url: url,
        data: data,
        success: function() {
        calendar.fullCalendar("refetchEvents");
        },
        error: revertFunc
    });
    };

カレンダー上の変更に応じてイベントを更新する

カレンダー上でイベントを変更できるようにするためには、jquery-uiが必要になるとのことなので、jquery-ui-railsを追加する。

Gemfileにgem 'jquery-ui-rails'を追加する

bundle install --path/vendor

application.jsに//= require jquery.ui.all、application.cssに*= requi re jquery.ui.allを追加する。

これで、fullCalendarのオプションにeditable: tureを追加すると、カレンダー上での変更、移動ができるようになる。

変更・移動後のeventの中身はコールバック関数の引数で渡されるので、さきほどのupdateEventをeventResizeオプション・eventDropオプションで指定すればよい。
fullCalendarの呼び出しの箇所を抜粋すると以下のようになる。

fullCalendar

    var calendar = $("#calendar").fullCalendar({
        events: "/events.json",
        selectable: true,
        selectHelper: true,
        ignoreTimezone: false,
        editable: true,
        select: select,
        eventClick: updateEvent,
        eventResize: updateEvent,
        eventDrop: updateEvent
    });