ImportMap

Calendar

Importmap (in the head tag)

<script type="importmap">
{
    "imports": {
        "app": "/assets/app-809bf5e9f028dcd31efbedebe5e07988.js",
        "/assets/bootstrap.js": "/assets/bootstrap-c423b8bbc1f9cae218c105ca8ca9f767.js",
        "@symfony/stimulus-bundle": "/assets/@symfony/stimulus-bundle/loader-e1ee9ace0562f2e6a52301e4ccc8627d.js",
        "/assets/@symfony/stimulus-bundle/controllers.js": "/assets/@symfony/stimulus-bundle/controllers-abf606f3085d4a46150023eb97dbf33b.js",
        "/assets/controllers/hello_controller.js": "/assets/controllers/hello_controller-c19dd529e97e8ef33363253ca96d13fe.js",
        "/assets/controllers/api_controller.js": "/assets/controllers/api_controller-192ad26be8b939ca8ca28b3dad1fa53f.js",
        "@hotwired/stimulus": "https://cdn.jsdelivr.net/npm/@hotwired/stimulus@3.2.2/+esm",
        "@fullcalendar/daygrid": "https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.9/+esm",
        "@fullcalendar/interaction": "https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@6.1.9/+esm",
        "@fullcalendar/core": "https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.9/+esm",
        "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/+esm"
    }
}
</script>
<!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support -->
<script async src="https://ga.jspm.io/npm:es-module-shims@1.7.2/dist/es-module-shims.js"></script>
<script type="module">import 'app';</script>

Javascript

<script  type="module">
    import { Calendar } from '@fullcalendar/core'
    import interactionPlugin from '@fullcalendar/interaction'
    import dayGridPlugin from '@fullcalendar/daygrid'
    // //
    const calendarEl = document.getElementById('calendar')
    const calendar = new Calendar(calendarEl, {
        plugins: [
            interactionPlugin,
            dayGridPlugin
        ],
        initialView: 'dayGridMonth',
        editable: false,
        events: [
            { title: 'Meeting', start: new Date() },
            { title: 'Another Meeting', start: new Date() }
        ]
    })

    calendar.render()

</script>