Rails5.1.4でfullcalendarによるカレンダービューを実装

#gemのインストール
Gemfileにmomentjs-railsとfullcalendar-railsを追記します。

Gemfile

source 'https://rubygems.org'

gem 'rails', '5.1.4'
.
.
.
gem 'momentjs-rails'
gem 'fullcalendar-rails'
.
.
.

momentjsは日付処理に用いるgem（多分）で、fullcalendarは今回実装したいカレンダーの本体です。

追記したらインストールします。

> bundle install

続いて、app/assets/javascript/application.jsの//= require_tree .の前に、//= require momentと//= require fullcalendarを追記します。

app/assets/javascript/application.js

.
.
.
//= require moment
//= require fullcalendar
//= require_tree .

最後に、app/assets/stylesheets/application.css.scssの先頭に以下のように*= require fullcalendarを追記します。
（自分の環境ではここがscssファイルだったのですが、cssファイルの方は記法が異なると思います。こちらを参考にどうぞ：https://qiita.com/Ryunosuke38/items/7ab24caf13ea0ca1f49c ）

app/assets/stylesheets/application.css.scss

/*
 *= require fullcalendar
 */
.
.
.

ここで、サーバーを起動している場合は一度再起動を行ってください。

#calendarコントローラーの作成
railsコマンドからcalendarコントローラーを作成します。

> rails generate controller calendar

これにより生成されるapp/assers/javascripts/calendar.coffeeに以下のように編集します。

app/assers/javascripts/calendar.coffee

$(document).on 'turbolinks:load', ->
  $('#calendar').fullCalendar {}
  return

これで表示する準備が整いました。

ちなみに...

fullcalendarの使い方を調べていたら、ほぼどこでも以下のコードように紹介されていました。

なんかおかしい挙動

$(document).ready ->
  $('#calendar').fullCalendar {}
  return

しかし、Rails5ではturbolinksというgemのせいで$(document).readyがうまく動かないらしいです。
具体的には、カレンダーを表示するページに遷移してから1度更新しないとカレンダーが表示されません。ここで小一時間費やしてむかついたので書いておきます。
以下のサイトで解決しました、感謝です。https://qiita.com/hiroyayamamo/items/b258acbaa089d9482c8a

##※追記
上記のcoffeeスクリプトですと、他ページからブラウザバックなどによって戻ってきた場合、2回描画が行われていまうバグを発見しました。
（https://teratail.com/questions/81758） を参考に、以下のように修正したところ、解決しました。

app/assers/javascripts/calendar.coffee

$(document).on 'turbolinks:load', ->
  $('#calendar').fullCalendar {}
  return

$(document).on 'turbolinks:before-cache', ->
  $('#calendar').empty()
  return

#viewの作成
カレンダーを表示したいテンプレートに以下のhtmlコードを追記します。

app/views/hoge.html.erb

<div id="calendar"></div>

ページを確認するとご覧のようなカレンダーが表示されているはずです。

#おわりに
今後、このカレンダービューにスケジュールなどを入力し、データベースに反映させる実装を行いたいと考えています。

javascriptは全く勉強せず直感でやってるのでつらい

#参考URL
FullCalendar
Ruby on Railsとfullcalendar pluginでGoogleカレンダークローンを作る(1)
application.scssにrequireなんちゃらを記述する際の方法
Rails5でjqueryを動かす方法