Fullcalendar+vue3 实现日程表

实现效果图

掘金文章链接 此处贴不上大的gif图片 跳转链接

框架：vue3+FullcalendaV6版本 官方地址

插件安装

    npm i @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list @fullcalendar/interaction

其他工具依赖 dayjs

    npm i dayjs

插件引入

  import {
    Calendar } from '@fullcalendar/core';
  import dayGridPlugin from '@fullcalendar/daygrid';
  import timeGridPlugin from '@fullcalendar/timegrid';
  import listPlugin from '@fullcalendar/list';
  import interactionPlugin from '@fullcalendar/interaction';
  import dayjs from 'dayjs';

完整代码（直接复制就能看到效果）

<template>
  <div class="container">
    <a-card class="general-card">
      <div class="top-button">
        <a-space>
          <a-typography-title :heading="6">
            {
   {
    currentData }}
          </a-typography-title>
          <a-space>
            <a-button
              @click="
                Tcalendar.prev();
                dayTime();
              "
              ><icon-left
            /></a-button>
            <a-button
              @click="
                Tcalendar.next();
                dayTime();
              "
            >
              <icon-right
            /></a-button>
            <a-button
              type="primary"
              @click="
                Tcalendar.today();
                dayTime();
              "
              >今天</a-button
            >
          </a-space>
        </a-space>
        <a-radio-group v-model="type" type="button" @change="changeType">
          <a-radio value="dayGridMonth">月</a-radio>
          <a-radio value="timeGridWeek">周</a-radio>
          <a-radio value="timeGridDay">天</a-radio>
          <a-radio value="listWeek">列</a-radio>
        </a-radio-group>
      </div>
      <div ref="fullcalendar" class="card"> </div>
    </a-card>
    <!-- 详情抽屉 -->
    <a-drawer
      :width="480"
      :visible="visible"
      @ok="handleOk"
      @cancel="visible = false"
      title="面试详情"
    >
      <template #title> </template>
      <div
        >You can customize modal body text by the current situation. This modal
        will be closed immediately once you press the OK button.
      </div>
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
  import {
    ref, nextTick, onMounted } from 'vue';
  import {
    Calendar } from '@fullcalendar/core';
  import dayGridPlugin from '@fullcalendar/daygrid';
  import timeGridPlugin from '@fullcalendar/timegrid';
  import listPlugin from '@fullcalendar/list';
  import interactionPlugin from '@fullcalendar/interaction';
  import dayjs from 'dayjs';

  const state =