index.html

<html>

<head>
    <!-- Dependencies -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="evo-calendar.min.css">
    <link rel="stylesheet" href="evo-calendar.midnight-blue.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div id="calendar"></div>
    </div>
    <script src="script.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="evo-calendar.min.js"></script>
    <script type="module">
        import { celestialData } from './assets/celestial-events.js';
        $(document).ready(function () {
            $('#calendar').evoCalendar({
                theme: "Midnight Blue",
                calendarEvents: celestialData
            })
        })
    </script>
</body>

</html>