# Initialize with Script Tags (ESM)

<script>
  import { latestVersion } from '$docs-config';
</script>


Use FullCalendar as an ES module within a &lt;script&gt;
tag, preferably with [import maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap). Example:

```html
<!DOCTYPE html>
<html>
  <head>
    <script type="importmap">
      {
        "imports": {
          "preact": "https://cdn.jsdelivr.net/npm/preact@{preactVersion}/dist/preact.mjs",
          "preact/hooks": "https://cdn.jsdelivr.net/npm/preact@{preactVersion}/hooks/dist/hooks.mjs",
          "preact/jsx-runtime": "https://cdn.jsdelivr.net/npm/preact@{preactVersion}/jsx-runtime/dist/jsxRuntime.mjs",
          "preact/compat": "https://cdn.jsdelivr.net/npm/preact@{preactVersion}/compat/dist/compat.mjs",
          "preact/compat/client": "https://cdn.jsdelivr.net/npm/preact@{preactVersion}/compat/client.mjs",
          "temporal-polyfill/fns/ZonedDateTime": "https://cdn.jsdelivr.net/npm/temporal-polyfill@{temporalPolyfillVersion}/fns/ZonedDateTime.js",
          "temporal-polyfill/fns/PlainDateTime": "https://cdn.jsdelivr.net/npm/temporal-polyfill@{temporalPolyfillVersion}/fns/PlainDateTime.js",
          "temporal-polyfill/fns/Instant": "https://cdn.jsdelivr.net/npm/temporal-polyfill@{temporalPolyfillVersion}/fns/Instant.js",
          "@full-ui/headless-calendar": "https://cdn.jsdelivr.net/npm/@full-ui/headless-calendar@{latestVersion}/index.js",
          "fullcalendar": "https://cdn.jsdelivr.net/npm/fullcalendar@{latestVersion}/index.js",
          "fullcalendar/themes/classic": "https://cdn.jsdelivr.net/npm/fullcalendar@{latestVersion}/themes/classic.js",
          "fullcalendar/interaction": "https://cdn.jsdelivr.net/npm/fullcalendar@{latestVersion}/interaction.js",
          "fullcalendar/daygrid": "https://cdn.jsdelivr.net/npm/fullcalendar@{latestVersion}/daygrid.js",
          "fullcalendar/timegrid": "https://cdn.jsdelivr.net/npm/fullcalendar@{latestVersion}/timegrid.js",
          "fullcalendar/list": "https://cdn.jsdelivr.net/npm/fullcalendar@{latestVersion}/list.js"
        }
      }
    </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>
```
