【rails】fullcalendarの導入

本日は登録したタスクをカレンダーに表示していきます。

カレンダーはfullcalendarというgemを活用します。

本日のお品書き

• fullcalendarの導入
• fullcalendarを表示
• fullcalendarにタスクを表示

fullcalendarの導入

まずはGemfileの一番下に、以下の記述を追加します。

Gemfile
gem 'jquery-rails'
gem 'fullcalendar-rails'
gem 'momentjs-rails'

gemとはRuby on Railsで使用できるライブラリで、カレンダー機能やログインログアウト機能などが簡単に導入できます。

記述できたらbundle installでインストールします。

$bundle install

次にGemfileからturbolinksを削除します。

Gemfile
#下の記述を削除
gem 'turbolinks', '~> 5'

turbolinksはAjaxによるページ遷移を高速化するgemなのですが、こちらが入っているとfullcalendarがうまく動かないので削除することで対応します。

（削除せずにうまく動かす方法もあるようですが、今回はシンプルに削除します）

削除できたらGemfaileをアップデートします。

$bundle update

その後、application.jsからも該当部分を削除します。

application.jp
//= require turbolinks  # この行を削除

これでfullcalendarの導入準備は完了です。

fullcalendarを表示させる

まずはタスク一覧画面にカレンダーを表示させていきます。

記述するファイルはapp/assets/javascripts/application.jsです。

application.js

#省略

//= require jquery # 追加
//= require rails-ujs
//= require moment # 追加
//= require fullcalendar # 追加
//= require activestorage
//= require_tree .

$(function () {

  $('#calendar').fullCalendar({

  });

});

requireを追加するときは順番に注意してください。

既存のrequireの一番下に追加するのではなく、require_treeの上にjquery、moment、fullcalendarの順番で追記します。

また、functionを追加することで、タスク一覧画面に表示する準備ができました。

次にタスク一覧画面を修正します。ファイルはapp/views/tasks/index.html.erbです。

index.html.erb

#省略

<div id="calendar"></div>

はい、めっちゃシンプルですw一番下に一行追加するだけでカレンダーが表示できたかと思います。

fullcalendarにタスクを表示

それでは最後にカレンダーにタスクを表示させます。まずはjsonファイルを作成します。ファイルはapp/views/tasks/index.json.jbuilderです

index.json.jbuilder

json.array!(@tasks) do |task|
  json.title task.title
  json.start task.start_date
  json.end task.end_date
  json.url task_url(task)
end

jsonについてはことでは詳しく語りませんが、json形式でタスク情報をindexに返しています。task_url(task)の部分は、タスク個別ページのURLを返しています。

次にapplication.jsを修正します。

application.js

$(function () {

  $('#calendar').fullCalendar({
    events: '/tasks.json',
  });

});

events:〜の部分でjson形式で受け取ったタスク情報をカレンダーに表示します。

おつかれさまでした。これで登録したタスクがカレンダーに表示されるようになったと思います。また、タスクをクリックすれば、そのタスク個別ページにも遷移すると思います。

最後に

javascriptやajax、jsonついてはまだまだ勉強中です。今後は少しjavascriptに関する記事をあげて、自分のスキルも向上させたいと思います。

参考サイト

RailsでFullCalendarを使って予定を表示するまで - Qiita

Documentation | FullCalendar