【Vue 3】で FullCalendar × Google Calendar

2021年6月20日

Google Calendar を表示したいけれどデフォルトのデザインだとあまり良くないので FullCalendar と組み合わせるとデザインを変えて Google Calendar の表示ができるという記事はいくつか紹介されていますが、 Vue3 でそれをやろうと思った際に少しうまくいかなかったのでそちらの内容についてです。

FullCalendar Vue

Vue 2 系で FullCalendar Vue に Google Calendar のイベントを表示する方法はこちらやこちらで紹介されていたりするので、それを参考に今回 Vue 3 のプロジェクトでも実装しようとしたところ FullCalendar Vue は Vue3 自体には対応しているので表示はできますが Google Calendar のイベントを表示することができませんでした。　（何か実装方法が悪かった可能性もゼロでは無いかもしれませんが。。。）

そこで方針変更して上記で紹介されている様な方法とは違う方法でイベントを表示する様にしました。

Google Calendar API で直でイベントを取得してレンダリング

他で紹介されている様に FullCalendar コンポーネントの options で googleCalendarApiKey などを指定して取ってくる方法がうまく動かなかったので Google Calendar API でイベントを直で取得してそれを event に直接突っ込む様にしました。

インストール

vue 3 系は fullcalendar/vue3 からインストールしてください。

npm install --save @fullcalendar/vue3 @fullcalendar/core

template

下記の様に options に様々な値を設定してそれに伴ってリアクティブにレンダリングされます。

<FullCalendar :options="calendarOptions" />

options とイベント取得

setup 内で例として下記の様に calendarOptions を指定します。

今回 onMounted の中でカレンダーイベントを取得する Googele Api を叩いてその結果の中身を取り出して calendarOptions の events の中に push していきます。

const calendarOptions = ref(null)   

 calendarOptions.value = {
        plugins: [
          dayGridPlugin
        ],
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: ''
        },
        events: [],
        editable: false,
        selectable: false,
        selectMirror: false,
        dayMaxEvents: true,
        weekends: true,
        locale: jaLocale
      }

onMounted(async () => {
 const calendar = await axios.get(https://www.googleapis.com/calendar/v3/calendars/{Calendar ID}/events?key={API key})

 for (const item of calendar.data.items) {
        if(item.start.dateTime) item.start.date = item.start.dateTime.split('T')[0]
        if(item.end.dateTime) item.start.date = item.end.dateTime.split('T')[0]
        if(!item.summary) item.summary = ''
        calendarOptions.value.events.push({ title: item.summary, start: item.start.date, end: item.end.date})
      }
      
    })

以上で Google Calendar のイベントを Full Calendar で表示することができました。