はじめに
今回は、FullCalendarでカレンダーにイベントを登録するところまでをやります。
前提
前回の投稿で構築した環境を使っています。
登録
イベント登録用のエンドポイントをroute.rbに設定します。
config/route.rb
Rails.application.routes.draw do
root to: 'calendar#index'
get 'calendar/index'
get 'events', to: 'event#show'
post 'events/create', to: 'event#create'
end
続いて、登録用の処理をcontrollerに書きます。
app/controllers/event_controller.rb
class EventController < ApplicationController
def show
@event = Event.all
# render :json => @event
respond_to do |format|
format.json {
render json:
@event.to_json(
only: [:title, :start, :end]
)
}
end
end
def create
event = Event.new
event.attributes = {
title: params[:title],
start: params[:start],
end: params[:end],
}
event.save
respond_to do |format|
format.json {
render json:
@event.to_json(
only: [:title, :start, :end]
)
}
end
end
end
あとは、calendar.jsに処理を追加すればうまくいくはず。
ですが、Railsでは、CRUDを行う際にCSRF対策のtokenを発行するようで
普通にpost投げてもエラーを返されます。
metaタグにcsrf-tokenがセットされているのでそれを取得して
$.ajaxにセットしてリクエストを投げました。
app/assets/javascripts/calendar.js
$(document).ready(function() {
create_event = function(title, start, end){
$.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: "/events/create",
data: {
title: title,
start: start.toISOString(),
end: end.toISOString()
}
}).done(function(data){
alert("登録しました!");
}).fail(function(data){
alert("登録できませんでした。");
});
};
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
navLinks: true,
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('イベントを追加');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
$('#calendar').fullCalendar('unselect');
create_event(title, start, end);
}
},
timezone: 'UTC',
events: '/events.json',
editable: true
});
});
最後に
一通り動くようになったら、calendar.jsは整理したいですけどとりあえず今日の目標はデータが格納されるまで。
上記プログラムで動きました。
が、user_idがNULLだったり、まだいろいろ整形する必要がありそうですが、本日はここまで。
ソースはこちら。https://github.com/fukumura/dcalen
テストとか、ログインとか、validationとか、その他の細かい処理とか、は追々やっていけたらと思います。