はじめに

Rails アプリケーションにて、 FullCalendar 動的にイベントの項目・色を変える方法について説明します。
scaffold で Eventモデルを作成しているため、最低限の作業量でカレンダーに機能を追加する方法を実現しています。

関連リンク

関連リンクを下記に載せておくので、必要であれば参考にしてください。。

【Rails】 5分でFullCalendar実装する方法
- https://qiita.com/syukan3/items/68280ce4ff45aa336363

前提条件

FullCalendarをアプリケーションに実装済みであること。

今回はRailsアプリケーションで実装しています。上記の記事を参考にしてみてください。
Railsを使ったことがない人でも簡単に実装することができますので、この機会にRuby と Railsをインストールして使ってみてください。
※Rails アプリケーション以外でも実装する事ができます。

実装

JSON File

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

このとき、json.jbuilder の中で分岐する式を書いて項目・色を指定することで、動的に項目を変更することができます。

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)

  # json.color
  if event.start_date > Time.now
    json.color "#ff0000"
  else
    json.color ""
  end
end

まとめ

カレンダーのアプリケーションを作成することになって、そこまで得意ではない Javascript の練習になるなーと思っていましたが、
FullCalendarという強力すぎるライブラリを見つけてしまったため、簡単に実装できてしまいました。
Javascript のスキルアップについては別の機会にでもやろうと思います。

参考

FullCalendar 公式ドキュメント
- https://fullcalendar.io/