Posted at

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

More than 5 years have passed since last update.

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
});