【環境】
ruby 2.5.0
rails 5.1.2
fullcalendar-rails
【目的】
railsのアプリ上で、fullcalendarでイベントの時間を変更したときに、DBにも変更を反映すること。
【フロー】
イベントの時間が変更されたことを受け取る
(fullcalendarでの表示の変更)
↓
ajaxでpatch
↓
DBでも変更
【コード】
calendar.js
$(document).ready(function() {
//イベントを編集するための関数を設定
//ajaxでpostするときは、自分でcsrf-tokenを投げるための設定が必要
//ajaxでpatchする際は、postでmethodをpatchに指定する
edit_event = function (start, end, id) {
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
var token;
if (!options.crossDomain) {
token = $('meta[name="csrf-token"]').attr('content');
if (token) {
return jqXHR.setRequestHeader('X-CSRF-Token', token);
}
}
});
$.ajax({
type: "post",
url: "/editevent",
data: {
start: start.toISOString(),
end: end.toISOString(),
id: id,
_method: 'PATCH'
}
}).done(function(data){
alert("変更しました!");
}).fail(function(data){
alert("変更できませんでした。");
});
};
$('#calendar').fullCalendar({
header: {
right: 'month,agendaWeek,agendaDay'
},
editable: true,
eventResize: function(event) {
var start = event.start;
var end = event.end;
var id = event.id;
edit_event(start, end, id);
},
});
});
config.rb
patch '/editevent', to: 'events#edit_event'
events_controller.rb
class EventsController < ApplicationController
def edit_event
starttime = params[:start]
endtime = params[:end]
event = Event.find(params[:id])
event.update(starttime: starttime,
endtime: endtime)
end
end
コードは一部簡略化していますが、これでも動くと思います。
【参考にしたサイト】
【初心者向け】Rails5+FullCalendarでイベントを登録する
jQuery.ajaxPrefilter() | jQuery API Documentation
fullcalendar