環境
- Rails : 5.2.3
- Ruby : 2.5.1
カレンダー使いたい！と思って、個人アプリで使用したのでメモです。
良い感じの見た目のものがパッと表示されるだけで、めっちゃテンション上がりますね…
目標
カレンダーが表示されるところまで！
目次
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>
サーバーを起動して、画面を表示。
出ました！ﾔｯﾀｰ
8. 参考URL ↑
表示はできましたが素のままだとあんまりなので、次回は見た目のカスタマイズをしていきます。