FullCalendarでイベント名ごとに背景色を変えたい

Question

前提・実現したいこと

FullCalendarでgoogleCalendarを読み込んで、床屋さんの予約状況・定休日を表示しています。
その際、「予約不可」「定休日」「残りわずか」などを色分けして、ぱっと見でわかりやすくしたいと思いますが、イベントタイトルを判別して背景色を変更することは可能でしょうか。
イベント名を判別して個別にクラス名をつけたらいいのかと思い、調べて記述してみたんですが動作しません。
ご教授いただけると幸いです。

試してみたソースコード

eventRender: function (event, element) {
    element.addClass("fc-" + event.title.replace(/\s+/g, "_"));
}

現状の記述

<script src='/js/main.min.js'></script> <script src='/js/ja.js'></script> <script> document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { dayCellContent: function(e) { e.dayNumberText = e.dayNumberText.replace('日', ''); }, initialView: 'timeGridWeek', nowIndicator: true, headerToolbar: { left: 'prev,next', center: 'title', right: 'dayGridMonth,timeGridWeek' }, locale: 'ja', firstDay: 1, views: { timeGridWeek: { slotMinTime: '09:00:00', slotMaxTime: '20:00:00' } }, height: 'auto', navLinks: false, // can click day/week names to navigate views selectable: false, selectMirror: false, dayMaxEvents: true, // allow "more" link when too many events displayEventTime: true, // don't show the time column in list view slotLabelFormat: { hour: 'numeric', minute: '2-digit', omitZeroMinute: false, meridiem: 'short' }, googleCalendarApiKey: 'APIキー', events: 'カレンダーID', eventClick: function(arg) { // opens events in a popup window //window.open(arg.event.url, 'google-calendar-event', 'width=700,height=600'); arg.jsEvent.preventDefault() // don't navigate in main tab }, loading: function(bool) { document.getElementById('loading').style.display = bool ? 'block' : 'none'; }, eventRender: function (event, element) { element.addClass("fc-" + event.title.replace(/\s+/g, "_")); } }); calendar.render(); }); </script>

補足情報（FW/ツールのバージョンなど）

FullCalendarのバージョンはv5.6.0です。

Comments

[yhasegawa55]

Verは5ですか？4ですか？

[SNP]

v5を使っています。

Answer 1

eventDidMountで制御できます
ちょっとベタですが

document.addEventListener("DOMContentLoaded", function () {
  const calendarEl = document.getElementById("calendar");
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: "dayGridMonth",
    initialDate: "2021-05-08",
    events: [
      {
        title: "予約不可",
        start: "2021-05-08"
      }, {
        title: "定休日",
        start: "2021-05-09"
      }, {
        title: "残りわずか",
        start: "2021-05-10"
      }
    ],
    eventDidMount: function (info) {
      if (info.event._def.title=='予約不可') {
        info.el.style.background='red' ;
      }
      if (info.event._def.title=='定休日') {
        info.el.style.background='gray' ;
      }
      if (info.event._def.title=='残りわずか') {
        info.el.style.background='pink' ;
      }
    }
  });
  calendar.render();
});

Comments

[SNP]

ありがとうございます！
思い通りに実装できましたm(_ _)m