vue3+ts中使用fullcalendar

在Vue 3和TypeScript中使用FullCalendar可以通过以下步骤进行：

1. 安装FullCalendar：使用npm或yarn安装FullCalendar库。

   npm install @fullcalendar/vue @fullcalendar/daygrid

2. 导入FullCalendar：在需要使用FullCalendar的组件中导入相关的FullCalendar组件和样式。

   import { createApp } from 'vue';
   import FullCalendar from '@fullcalendar/vue';
   import dayGridPlugin from '@fullcalendar/daygrid';
   import '@fullcalendar/daygrid/main.css';

   const app = createApp(...);
   app.use(FullCalendar);
   app.mount(...);

3. 创建FullCalendar组件：在Vue组件中创建FullCalendar组件，并设置相关的配置和事件。

   <template>
     <FullCalendar :options="calendarOptions" @eventClick="handleEventClick" />
   </template>

   <script>
   export default {
     data() {
       return {
         calendarOptions: {
           plugins: [dayGridPlugin],
           initialView: 'dayGridMonth',
           events: [
             { title: 'Event 1', start: '2022-01-01' },
             { title: 'Event 2', start: '2022-01-05' },
           ],
         },
       };
     },
     methods: {
       handleEventClick(info) {
         console.log('Event clicked:', info.event.title);
       },
     },
   };
   </script>

4. 配置FullCalendar：根据需要配置FullCalendar的选项，例如设置初始视图、事件等。

这样就可以在Vue 3和TypeScript中使用FullCalendar了。你可以根据FullCalendar的文档进一步了解其更多功能和配置选项。