fullcalendar插件在vue3项目中的应用

vue 版本3.2.45 fullcalendar及插件 版本6.1.7 样式使用的是tailwindcss，可使用内联样式，效果一样的

插件的安装引用

1.安装fullcalendar插件

必须安装的插件：

npm install @fullcalendar/core

npm install @fullcalendar/vue3

必须安装一个：

npm install @fullcalendar/daygrid

npm install @fullcalendar/multimonth

npm install @fullcalendar/timegrid

拖拽必须安装的插件：

npm install @fullcalendar/interaction

vue文件中引用

import FullCalendar from "@fullcalendar/vue3"

汉化时必须引入：

import locale from "@fullcalendar/core/locales/zh-cn"

拖拽时需引入

import interactionPlugin, { Draggable } from "@fullcalendar/interaction"

template端

<fullCalendar :option="calendarOptions" style="width:100%" ref="fullcalendarref" />

template端 需要拖动的div

<div
    class="h-[350px] space-y-2"
    id="eventListItems"
    ref="eventListItems"
>
    <div
        v-for="(item,index) in eventList"
        class="rounded p-1 text-white pl-2 eventListItems"
        :class="item.colorclass"
        :draggable="true"
        :key="index"
        :id="item.eventId"
    >
         <span :id="item.color">{
   {
    item.eventName }}</span>
    </div>
</div>

js代码

script setup中编写option具体参数意义已注释，也可以查看https://fullcalendar.io/docs#toc

const calendarOptions =