jack
見学申し込み
トップページ>ブログ>ポスト
マロン

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

Next.jsjackwebアドベントカレンダー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は、

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

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

  1. Google Cloud ConsoleでGoogle Calendar APIを有効化
  2. 遷移したページの先で 認証情報 → 認証情報を作成 → APIキー を選択
  3. しばらくするとポップアップで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>
  );
};

今回は色々事情があってstyled-componentsを使っていますが、もっといい方法があると思います。

先ほどのコードだと

こんな風になります。

どこかで見たことありますね…😏？ そうです、これはjackの公式サイトで使われているカレンダーです！ jackの公式サイトでは、Google Calendarで管理しているサークルの活動スケジュールをFullCalendarを使って表示しています。見た目もjackカラーにカスタマイズしました。

まとめ

FullCalendarは、簡単にWebアプリケーションにカレンダーを組み込める便利なライブラリです！まだまだ紹介していない機能もいっぱいあるので気になった方はぜひ使ってみてください！

FullCalendar公式サイト

目次

おすすめ記事

jackロゴ©jack 2026
リンク
お問い合わせ
  • line
  • mail