fullcalendar日历使用vue3

在Vue 3中使用FullCalendar日历，你可以按照以下步骤进行操作：

1. 首先，安装FullCalendar和相关依赖：

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

2. 在Vue组件中引入FullCalendar：

import { createApp } from 'vue';
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';

const app = createApp(...);

app.use(FullCalendar);
app.use(dayGridPlugin);
app.use(timeGridPlugin);

app.mount('#app');

3. 在Vue组件中使用FullCalendar：

<template>
  <FullCalendar :options="calendarOptions" />
</template>

<script>
export default {
  data() {
    return {
      calendarOptions: {
        // 设置日历的配置选项
        initialView: 'dayGridMonth', // 初始视图为月份视图
        events: [
          // 设置日历事件
          { title: '事件1', start: '2022-01-01' },
          { title: '事件2', start: '2022-01-05', end: '2022-01-07' },
        ],
      },
    };
  },
};
</script>

通过上述步骤，你就可以在Vue 3中使用FullCalendar日历插件了。你可以根据FullCalendar的文档进一步了解其它配置选项和功能。希望对你有帮助！