fullcalendarの使い方

1. Gemfileにfullcalendar-railsとmomentjs-railsをを追加

...

gem 'therubyracer',  platforms: :ruby

gem 'fullcalendar-rails'
gem 'momentjs-rails'

# Use jquery as the JavaScript library
gem 'jquery-rails'

...

ターミナル

$ bundle install

2. カレンダーの表示

コントローラーとアクションを追加

ターミナル

$ bundle exec rails g controller calendar index
create  app/controllers/calendar_controller.rb
       route  get 'calendar/index'
      invoke  erb
      create    app/views/calendar
      create    app/views/calendar/index.html.erb
      invoke  test_unit
      create    test/controllers/calendar_controller_test.rb
      invoke  helper
      create    app/helpers/calendar_helper.rb
      invoke    test_unit
      create      test/helpers/calendar_helper_test.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/calendar.js.coffee
      invoke    scss
      create      app/assets/stylesheets/calendar.css.scss

viewに表示領域を作成

app/views/calendar.index.html.erb

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

jqueryでfullcalenderを呼び出し

app/assets/javascript/calendar.js.coffee

$ ->
    $('#calendar').fullCalendar()

app/assets/javascript/application.jsのrequire_tree .の前に以下の二行を追加

app/assets/javascript/application.js

//= require moment
//= require fullcalendar

app/assets/stylesheets/application.cssのrequire_tree .の前に以下の一行を追加

app/assets/stylesheets/application.css

*= require fullcalendar

イベントクリックの際の表示をhtmlにする

json.urlのevent_urlの引数からformat: :jsonを外す

app/views/events/index.json.jbuilder

json.array!(@events) do |event|
   json.extract! event, :id, :title, :start, :end, :color, :allDay
-  json.url event_url(event, format: :json)
+  json.url event_url(event)
 end

参考