## 实现效果 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5a30a29d78c2436098a4a867fea78de4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgZGVrdXl1:q75.awebp?rk3s=f64ab15b&x-expires=1775435350&x-signature=J7VAxiPBwOoPZJCqO3HE0SdRo5A%3D) ## 安装Fullcalendar相关插件 ```bash npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/list @fullcalendar/interaction --save ``` * 代码中使用到了时间转换和element-plus，安装dayjs和element-plus ```bash npm install element-plus @element-plus/icons-vue dayjs ``` * 样式sass ```bash npm install sass sass-loader ``` ## **实现代码** **注意：月份中想要横向拖拽几天日期，配置项属性中必须allDaySlot为true，默认为true。同时，周页面中这个日期是全天才可以横向拖拽几天日期** ```javascript ``` * 弹窗组件calendarDetailDialog.vue代码如下： ```javascript ``` ## 源码链接 [日程安排表源码](https://github.com/dekuyu/vue3-FullCalendar-Element-plus)

{{ '任务详情' }}