FreeCamp

FullCalendarの実装

Railsでカレンダーを作成するときの選択肢として、FullCalendarかSimpleカレンダーなどがあると思います。
今回はFullCalendar導入部分をご説明していきます。
実装しながら説明も加えていきます。

完成目標

目次

  1. 実装
    1.1 FullCalendarの導入
  2. 完成ソースコード

環境

OS:mac OS Mojave
rbenv:1.1.2
Ruby:2.5.5
Rails:5.2.4.1

1. 実装

1.1 FullCalendarの導入

簡易アプリケーションの作成

CRUD処理ができるアプリケーションを作成していきます。
要は新規投稿・一覧表示・編集・削除ができるアプリケーションのことです。

$ rails new rails_fullcalendar
$ cd rails_fullcalendar
$ rails g scaffold posts title:string body:text
$ rails db:migrate
...追加
root 'posts#index' # postsコントローラのindexアクションをrootパスに設定します

ここまでできたら$ rails sでアプリケーションを起動し、ブラウザでhttp://localhost:3000と検索してみてください。
CRUD処理ができるアプリケーションが作成できたと思います。

これからFullCalendarを導入していきます。

gemの追加

...追加
gem 'jquery-rails'
gem 'fullcalendar-rails'
gem 'momentjs-rails

jquery-rails:RailsでjQueryを使用するためのGem
fullcalendar-rails:RailsでFullCalendarというjQueryのプラグインをしようするためのGem
momentjs-rails:日付の解析、操作、および書式設定のための軽量なJavaScript日付ライブラリをインストールするGem

これらのgemを使用すればカレンダーの表示・予定の追加は行えるようになります。
それでは$ bundle installを実行し、FullCalendarを使用できるよう設定していきましょう。

FullCalendarのための設定

$ bundle install
...編集
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require moment
//= require fullcalendar
//= require_tree 
...編集
*= require_tree .
*= require_self
*= require fullcalendar

投稿一覧画面にのみカレンダーを表示させます。

...追加
<div id="calendar"></div>
...追加
$(() => {
  $('#calendar').fullCalendar({});
})

これらの設定が終わった後、http://localhost:3000を開いてみてください。
下記画像のようにカレンダーが表示されたでしょうか。

Turbolinksの回避

一旦カレンダーを表示させることはできました。
しかし、投稿したりリロードしたりしてみるとカレンダーが表示されないこともあります。
Turbolinksが悪さをしていてカレンダーが表示されたり表示されなかったりしています。
Turbolinksはjs, cssの読み込みを初回時に行い、2回目以降でブラウザのキャッシュを利用することでRailsでの画面表示速度を高速化してくれます。
なので、カレンダーが表示されないこともあります。
解決するにはTurbolinksを攻略する他なさそうです。(Turbolinksを使わないという選択肢もありますが、それだと全体的な画面遷移速度が低下してしまいます。)
今回は画面遷移ごとにカレンダーを表示させるよう設定していきます。

...編集
$(() => {
  $(document).on('turbolinks:load', () => {
    $('#calendar').fullCalendar({})
  })
})

このように$(document).on('turbolinks:load', () => {})で囲んであげると、その中に書いたJSが画面遷移ごとに呼び出されます。
これで解決できそうです。

ここまでで確実にカレンダーを表示させることができました。
次はこのカレンダーに予定を追加することをしてみましょう。

2. 完成ソースコード

https://github.com/ssshhhooota/rails_fullcalendar