Vue 3 引入 Fullcalendar JS版

<template>
  <div class="card" ref="cal"></div>
</template>

<script>
import { ref,defineComponent, onMounted} from 'vue';
import {Calendar} from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';

export default defineComponent({
  name:'myCalendar',
  setup(){
    const cal = ref(null);
    
    onMounted(()=>{
        const Tcalendar = new Calendar(cal.value, {
        plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
        initialView: 'dayGridMonth',
         headerToolbar: {
         left: 'prev,next today',
         center: 'title',
         right: 'dayGridMonth,timeGridWeek,listWeek'
             }
        });
        Tcalendar.render();
    })
    return {
        cal
    }
  }
})