fullcalendar vue3 ts

FullCalendar是一个功能强大的日历插件，可以用于在网页上展示和管理事件。它提供了丰富的功能，包括日历视图、事件拖拽、事件点击、事件编辑等。

FullCalendar可以与Vue.js进行集成，通过Vue组件的方式来使用。在Vue 3中，可以使用TypeScript来编写FullCalendar的代码，以增加类型检查和代码提示的支持。

要在Vue 3中使用FullCalendar和TypeScript，首先需要安装相关的依赖包。可以通过以下命令来安装：

npm install @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction

安装完成后，可以在Vue组件中引入FullCalendar并使用它。以下是一个简单的示例：

<template>
  <FullCalendar :plugins="calendarPlugins" :initialView="'dayGridMonth'" :events="calendarEvents" />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

export default defineComponent({
  components: {
    FullCalendar,
  },
  data() {
    return {
      calendarPlugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
      calendarEvents: [
        { title: 'Event 1', start: '2022-01-01' },
        { title: 'Event 2', start: '2022-01-05' },
      ],
    };
  },
});
</script>

在上面的示例中，我们首先引入了FullCalendar的Vue组件以及相关的插件。然后，在Vue组件的data选项中定义了要展示的事件数据。最后，在模板中使用`<FullCalendar>`组件，并传入相应的属性和事件数据。

这样就可以在Vue 3中使用FullCalendar和TypeScript来创建一个日历应用了。