Railsアプリケーションにfullcalendarを導入

15243 ワード
FullCalendar Ruby Rails jQuery Ruby テキストリンク

本投稿について

現在作成しているRailsアプリケーションに予定を書き込めるカレンダーを表示させるために、jQureryのFullCallendarを導入しました。カレンダーの表示方法を探している方の助けになればいいなと思います。

前提条件

ビューはhamlとSCSSで書いております。
Rails "5.0.7.2"を使用しています。

コマンド

scaffold で Eventモデルを作成しました。
FullCalenderで予定を書き込む場合、Eventというモデル名じゃないと機能しないらしいです。

$ rails g scaffold event title:string body:string start_date:datetime end_date:datetime
$ rails db:migrate RAILS_ENV=development

導入するGemFile

以下の3つを書いてbundle install

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

SCSSへの記入

application.scssに以下を記入

app/assets/stylesheets/application.scss
*= require_tree .
 *= require_self
 *= require fullcalendar
 */

JavaScript

コピーしてそのまま貼り付けてください。これによりカレンダーが日本語で表示されます。

app/assets/javascripts/application.js
//= require jquery
//= require moment
//= require fullcalendar

$(function () {
    // 画面遷移を検知
    $(document).on('turbolinks:load', function () {
        if ($('#calendar').length) {

            function Calendar() {
                return $('#calendar').fullCalendar({
                });
            }
            function clearCalendar() {
                $('#calendar').html('');
            }

            $(document).on('turbolinks:load', function () {
                Calendar();
            });
            $(document).on('turbolinks:before-cache', clearCalendar);

            //events: '/events.json', 以下に追加
            $('#calendar').fullCalendar({
                events: '/events.json',
                //カレンダー上部を年月で表示させる
                titleFormat: 'YYYY年 M月',
                //曜日を日本語表示
                dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
                //ボタンのレイアウト
                header: {
                    left: '',
                    center: 'title',
                    right: 'today prev,next'
                },
                //終了時刻がないイベントの表示間隔
                defaultTimedEventDuration: '03:00:00',
                buttonText: {
                    prev: '前',
                    next: '次',
                    prevYear: '前年',
                    nextYear: '翌年',
                    today: '今日',
                    month: '月',
                    week: '週',
                    day: '日'
                },
                // Drag & Drop & Resize
                editable: true,
                //イベントの時間表示を２４時間に
                timeFormat: "HH:mm",
                //イベントの色を変える
                eventColor: '#87cefa',
                //イベントの文字色を変える
                eventTextColor: '#000000',
                eventRender: function(event, element) {
                    element.css("font-size", "0.8em");
                    element.css("padding", "5px");
                }
            });
        }
    });
});

カレンダーの表示方法

"#calendar"だけで表示されます（HTMLで書く場合はidがcalendarのdiv要素を書いてください）。

app/views/events/index.html.haml
%p#notice= notice
%h1 Events
%table
  %thead
    %tr
      %th Title
      %th Body
      %th Start date
      %th End date
      %th{:colspan => "3"}
  %tbody
    - @events.each do |event|
      %tr
        %td= event.title
        %td= event.body
        %td= event.start_date
        %td= event.end_date
        %td= link_to 'Show', event
        %td= link_to 'Edit', edit_event_path(event)
        %td= link_to 'Destroy', event, method: :delete, data: { confirm: 'Are you sure?' }
%br/
= link_to 'New Event', new_event_path
//今回は既にあるコードの下に書きました。
#calendar

※注意点
turbolinksの機能をOFFにしてください。

app/views/layouts/application.html.haml
%body{"data-turbolinks" => "false"}
    = yield

ルーティングの設定

起動してすぐに確認できるようにルーティングを設定しておきます。


Rails.application.routes.draw do
  root "events#index"
  resources :events
end

"rails s"でアプリを起動すると以下のようにカレンダーが表示されるようになるはずです。

New eventsをクリックして入力することでカレンダー上にイベントが表示されます。
カレンダー上のイベントをクリックするとイベントの詳細を確認できます。

感想

jQureryのライブラリを利用することで、簡単にカレンダーを表示させることができました。
今後ともライブラリを積極的に使っていきたいものです。

参考文献