【Nuxt3】FullCalendarを使用してGoogleカレンダーを表示させる方法

FullCalendarは、Webアプリケーションでカレンダーを表示・操作するためのjsライブラリです。この記事では、FullCalendarにGoogleカレンダーを表示させる方法を説明します。

2023年06月03日

前提

Nuxt3プロジェクトが存在する
node v18.0.0

モジュールを入れる

PCの場合はカレンダー表示、スマホの時にはリスト表示で実装していくため、以下のモジュールを追加してください。

yarn add @fullcalendar/core @fullcalendar/daygrid @fullcalendar/google-calendar @fullcalendar/interaction @fullcalendar/list @fullcalendar/timegrid @fullcalendar/vue3

APIを有効にする

APIを有効にせず作業を進めても項目が表示されません。
403エラーが出る場合はここを疑いましょう！

Google Cloud Consoleにアクセスします。
ナビゲーションメニューから「APIとサービス」>「ライブラリ」に移動します。
ライブラリページで、「Google Calendar API」というキーワードで検索します。
検索結果から「Google Calendar API」を見つけ、その横にある「有効にする」ボタンをクリックします。
しばらくすると画面遷移し、APIの有効化が完了します。

ApiKeyを発行する

Google Cloud Consoleにアクセスします。

プロジェクトを選択。
※ プロジェクトがまだない場合は、新しいプロジェクトを作成してください。
メニューから「APIとサービス」>「認証情報」に移動します。
「認証情報を作成」ボタンをクリックします。
「APIキー」を選択します（自動生成）
生成後、APIKey付きのダイアログが出現するので、コピーしておいてください。
※ 必要に応じて、編集画面から名前など内容を変えてください

ちなみに、Firebase環境では自動生成されているAPIKeyを使用できます。

環境変数を設定

nuxt.config.tsから、プロジェクト内で使用できるように設定します。

runtimeConfig: {
  public: {
    apiKey: AIzaxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx, #設定
    ~~~
  }
}

実装

vuetify3 × nuxt3のプロジェクトで進めていきます。

コンポーネント部分

components/GoogleCalendar.vueを作成し、内容を以下の通りに実装します。

<template>
  <div id="calendar" ref="calendarRef"></div>
</template>

<script setup lang="ts">
import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'
import listPlugin from '@fullcalendar/list'
import interactionPlugin from '@fullcalendar/interaction'
import googleCalendarPlugin from '@fullcalendar/google-calendar'
import { useDisplay } from 'vuetify'

const calendarRef = ref<HTMLDivElement | null>(null)
const display = ref(useDisplay())

onMounted(() => {
  if (!calendarRef.value) return

  const { apiKey } = useRuntimeConfig().public
  const calendar = new Calendar(calendarRef.value, {
    locale: 'ja',
    plugins: [dayGridPlugin, listPlugin, interactionPlugin, googleCalendarPlugin],
    initialView: display.value.xs ? 'listMonth' : 'dayGridMonth',
    eventSources: [
      {
        googleCalendarApiKey: apiKey,
        googleCalendarId: '#Google Calendar からIDを取得'
      }
    ]
  })

  calendar.render()
})
</script>

ざっと書きましたが、ここから説明していきます。

プラグイン

Fullcalendarは拡張性が高く、いろいろなプラグインに対応しています。
今回入れているのは以下です。簡単に説明します。

dayGridPlugin

カレンダー表示をさせるためのプラグインです。
PC表示の場合に適用させます。

listPlugin

リスト表示をさせるためのプラグインです。
スマホもしくはタブレットサイズの場合に適用させます。

interactionPlugin

日付のクリック（dateClick）を検知するためのプラグインです。

Google Calendar IDを取得する

今回は日本の祝日を取得してみましょう。

Google Calendarにアクセスします
カレンダーリストの左側に表示されている、対象カレンダーのオーバーフローメニュー（縦に…のやつ）をクリックします。
ドロップダウンメニューから「設定」を選択します。
@group.calendar.google.comで終わる一連の文字列がIDとなります。

※ 日本の祝日はこのような表示となります

確認してみよう

IDをコピーし、eventSourcesに当てこんでいきます。

    ~~~
    eventSources: [
      {
        googleCalendarApiKey: apiKey,
        googleCalendarId: 'ja.japanese#holiday@group.v.calendar.google.com' #ここ
      }
    ]
    ~~~

GoogleCalendarコンポーネントを呼び出し、祝日が表示されていることを確認しましょう！

<template>
  <div>
    <v-container>
      <google-calendar />
    </v-container>
  </div>
</template>

こちらに動作環境があります。
https://fir-study-42747.web.app/calendar

【今回の作業ブランチ】
https://github.com/yutahhh/firebase-study/tree/feature/%239

お疲れ様でした。