予定を保存するテーブルとモデルを作成
例として、seminarsテーブルとモデルを作ります。
$ rails g model seminar title starts_at:datetime ends_at:datetime
$ rails db:migrate
予定を管理するコントローラーとルーティングを作成
$ rails g controller seminars index
app/controllers/seminars_controller.rb
class SeminarsController < ApplicationController
def index
@seminars = Seminar.all
end
end
config.routes.rb
resources :seminars, only: [:index]
予定のダミーデータを投入
$ rails c
2.6.3 :001 > Seminar.create(title: 'サンプルセミナー', starts_at: Time.zone.now, ends_at: Time.zone.now)
Gemを追加
Gemfile
gem 'jquery-rails', '4.3.3'
gem 'fullcalendar-rails'
gem 'momentjs-rails'
$ bundle install
app/assets/javascript/application.js
//= require jquery
//= require moment
//= require fullcalendar
カレンダーを表示するスクリプトを記述
app/assets/javascript/application.js
$(function () {
$(document).on('turbolinks:load', function () {
function eventCalendar() {
return $('#calendar').fullCalendar({});
};
function clearCalendar() {
$('#calendar').html('');
};
$(document).on('turbolinks:load', function () {
eventCalendar();
});
$(document).on('turbolinks:before-cache', clearCalendar);
});
});
CSSの設定
app/assets/stylesheets/application.css
...
*= require_tree .
*= require_self
*= require fullcalendar
*/
カレンダーの表示領域を作成
app/views/seminars/index.html
<div id="calendar"></div>
これで空のカレンダーが表示されます。
予定を表示
$ touch app/views/seminars/index.json.jbuilder
app/views/seminars/index.json.jbuilder
json.array!(@seminars) do |seminar|
json.extract! seminar, :id, :title
json.start seminar.starts_at
json.end seminar.ends_at
end
↑の記述で/seminars.jsonにアクセスした時に以下のデータが返ってくるようになる。
[
{
"id":1,
"title":"サンプルセミナー",
"start":"2021-01-19T07:57:23.329Z",
"end":"2021-01-19T07:57:23.329Z"
},
{
"id":2,
"title":"ホゲホゲセミナー",
"start":"2021-01-19T07:57:23.329Z",
"end":"2021-01-19T07:57:23.329Z"
},
...
]
最後にイベントを表示するスクリプトを追加して完成。
app/assets/javascript/application.js
$(function () {
$(document).on('turbolinks:load', function () {
function eventCalendar() {
return $('#calendar').fullCalendar({});
};
function clearCalendar() {
$('#calendar').html('');
};
$(document).on('turbolinks:load', function () {
eventCalendar();
});
$(document).on('turbolinks:before-cache', clearCalendar);
//以下を追加
$('#calendar').fullCalendar({
events: '/seminars.json'
});
});
});
オプション
FullCalendarの日本語化やオプションいろいろ | Fire Sign Blog