fullcalendar

Unknown option 'googleCalendarApiKey'

I think I included Fullcalendar Bundle in the head. I'm using thymeleaf like this:

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>

And this is the problem html - 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>

I'm getting an error

Unknown option 'googleCalendarApiKey'

I also read the docs that they said no plugin required

What should I do?

I changed initialize way: Download zip and use CDN but not working either

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

    I add this script in the head. and I handled problem.