Google APIを使って、カスタマイズ可能なGoogleカレンダーをWordPressに埋め込む方法

<script src="<?php echo esc_url(get_template_directory_uri()); ?>/dist/js/fullcalendar/index.global.min.js"></script>
<script src="<?php echo esc_url(get_template_directory_uri()); ?>/dist/js/fullcalendar/google-calendar/index.global.min.js"></script>

npm install fullcalendar
npm install @fullcalendar/google-calendar @fullcalendar/daygrid

// Googleカレンダーを読み込む========================
// GoogleカレンダーのAPIを使用して、カレンダーのイベントを取得する
// <div id="calendar"></div>にカレンダーを表示する

document.addEventListener('DOMContentLoaded', function() {
	const calendarEl = document.getElementById('calendar');

	const calendar = new FullCalendar.Calendar(calendarEl, {
		initialView: 'dayGridMonth',
		googleCalendarApiKey: '',//Google APIキーを入れる
		events: {
			googleCalendarId: ''//GoogleカレンダーのIDを入れる
		},
	});

	calendar.render();
});

// Googleカレンダーを読み込む========================
// GoogleカレンダーのAPIを使用して、カレンダーのイベントを取得する
// <div id="calendar"></div>にカレンダーを表示する

import { Calendar } from "@fullcalendar/core";
import dayGridPlugin from "@fullcalendar/daygrid";
import googleCalendarPlugin from "@fullcalendar/google-calendar";

document.addEventListener("DOMContentLoaded", function () {
  const calendarEl = document.getElementById("calendar");

  if (calendarEl) {
    let calendar = new Calendar(calendarEl, {
      plugins: [dayGridPlugin, googleCalendarPlugin],

		//Googleカレンダー連携
		googleCalendarApiKey: '',//Google APIキーを入れる
		events: {
			googleCalendarId: ''//GoogleカレンダーのIDを入れる
		},
	});

    calendar.render();
  }
});

<div id="calendar"></div>

document.addEventListener("DOMContentLoaded", function () {
  const calendarEl = document.getElementById("calendar");

  if (calendarEl) {
    let calendar = new Calendar(calendarEl, {
      plugins: [dayGridPlugin, googleCalendarPlugin],
      locale: "ja", //日本語表記
      buttonText: {
        //各ボタンなどの日本語表記
        prev: "<",
        next: ">",
        today: "今日",
        month: "月",
        week: "週",
        day: "日",
        list: "一覧",
      },

      headerToolbar: {
        //各ボタンなどの配置
        left: "title",
        right: "prev,next today",
      },

      dayCellContent: function (arg) {
        return arg.date.getDate(); // カレンダーから日の表記を消す
      },

      contentHeight: "auto", // カレンダーの高さ
      initialView: "dayGridMonth", //月表示

		//Googleカレンダー連携
		googleCalendarApiKey: '',//Google APIキーを入れる
		events: {
			googleCalendarId: ''//GoogleカレンダーのIDを入れる
		},
    });

    calendar.render();
  }
});

/*
Googleカレンダー（APIで出力したもの）
*/
#calendar {
  font-size: 1.15rem;
  font-family: var(--font-honbun);
  // イベントの色・文字を変更---------
  // 全日イベント
  .fc-h-event {
    background-color: var(--color-main);
    border-color: var(--color-main);
    font-weight: 600;
  }
  // 時間指定イベント
  .fc-daygrid-event-dot {
    border-color: var(--color-main);
  }

  // ナビゲーションボタンの色を変更
  .fc-button-primary {
    background-color: var(--color-main);
    border-color: var(--color-main);
  }

  // 今日の日付の色を変更
  .fc-daygrid-day.fc-day-today {
    background-color: var(--color-main-light02);
  }

  // イベントの改行を許可
  .fc-daygrid-dot-event {
    flex-wrap: wrap;
  }
  .fc-event-title {
    white-space: normal;
  }
}