FullCalendar报Unknown option 'googleCalendarApiKey'错误求助

问题描述 #

已通过Thymeleaf在页面head中引入FullCalendar Bundle（v6.1.8），相关代码如下：

common.html（公共头部片段） #

<head th:fragment="scripts">
    <!-- Daum Postcode -->
    <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
    <script src="/js/daumPostcode.js"></script>

    <!-- fullcalendar -->
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/reset.css" />

    <!-- fontawesome -->
    <script src="https://kit.fontawesome.com/036eefd132.js" crossorigin="anonymous"></script>

    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

    <!-- Bootstrap: CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous" />
    <!-- Bootstrap: JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>

calendar.html（页面代码） #

<head th:replace="fragments/common :: scripts">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>calendar</title>
</head>

...

    <script>
      $(document).ready(function () {
        var calendarEl = $("#calendar")[0];
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: "dayGridMonth",
          googleCalendarApiKey: "myApiKey",
          events: {
            googleCalendarId: "ko.south_korea#holiday@group.v.calendar.google.com",
          },
        });
        calendar.render();
      });
    </script>

初始化时出现错误提示：Unknown option 'googleCalendarApiKey'，尝试过CDN和本地压缩包两种引入方式均未解决。

解决方案 #

FullCalendar 6.x版本中，googleCalendarApiKey不再是全局配置选项，需要将其移至events对象内部，与googleCalendarId同级。修改后的初始化代码如下：

$(document).ready(function () {
  var calendarEl = $("#calendar")[0];
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: "dayGridMonth",
    events: {
      googleCalendarApiKey: "myApiKey", // 移至events对象内
      googleCalendarId: "ko.south_korea#holiday@group.v.calendar.google.com",
    },
  });
  calendar.render();
});

FullCalendar从v6版本开始调整了Google日历集成的配置结构，将API密钥与事件源配置合并，以此避免全局选项的混乱。

内容的提问来源于stack exchange，提问作者강찬욱