FullCalendar with Vue で、イベントの日の日付数字に色をつける（例：日本の祝日）

前提

google calendar apiを利用してイベントを取得してFullCalendarによって作られたカレンダーに表示します。
今回は、日本の祝日を取得して休みの日の日付は赤にしたいな〜、なんて思います。

FullCalendar についての情報

VueComponent
https://fullcalendar.io/docs/vue

events from Google Calendar
https://fullcalendar.io/docs/google-calendar

google calendar api

FullCalendarでgoogle calendar APIを使うので、クライアント用のAPI keyを取得
（上記のevents from Google Calendar参考）

コンポーネントを書く

• 祝日の他にも予定が入っているカレンダーを取得したかったので、eventSourcesを使ってgoogle calendarから予定を取得します。

• 祝日は、公開されているカレンダーに「日本の祝日(カレンダーID:　[e-mail])」があるので、それを利用。

• 取得成功で、呼び出されるコールバックで、日にちが入っているDOMを読み込む
  参考：https://fullcalendar.io/docs/event-source-object

• DOMにはdataset.dateに年月日がセットされているので、コールバック関数で取得できる祝日の日付とつけあわせて、一致していたら、DOMにクラスを追加。

あとは、cssで見た目をセットすればよいんじゃないでしょうか？

ということで、実際のコード↓

calendar

<template>
  <FullCalendar
    default-view="dayGridMonth"
    :plugins="calendarPlugins"
    :googleCalendarApiKey="googleCalendarApiKey"
    :eventSources="eventSources"
  />
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import googleCalendarPlugin from '@fullcalendar/google-calendar';

export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarPlugins: [ 
        dayGridPlugin, googleCalendarPlugin
      ],
      googleCalendarApiKey: '取得したgoogle API keyを記載',
      eventSources: [
        {
          googleCalendarId: '[e-mail]',
          success:function(e) {
            let days = document.getElementsByClassName('fc-day-top');

            e.forEach(el => {
              for(let i=0; i<days.length; i++) {
                let day = days[i]
                if (el.start === day.dataset.date) {
                  day.classList.add('is_holiday')
                }
              }

            });
          }
        },
      ],
    }
  }
}

</script>
<style>
   @import '~/node_modules/@fullcalendar/core/main.css';
   @import '~/node_modules/@fullcalendar/daygrid/main.css';
</style>

あとがき

apiで取得したデータで祝日リストを作って、dayRendarにわたそうとか、いろいろこころみたのですが、thisの中身がVueのコンポーネントにならないとか、いろいろあって、かなり手間取った結果、かなりシンプルに落ち着いたかと。