search
LoginSignup
8

More than 1 year has passed since last update.

posted at

updated at

【Rails】FullCalendarを使う

 2021-01-19 18.06.19.png

予定を保存するテーブルとモデルを作成

例として、seminarsテーブルとモデルを作ります。

$ rails g model seminar title starts_at:datetime ends_at:datetime
$ rails db:migrate

予定を管理するコントローラーとルーティングを作成

$ rails g controller seminars index
app/controllers/seminars_controller.rb
class SeminarsController < ApplicationController
  def index
    @seminars = Seminar.all
  end
end
config.routes.rb
resources :seminars, only: [:index]

予定のダミーデータを投入

$ rails c
2.6.3 :001 > Seminar.create(title: 'サンプルセミナー', starts_at: Time.zone.now, ends_at: Time.zone.now)

Gemを追加

Gemfile
gem 'jquery-rails', '4.3.3'
gem 'fullcalendar-rails'
gem 'momentjs-rails'
$ bundle install
app/assets/javascript/application.js
//= require jquery
//= require moment
//= require fullcalendar

カレンダーを表示するスクリプトを記述

app/assets/javascript/application.js
$(function () {
    $(document).on('turbolinks:load', function () {
        function eventCalendar() {
            return $('#calendar').fullCalendar({});
        };
        function clearCalendar() {
            $('#calendar').html('');
        };
        $(document).on('turbolinks:load', function () {
          eventCalendar();
        });
        $(document).on('turbolinks:before-cache', clearCalendar);
    });
});

CSSの設定

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

カレンダーの表示領域を作成

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

これで空のカレンダーが表示されます。
 2021-01-19 16.31.12.png

予定を表示

$ touch app/views/seminars/index.json.jbuilder
app/views/seminars/index.json.jbuilder
json.array!(@seminars) do |seminar|
  json.extract! seminar, :id, :title
  json.start seminar.starts_at
  json.end seminar.ends_at
end

↑の記述で/seminars.jsonにアクセスした時に以下のデータが返ってくるようになる。

[
   {
      "id":1,
      "title":"サンプルセミナー",
      "start":"2021-01-19T07:57:23.329Z",
      "end":"2021-01-19T07:57:23.329Z"
   },
   {
      "id":2,
      "title":"ホゲホゲセミナー",
      "start":"2021-01-19T07:57:23.329Z",
      "end":"2021-01-19T07:57:23.329Z"
   },
...
]

最後にイベントを表示するスクリプトを追加して完成。

app/assets/javascript/application.js
$(function () {
    $(document).on('turbolinks:load', function () {
        function eventCalendar() {
            return $('#calendar').fullCalendar({});
        };
        function clearCalendar() {
            $('#calendar').html('');
        };
        $(document).on('turbolinks:load', function () {
          eventCalendar();
        });
        $(document).on('turbolinks:before-cache', clearCalendar);
        //以下を追加
        $('#calendar').fullCalendar({
          events: '/seminars.json'
        });
    });
});

 2021-01-19 18.06.19.png

オプション

FullCalendarの日本語化やオプションいろいろ | Fire Sign Blog

ajaxでイベントを登録

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
8