きょるに @kyoruni

ダッシュで奪取

チラシの裏

【Rails】たのしいFullCalendar(1)導入編

前のブログで一番アクセス数があったのが Rails × カレンダーの記事だったので需要あるんだな〜と思っていたのですが、内容があまりにも古すぎたので書き直します。

目標:カレンダーが表示されるところまで

環境

  • Ruby 2.7.1
  • Rails 6.0.3
  • FullCalendar 5.3.1

目次

  1. 準備
  2. カレンダーの読み込み
  3. コントローラーとビューの作成
  4. 表示確認
  5. 日本語化する
  6. 参考URL

1.準備

プロジェクト作成

$ rails new rails-simple-calendar -d mysql
$ cd rails-simple-calendar
$ rails db:create

ライブラリのインストール

$ yarn add @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

Gem もありますが、そちらは2018年ぐらいで更新が止まっているため yarn を使います。

  • @fullcalendar/core … 本体(必須)
  • @fullcalendar/daygrid … 1ヶ月カレンダー

    • 週間カレンダーを使いたければ @fullcalendar/timegrid
  • @fullcalendar/interaction … クリックイベントとか

→ その他必要に応じて プラグイン を追加する(今回はこれだけ)

起動確認

$ rails s

最初のページが表示されることを確認。

2.カレンダーの読み込み

■ app/javascript/calendar.js
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

document.addEventListener('turbolinks:load', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new Calendar(calendarEl, {
    plugins: [ dayGridPlugin, interactionPlugin ]
  });
  calendar.render();
});

カレンダー用のファイルを新規作成して、ライブラリを読み込む記述を追加。

  • 他のプラグインを入れた場合は、importplugins に適宜記載
■ app/javascript/packs/application.js
require("../calendar")

今ある記述の下に追加。

3.コントローラーとビューの作成

$ rails g controller events

とりあえず、events コントローラーで作成。

■ app/controllers/events_controller.rb
class EventsController < ApplicationController
  def index
  end
end
■ app/views/events/index.html.erb
<h1>Events#index</h1>
<div id="calendar"></div>

4.表示確認

■ config/routes.rb
Rails.application.routes.draw do
  root to: "events#index"
  resources :events
end
  • ルーティングができているか、念のため確認

    • events 関連のものがあればOK
$ rake routes
〜〜〜〜〜 中略 〜〜〜〜〜
      root GET    /                            events#index
    events GET    /events(.:format)            events#index
           POST   /events(.:format)            events#create
new_event  GET    /events/new(.:format)        events#new
edit_event GET    /events/:id/edit(.:format)   events#edit
    event  GET    /events/:id(.:format)        events#show
           PATCH  /events/:id(.:format)        events#update
           PUT    /events/:id(.:format)        events#update
           DELETE /events/:id(.:format)        events#destroy
$ rails s

やったー

出ました!ヤッター

5.日本語化する

このままだと英語表示になっているので、日本語化します。

■ app/javascript/calendar.js
import { Calendar } from '@fullcalendar/core';
+ import jaLocale from '@fullcalendar/core/locales/ja';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

document.addEventListener('turbolinks:load', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new Calendar(calendarEl, {
+   locale: jaLocale,
    plugins: [ dayGridPlugin, interactionPlugin ]
  });
  calendar.render();
});

ロケールファイルを読み込む記述を追加。

6.見た目の調整

6-1.月曜始まりにする

■ app/javascript/calendar.js
document.addEventListener('turbolinks:load', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new Calendar(calendarEl, {
    locale: jaLocale,
+   firstDay: 1,
    plugins: [ dayGridPlugin, interactionPlugin ]
  });
  calendar.render();
});

firstDay パラメータに 1 を指定。

  • 日曜日 = 0 なので、月曜日は 1
  • (使わないと思いますが)火曜日 2、水曜日 3 …

6-2.ヘッダーと、土日の色を変える

■ app/assets/stylesheets/events.scss
.fc-col-header {
  background: #f0f0f0;
}
.fc-day{
  &-sat {
    color: blue;
  }
  &-sun {
    color: red;
  }
}
  • fc-col-header : ヘッダー
  • fc-day-曜日名 : 曜日

    • 月曜日なら、fc-day-mon

いい感じ

いい感じになりました!

6.参考URL