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

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