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>
            <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/bare.min.css" rel="stylesheet">

        
                        <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>
<!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support -->
<script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"></script>
<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@hotwired/[email protected]/+esm">
<script type="module">import 'app';</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() },
            { title: 'Another Meeting', start: new Date() }
        ]
    })

    calendar.render()

</script>
    </head>

    <body id="base">
       
        <section>
            <h1>ImportMap</h1>

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

    <h3>Importmap (in the head tag)</h3>
   ...