経緯

カレンダーの表示切り替えり、予定によって色分け出来たらいいなと思い実装してみました。
環境はrails6,ruby3.1.5です。
jqueryを使う記事が多いですが使わずに実装しました。

完成イメージと本記事にて、できる事・できない事

完成イメージ分かりやすいように公式ドキュメントのdemo貼っておきます。

この記事で出来ること、出来ない事

出来る
- 予定によって色分け
- 月表示、週表示、日表示の切り替え
出来ない
- 表示されてる予定をドラッグアンドドロップで移動
- 詳しい解説（公式ドキュメントにほとんど書いています）

実装

それでは実装していきます。

前提

投稿用のMVCとしてPostを使用しています。
投稿機能は実装されている前提
indexページにカレンダーを表示させる。

カラムは以下を用意

予定開始用としてstart_time:datetime
予定終了用としてend_time:datetime
予定表示用としてtitle:string
予定の色用としてcolor:string

投稿機能の実装とカラムの追加は終えてる前提で進めていきます～

fullcaledarの導入

以下のコマンドをターミナル等で入力してください

ターミナル

yarn add @fullcalendar/core @fullcalendar/interaction @fullcalendar/daygrid @fullcalendar/timegrid

長いですが一発で打ち込んでください～

JSファイルの記述

app\javascript\packs\application.js

//※もともと書かれている記述は省略
//下記を追記
import 'calendar'

追記できたら次はカレンダー用のファイルを作成します。
ファイル名はcalendar.js
作成する階層は以下の通りです

app\javascript\calendar.js

import { Calendar } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';

document.addEventListener('turbolinks:load', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new Calendar(calendarEl, {
    plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
    locale: 'ja',
    timeZone: 'Asia/Tokyo',
    //ボタンの位置、種類とかの設定
    headerToolbar: {
      start: 'prev,next,today',
      center: 'title',
      end: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    buttonText: {
      today: '今日'
    },
    allDayText: '終日',
    //表示させる場所、本記事ではpostsのindexにあたるルーティング
    events:'/posts.json',

    // クリック時の処理
    eventClick: function(arg) {
    //クリックしたら詳細ページへ
      var eventUrl = '/posts/' + arg.event.id;
      window.location.href = eventUrl;
    },
    //色の表示について
    eventColor: function(arg) {
      var eventColor = arg.event.color;
      return eventColor;
    },
  });
    //カレンダー表示
  calendar.render();
});

公式ドキュメントにいろんな設定方法あるので是非参考にしてみてください。

コントローラーの記述

app\controllers\posts_controller.rb

def index
    #追記↓
    @events = Post.all #カレンダー表示用
    @events = current_user.posts #自分の予定のみを表示する場合
end

@posts = Post.all等々は他の機能との兼ね合いで既に利用していることがあると思うので、新しく投稿全部を取得できる変数を宣言しておいてください（この記事では@events = Post.all）

自分の予定のみを表示する場合は
@events = current_user.posts
※ gem deviseを導入している前提

viewに追記

対して難しいことはないです。

app\views\posts\index.html.erb

<div id='calendar'></div>

これによりカレンダーが表示されます。任意の場所に記述してください。

app\views\posts\new.html.erb

<%= form_for @post do |f| %>
<div class="field">
    <%= f.label :title,"予定名" %>
    <p><%= f.text_field :title, :size => 20 %></p>
    <%= f.label :color,"色選択" %>
    <p><%= f.color_field :color, :size => 20 %></p>
    <%= f.label :start_time,"始まり" %>
    <%= f.datetime_field :start_time %>
    <%= f.label :end_time,"終わり" %>
    <%= f.datetime_field :end_time %>
</div>
<%= f.submit "投稿" %>
<% end %>

あくまで参考程度に
色の選択はラジオボタンとかで実装した方がかっこいいかもですね。

jbuilder

railsがデータを送信してくれる的なやつです。
以下の階層に作成してください

app\views\posts\index.json.jbuilder

json.array!(@events) do |event|
  json.id event.id
  json.title event.title
  json.color event.color
  json.start event.start_time
  json.end event.end_time
end

実装は以上になります
お疲れ様でした。

参考

お世話になりました。

【rails】【fullcalendar】カレンダーの表示(月週日)切り替え、予定ごとに色を変える

経緯