using the component through a CDN about fullcalendar-vue HOT 8 CLOSED

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<link href='https://unpkg.com/@fullcalendar/[email protected]/main.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/[email protected]/main.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/[email protected]/main.css' rel='stylesheet' />

<script src='https://unpkg.com/@fullcalendar/[email protected]/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/[email protected]/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/[email protected]/main.js'></script>
<script src='https://unpkg.com/@fullcalendar/[email protected]/main.js'></script>
<script src="https://unpkg.com/@fullcalendar/[email protected]/main.umd.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {

        new Vue({
            el: '#vue-instance',

            data: function() {
                return {
                    plugins: [
                        window.FullCalendarDayGrid.default,
                        window.FullCalendarTimeGrid.default,
                        window.FullCalendarInteraction.default,
                    ],

                    events: [
                        // initial event data
                        {
                            title: "Event Now",
                            start: new Date()
                        }
                    ]
                }
            },

            methods: {
                handleDateClick(arg) {
                    if (confirm("Would you like to add an event to " + arg.dateStr + " ?")) {
                        this.events.push({
                            // add new event data
                            title: "New Event",
                            start: arg.date,
                            allDay: arg.allDay
                        });
                    }
                }
            },

            template: `
            <div>
                <FullCalendar
                    class="app-calendar"
                    defaultView="dayGridMonth"
                    ref="fullCalendar"
                    :header="{
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                    }"
                    :plugins="plugins"
                    :weekends="true"
                    :events="events"
                    @dateClick="handleDateClick"
                    />
            </div>
        `,
        });

    });
</script>