JSFiddle - React, Tailwind, and code Playground

by tacman1123

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset=utf-8>
        <meta name="description" content="MicroCalendar">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>

        <title>MicroCalendar</title>
        
                        <script type="importmap">
{
    "imports": {
        "@fullcalendar/daygrid": "https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/+esm",
        "@fullcalendar/interaction": "https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/+esm",
        "@fullcalendar/core": "https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/+esm"
    }
}
</script>

        
<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() }
        ]
    })

    calendar.render()

</script>
    </head>

    <body id="base">
       
            
    <h1>Calendar</h1>
    <div id="calendar">
        The calendar will go here.
    </div>

    </body>
</html>