【初心者向け】Rails5+FullCalendarでイベントを表示させる

はじめに

今回は、FullCalendarでカレンダーをいい感じに出力して、そのカレンダーにDBに格納されたデータを出力する、というところまでをやります。

前提

前回の投稿で構築した環境を使っています。

FullCalendarでカレンダーを表示

toolboxをみるとicalendarが使われているんですね。

今回は、fullcalendarから直接jsonを読み込ませて表示させようと思います。
よろしくお願いします。

ダウンロード & 設定

https://fullcalendar.io/download/ を読むとLatestVersionは3.1です。
CDNJSも用意されています。

Rails触ったこと無いので1から。。。
とりあえず、表示させていじりたいのでcontroller作成。

% bundle exec rails generate controller calendar index
Expected string default value for '--jbuilder'; got true (boolean)
Expected string default value for '--helper'; got true (boolean)
Expected string default value for '--assets'; got true (boolean)
      create  app/controllers/calendar_controller.rb
       route  get 'calendar/index'
      invoke  erb
      create    app/views/calendar
      create    app/views/calendar/index.html.erb
      invoke  rspec
      create    spec/controllers/calendar_controller_spec.rb
      create    spec/views/calendar
      create    spec/views/calendar/index.html.erb_spec.rb
      invoke  helper
      create    app/helpers/calendar_helper.rb
      invoke    rspec
      create      spec/helpers/calendar_helper_spec.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/calendar.coffee
      invoke    scss
      create      app/assets/stylesheets/calendar.scss
fukumura@ubuntu-xenial(15:31:59) ~/projects/dcalen

次はroute.rb。
route.rbの書き方はこの辺を参考にします。
http://railsguides.jp/routing.html

config/route.rb

Rails.application.routes.draw do
  root to: 'calendar#index'
  get 'calendar/index'
end

うつった。
まだ1行しか書いてない。

さっそく読み込んで出力させてみます。

カレンダー表示

使い方はここを参考に。
https://fullcalendar.io/docs/

├── javascripts
│   ├── fullcalendar.3.1.0.js
│   ├── jquery.3.1.1.js
│   ├── moment.2.10.6.ja.js
│   └── moment.2.10.6.js
└── stylesheets
    └── fullcalendar.min.css

js、cssはこのように配置して、rails側で読み込ませるように。

イベントテーブル作成

次にカレンダーに表示したいイベントのモデルを作ります。

% rails g model Event user_id:integer title:string disp_flg:boolean start:datetime end:datetime allDay created_at:datetime updated_at:datetime
Expected string default value for '--jbuilder'; got true (boolean)
      invoke  active_record
      create    db/migrate/20161218144626_create_events.rb
      create    app/models/event.rb
      invoke    rspec
      create      spec/models/event_spec.rb
% rails db:migrate
== 20161218144626 CreateEvents: migrating =====================================
-- create_table(:events)
   -> 0.0040s
== 20161218144626 CreateEvents: migrated (0.0041s) ============================

modelができました。

テーブルができたので、レコードも作ってみました。（手動）

イベント表示

これらをjsonで出力させてfullcalendarに読み込ませてみます。

app/assets/javascripts/calendar.js

$(document).ready(function() {
    $('#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');
      },
      events: '/events.json',
      editable: true
    });
});

events: '/events.json',
ここで読み込みます。$.getJSON('/events.json'), って書いて取得できずに少しハマりました。
続いて、/events.json で eventsテーブルの値を返すようにします。

app/controllers/event_controller.rb

class EventController < ApplicationController
  def events
    @event = Event.all
    # render :json => @event
    respond_to do |format|
      format.json {
        render json:
        @event.to_json(
          only: [:title, :start, :end]
        )
      }
    end
  end
end

routeの設定もします。

config/routes.rb

Rails.application.routes.draw do
  root to: 'calendar#index'
  get 'calendar/index'
  get 'events', to: 'event#events'
end

表示されました。

いろいろカスタマイズしたいですが、ちょっとずつ触りながら学んでいかせていただきます。

wipですが、ソースはこちら。