FullCalendar日历组件集成实战（17）

背景

有一些应用系统或应用功能，如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件，但功能比较简单，用来做数据展现勉强可用。但如果需要进行复杂的数据展示，以及互动操作如通过点击添加事件，则需要做大量的二次开发。
FullCalendar是一款备受欢迎的开源日历组件，以其强大的功能而著称。其基础功能不仅免费且开源，为开发者提供了极大的便利，仅有少量高级功能需要收费。然而，尽管该组件功能卓越，其文档却相对简洁，导致在集成过程中需要开发者自行摸索与探索，这无疑增加了不少学习和验证的时间成本。
为此，本专栏通过日程管理系统的真实案例，手把手带你了解该组件的属性和功能，通过需求导向的方式，详细阐述FullCalendar组件的集成思路和实用解决方案。
在介绍过程中，我们将重点关注集成要点和注意事项，力求帮助开发者在集成过程中少走弯路，提供有效的避坑指南，从而提升开发效率，更好地利用这款优秀的日历组件。

官网：https://fullcalendar.io/

环境Vue3+Element Plus+FullCalendar 6.1.11。

使用

拖放日历组件外元素至日志组件内（一）

业务场景

先来说下需求。
我们通过日历组件来安排日程，主要是安排那些有相对明确的时间的事项。但实际还存在一些事项，比如临时的，刚想起或刚产生的，不紧急，甚至需要完成一些前置依赖。安排到哪个时间点尚不确定。
这种场景下，需要一个收集箱来暂存这些任务，用于提醒，防止遗忘而遗漏。
如上所述，将任务状态标记为“待安排”，并将其起止时间值为空。
安排计划时再根据实际情况把这些事项放到具体的计划中。

功能设计

对于上述需求，我们在当前日历组件之外，增加收集箱的功能，用于存放和显示“待安排”的任务，如下图所示：

这样用户不需要切换到别的菜单来新建待安排的事项，并且在安排计划时候也可以将待安排的事项一并考虑。
虽然用户可以在收集箱中的任务清单中点击某项任务，设置起止时间，通过刷新日历组件来显示，但是操作较繁琐。为了便于操作，我们来实现“拖放”操作，即将左侧收集箱中的任务，直接拖放到日历组件中，根据放置的位置自动设置起止时间，这样做更方便与直观。
即我们需要将一个FullCalendar日历组件外的元素，拖放到日历组件内部。

尝试方案

官网说明文档有相关描述，但是过于简略，需要摸索。
首先，需要配置属性，将拖放功能开关打开：

// 启用拖动外部元素放置到日历
droppable: true

然后，定义拖放结束的回调事件drop，注意不是前面用过的eventDrop，如下：

//外部元素拖放到日历中
drop: this.drop,

接下来，最关键的操作就是外部元素拖拽到日历组件内部了。
官网描述的使用draggable，说的很含糊，这个draggable到底指啥并不明确。
一开始，尝试使用自己熟悉的vuedraggable组件来实现拖拽功能，然后测试失败，drop回调事件触发不了，怀疑被vuedraggable自己截获和处理了。
然后，使用html5自身的draggable，同样发现无法触发回调事件。

应用系统

名称：遇见
地址：https://meet.popsoft.tech
说明：基于一二三应用开发平台和FullCalendar日历组件实现的面向个人的时间管理、任务管理系统，1分钟注册，完整功能，欢迎使用~