# Initialize with Script Tags (ESM)

> FullCalendar v6 documentation, for an old release. Web version: https://legacy.fullcalendar.io/v6/initialize-browser-esm
>
> Latest version (v7): https://fullcalendar.io/docs/vanilla-js.md#via-script-tags-esm

Use FullCalendar as an ES module within a `<script>` tag, preferably with [import maps](https://www.honeybadger.io/blog/import-maps/). Example:

```html
<!DOCTYPE html>
<html>
  <head>
    <script type='importmap'>
      {
        "imports": {
          "@fullcalendar/core": "https://cdn.skypack.dev/@fullcalendar/core@6.1.21",
          "@fullcalendar/daygrid": "https://cdn.skypack.dev/@fullcalendar/daygrid@6.1.21"
        }
      }
    </script>
    <script type='module'>
      import { Calendar } from '@fullcalendar/core'
      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>
```
