ダッシュで奪取

自分用のメモ

トップ > Ruby on Rails > 【Rails】たのしいFullCalendar(1)導入編

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

Ruby on Rails

環境

  • Rails : 5.2.3
  • Ruby : 2.5.1

カレンダー使いたい！と思って、個人アプリで使用したのでメモです。
良い感じの見た目のものがパッと表示されるだけで、めっちゃテンション上がりますね…

目標

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

目次

  1. 基本的なファイルの準備
  2. 予定を登録するテーブルの作成
  3. 画面を表示する準備
  4. 必要なGemを導入
  5. カレンダーを読み込む準備
  6. カレンダー用のjsファイルを作成
  7. カレンダーを表示
  8. 参考URL

1. 基本的なファイルの準備 ↑

# mysqlで「calendar-test」を、rails5.2.3で作成
$ rails _5.2.3_ new calendar-test -d mysql

# calendar-testのディレクトリに移動
$ cd calendar-test

# DB作成
$ rake db:create

2. 予定を登録するテーブルの作成 ↑

スケジュールは「events」テーブルに登録したいので、eventモデルを作成。

# eventモデルを作成
$ bundle exec rails g model event

マイグレーションファイルができるので、必要なカラムを作成する。

db/migrate/なんとか_create_events.rb
class CreateEvents < ActiveRecord::Migration[5.2]
  def change
    create_table :events do |t|
      t.string     :title, null: false
      t.datetime   :start, null: false
      t.datetime   :end,   null: false
      t.boolean    :allDay
      t.timestamps
    end
  end
end
eventsテーブルの中身
カラム名 型 用途
title string 予定の名前
start datetime 開始日時
end datetime 終了日時
allDay boolean 終日フラグ（trueなら終日扱いになる）

他にも色々持たせられるデータはありますが、必要になったらその都度追加していけば良いので最低限にします。

マイグレーション！

$ bundle exec rake db:migrate

3. 画面を表示する準備 ↑

# eventsコントローラーを作成
$ bundle exec rails g controller events

取りあえず仮表示用として、events#indexをルートパスに設定

config/routes.rb
Rails.application.routes.draw do
  resources :events, only: [:index]
  root "events#index"
end

eventsコントローラーにアクションだけ作成

app/controllers/events_controller.rb
class EventsController < ApplicationController
  def index
  end
end

app/views/events内に、空で良いのでビューを作成

app/views/events/index.html.erb
<!-- 中身の記載はなし -->

4. 必要なGemを導入 ↑

Gemfile
# カレンダー
gem 'jquery-rails'
gem 'fullcalendar-rails'
gem 'momentjs-rails'
  • jQuery使って表示したいので、jquery-rails
  • メイン機能のカレンダー表示用に、fullcalendar-rails
  • 日付ライブラリとして、momentjs-rails
    ↑を追記。
$ bundle install

5. カレンダーを読み込む準備 ↑

下記を追記する。

app/assets/javascripts/application.js
//= require jquery
//= require moment
//= require moment/ja.js
//= require fullcalendar
//= require fullcalendar/lang/ja
  • カレンダーを日本語表示したいので、moment及びfullcalendarの「ja」版を読み込んでいます！他の言語が良ければ他の言語用のものがある…はず…
  • require_tree .より前に書かないと、うまく動かないので注意！
app/assets/stylesheets/application.css

公式ドキュメントより、英語版以外のカレンダーを使いたい場合は下記を追記。

*= require fullcalendar

場所はどこでも動きましたが、これが無いと表示がぐしゃぐしゃになるので必須。

6. カレンダー用のjsファイルを作成 ↑

名前は任意ですが、取りあえず「calendar.js」にします。
app/assets/javascripts内に、calendar.jsを作成

app/assets/javascripts/calendar.js
$(document).on("turbolinks:load", function() {
  $("#calendar").fullCalendar({});
});

turbolinks未使用であれば、普通に単品でfunction(){}で良いと思います。

7. カレンダーを表示 ↑

表示したい場所に、中身が空のid「calendar」divブロックを記載。

app/views/events/index.html.erb
<div id="calendar"></div>

サーバーを起動して、画面を表示。 f:id:kyoruni:20190823164217p:plain

出ました！ﾔｯﾀｰ

8. 参考URL ↑

表示はできましたが素のままだとあんまりなので、次回は見た目のカスタマイズをしていきます。