LoginSignup
36
37

【Rails】 5分でFullCalendar実装する方法

Last updated at Posted at 2020-01-26

はじめに

Railsアプリケーションは爆速で開発できるところがメリットですので、開発スピードに着目して記事を書きました。
5分でFullCalendarを実装するために、vim だけでも書けるようにファイルパスを全て記載しましたので、
vimを使ってパスをコピー&ペーストして、ファイル内のコードを変更することができます。

プロトタイプを作る時などにスピード重視で作る事は開発にとって重要な事だと思いますので、ぜひご活用ください。

やること

scaffoldで作成したEventモデルにFullCalendarライブラリを適用する。
イメージは下図のような感じになります。

image.png

コマンド

Rails のバージョンは5.2.4.2を指定しました。
また、scaffold で Eventモデルを作成しています。

# Rails アプリケーション作成
$ rails _5.2.4.2_ new five_min_fullcalendar
$ cd five_min_fullcalendar

# scaffold で Event モデルを作成
$ rails g scaffold event title:string body:string start_date:datetime end_date:datetime
$ rails db:migrate RAILS_ENV=development

GemFile

GemFile へ3つのgemを追加してbundle install

GemFile
gem 'jquery-rails'
gem 'fullcalendar-rails'
gem 'momentjs-rails'
$ bundle install

CSS

fullcalendar の部分を追加。

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

JavaScript

丸々コピーして、javascripts/application.jsへ貼り付けをしてください。

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,
                //イベントの時間表示を24時間に
                timeFormat: "HH:mm",
                //イベントの色を変える
                eventColor: '#87cefa',
                //イベントの文字色を変える
                eventTextColor: '#000000',
                eventRender: function(event, element) {
                    element.css("font-size", "0.8em");
                    element.css("padding", "5px");
                }
            });
        }
    });
});

JSON File

JSONファイルを作成して、FullCalendarのライブラリへそのJSONファイルを渡すことで、カレンダーを表示することができます。

app/views/events/index.json.jbuilder
json.array!(@events) do |event|
  json.extract! event, :id, :title, :body
  json.start event.start_date
  json.end event.end_date
  json.url event_url(event, format: :html)
end

HTML

id が calendar の div 要素を追加すると、ここに fullCalendarが表示されます。

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

turbolinks対策で必要です。

app/views/layouts/application.html.erb
  <!-- body タグに data-turbolinks 属性を追加 -->
  <body data-turbolinks="false">
    <%= yield %>
  </body>

開発環境で表示してみる

$ rails s

次のURLへアクセス。localhost:3000/events

New Eventをクリックして、イベントを作成。

すると下記の画像のように表示されました。

image.png

以上です。

まとめ

ものすごいライブラリと出会ってしまうとすぐに開発ができてしまうため、自分が天才になったのではないかと錯覚してしまいます。
あくまでライブラリの力だと思って日々精進しないといけませんね。

参考

36
37
1

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
  3. You can use dark theme
What you can do with signing up
36
37