FullCalendarを使ってGoogle CalendarをNext.js製Webアプリにオシャレに組み込む

Next.js jackweb アドベントカレンダー2024

2024-12-06

こんにちは！マロンです。突然ですが、「Webアプリにカレンダーを組み込みたいこと」ありますよね？でも、「ただGoogle Calendarを組み込むだけだとデザイン的にちょっと寂しい… 😢」「カレンダーの表示形式をカスタマイズしたい…🤔」なんてこともあると思います。そこで今回は、Google Calendarなどから情報を持ってきて、カスタマイズしたカレンダーを表示することのできるライブラリ、FullCalendarを紹介したいと思います。

1. FullCalendarとは

FullCalendarではWebアプリにお手軽にカレンダーを組み込むためのJavaScriptライブラリです。カレンダーの表示形式を簡単にカスタマイズでき、Google Calendarなどの外部データソースから簡単に情報を取得することができます。React, Vue, Angularなどのライブラリ、フレームワーク上でも使用することができる優れものです。

今回はNext.jsで作成したWebアプリにGoogle Calendarと連携してFullCalendarを組み込む例をご紹介したいと思います。

2. インストール

Next.jsのプロジェクトは作成済みという前提で話を進めていきます。

まずはライブラリをインストールしましょう。

npm install --save \
  @fullcalendar/core \
  @fullcalendar/react \
  @fullcalendar/daygrid

Google Calendarを使用する場合は追加で↓のインストールが必要です。

npm install @fullcalendar/google-calendar

3. 使ってみよう

3-1. Google Calendar ID, Google Calendar API Keyを取得する

FullCalendarでGoogle Calendarから取得した情報を表示するには、Google Calendar IDとGoogle Calendar API Keyの2つが必要です。Google Calendar IDは、

Google Calendarを開く
⚙マーク→ 設定の順に押す
表示したいマイカレンダーを選択する
“カレンダーの統合”までスクロールして表示されているカレンダーIDをメモする

の手順で取得することができます。Google Calendar API Keyは、

Google Cloud ConsoleでGoogle Calendar APIを有効化
遷移したページの先で認証情報 → 認証情報を作成 → APIキーを選択
しばらくするとポップアップでAPIキーが表示されるのでメモする

で取得できます。このあとにAPIキーを編集を押してアクセス制限をつけましょう。詳しく知りたい方は「Google Calendar API 取得」と検索すると先人たちの記事が色々出てきますので参考にしてみてください。

⚠️どちらも外部に漏らしたくない情報なので.envに記述し、.gitignoreでGitHubでPushされるのを防ぎましょう.

3-2. アプリケーションで表示する

準備も整ったところで早速FullCalendarを使っていきましょう。導入はめちゃくちゃ簡単です。

import dayGridPlugin from "@fullcalendar/daygrid";
import googleCalendarPlugin from "@fullcalendar/google-calendar";
import FullCalendar from "@fullcalendar/react";

export const Calendar: React.FC<Props> = () => {
  const googleCalendarApiKey = process.env.GOOGLE_CALENDAR_API_KEY;
  const googleCalendarId = process.env.GOOGLE_CALENDAR_ID;
  return (
    <>
      <div className={styles.container}>
        <FullCalendar
          plugins={[dayGridPlugin, googleCalendarPlugin]}
          googleCalendarApiKey={googleCalendarApiKey}
          events={{ googleCalendarId: googleCalendarId }}
          headerToolbar={{
            left: "prev",
            center: "title",
            right: "next",
          }}
          views={{
            dayGridMonth: {
              titleFormat: { month: "long" },
            },
          }}
        />
      </div>
    </>
  );
};

これだけです。GOOGLE_CALENDAR_API_KEYとGOOGLE_CALENDAR_ID には先程取得した、Google Calendar IDとGoogle Calendar API Keyを入れてください。すると↓のような感じになるはずです。

4. 見た目をカスタマイズする

FullCalendarはデフォルトだとさっぱり目のデザインです。場合によってはサイトの雰囲気に合わせたデザインにしたいということもあると思います。そんなときは、FullCalendarに使われているCSSを直接上書きすれば、見た目を変更することができます。例えばこんな感じ↓

import dayGridPlugin from "@fullcalendar/daygrid";
import googleCalendarPlugin from "@fullcalendar/google-calendar";
import FullCalendar from "@fullcalendar/react";
import styled from "styled-components";
import styles from "./index.module.scss";
type Props = {};

const CalendarWrapper = styled.div`
  .fc-icon-chevron-right::before {
    color: #ffc785;
  }
  .fc-icon-chevron-left::before {
    color: #ffc785;
  }
  .fc .fc-toolbar-title {
    font-size: 32px;
  }
  .fc-direction-ltr {
    background-color: #fff4e3;
    width: 100%;
  }
  .fc-scroller-harness {
    background-color: #fff4e3;
  }
  .fc-day-sat {
    color: blue;
  }
  .fc-day-sun {
    color: red;
  }
  .fc-day-sat .fc-col-header-cell-cushion {
    color: blue;
  }
  .fc-day-sun .fc-col-header-cell-cushion {
    color: red;
  }
  .fc-event {
    display: grid;
    justify-content: center;
  }
  .fc-daygrid-event-dot {
    display: none;
  }
  .fc-daygrid-dot-event .fc-event-title {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
  }
  .fc-time {
    font-size: 0.8rem;
  }
  .fc-title {
    font-size: 1rem;
  }
  .fc-daygrid-event-harness {
    white-space: nowrap;
    overflow: hidden;
  }
`;

export const Calendar: React.FC<Props> = () => {
  const googleCalendarApiKey = process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_API_KEY;
  const googleCalendarId = process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_ID;
  return (
    <CalendarWrapper>
      <div className={styles.container}>
        <FullCalendar
          plugins={[dayGridPlugin, googleCalendarPlugin]}
          googleCalendarApiKey={googleCalendarApiKey}
          events={{ googleCalendarId: googleCalendarId }}
          height={"auto"}
          eventTimeFormat={{
            hour: "2-digit",
            minute: "2-digit",
            hour12: false,
          }}
          headerToolbar={{
            left: "prev",
            center: "title",
            right: "next",
          }}
          views={{
            dayGridMonth: {
              titleFormat: { month: "long" },
            },
          }}
          eventContent={(eventInfo) => {
            const { start, end } = eventInfo.event;
            const startTime = start
              ? start.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false })
              : "";
            const endTime = end
              ? end.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false })
              : "";
            return (
              <>
                <div className="fc-time">
                  {startTime} - {endTime}
                </div>
                <div className="fc-title">{eventInfo.event.title}</div>
              </>
            );
          }}
        />
      </div>
    </CalendarWrapper>
  );
};