【FullCalendar】でGoogleカレンダーを埋め込み表示して装飾する

<div id="calendar" class="calendar"></div>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/google-calendar@6.1.11/index.global.min.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
  googleCalendarApiKey: "GoogleカレンダーのAPIキー",
  events: {
      googleCalendarId:
        "GoogleカレンダーID",
  },
  initialView: "dayGridMonth",
  locale: "ja",
  editable: false,
  headerToolbar: {
    right: "prev,next" // 前後の月のナビを表示
  },
  showNonCurrentDates: false, // 前後の月の日にちを非表示にする
  firstDay: 1, // 月曜始まり
  contentHeight: "auto",
  dayCellContent: function (e) {
    e.dayNumberText = e.dayNumberText.replace("日", "");
    return e.dayNumberText;
  },
  eventTimeFormat: { hour: "numeric", minute: "2-digit" },
  eventClick: function (info) {
    info.jsEvent.preventDefault();
  },
  eventDidMount: (e) => {
    let message = e.event.title;
    if (e.event.allDay === false) {
      const start = formatTime(e.event.start);
      const end = formatTime(e.event.end);
      message = start + "-" + end + " " + message;
    }
    if (e.event.extendedProps.description !== undefined) {
      let detail = e.event.extendedProps.description;
      detail = detail.replace('<a ', '<a target="_blank" ')
      message = message + '<div class="description">' + detail + '</div>';
    }
    tippy(e.el, {
      content: message,
      interactive: true,
      allowHTML: true,
    });
  }
});
calendar.render();

function formatTime(datetime) {
  const dateObj = new Date(datetime);

  const hours = dateObj.getHours();
  const minutes = dateObj.getMinutes();

  const formattedTime = `${hours}:${minutes.toString().padStart(2, "0")}`;
  return formattedTime;
}

</script>

<style>
  /* カレンダー全体の背景色 */
  .fc {
    background-color: #fff;
  }
  /* カレンダー上部に表示する前月と翌月のボタン */
  .fc .fc-button-primary {
    background-color: #fff;
    border: 1px solid #d8d8d8;
    color: #000;
  }
  /* ツールチップ */
  .tippy-box {
    background-color: #fff;
    border: 1px solid #000;
  }
  .tippy-content {
    color: #000;
  }
  .tippy-content a {
    color: #007bff;
  }

  /* カレンダーに表示するイベント */
  .fc-event-title,
  .fc-event-time {
    color: #005f00;
  }
  .fc-event {
    background-color: #d4edda;
  }
</style>