Initialize with Script Tags (ESM)

Use FullCalendar as an ES module within a <script> tag, preferably with import maps. Example:

<!DOCTYPE html>
<html>
  <head>
    <script type="importmap">
      {
        "imports": {
          "fullcalendar": "https://cdn.jsdelivr.net/npm/fullcalendar@{latestReleases.v7}/+esm",
          "temporal-polyfill": "https://cdn.jsdelivr.net/npm/temporal-polyfill@0.3.0/+esm"
        }
      }
    </script>
    <script type="module">
      import { Calendar } from "fullcalendar";
      import dayGridPlugin from "fullcalendar/daygrid";

      document.addEventListener("DOMContentLoaded", function () {
        const calendarEl = document.getElementById("calendar");
        const calendar = new Calendar(calendarEl, {
          plugins: [dayGridPlugin],
          headerToolbar: {
            left: "prev,next today",
            center: "title",
            right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
          },
        });
        calendar.render();
      });
    </script>
  </head>
  <body>
    <div id="calendar"></div>
  </body>
</html>

More Advanced

See Also

Initialize with Script Tags (ESM)