FullCalendar日历组件集成实战（14）-CSDN博客

背景

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

官网：https://fullcalendar.io/

环境Vue3+Element Plus+FullCalendar 6.1.11。

使用

全天与非全天区域拖动引发的结束时间清空问题（一）

需求背景

在本系列的前面文章里，我们实现了拖放事件来实现调用后端服务变更任务的起止时间功能，例如某个会议原本起止时间是8:00-9:00，可以通过拖放操作将其变更为9:30-10:30。对于只有开始时间，无结束时间的任务，也可以正常拖放和更新起止时间。

在实际使用过程中，会产生将事件在全天区域与非全天区域之间拖动的需求，业务场景如下：

通常，我们会制定一个粗略一些的周计划，将一些任务作为本周要完成的事项，但往往不会严格限定要在哪一天的哪个时间段来做。这时候我们就可以使用FullCalendar组件的全天区域的功能来达到目的。将这些任务，暂存和显示在顶部的全天区域内，在当天早晨进行任务安排的时候，再将其拖放到具体的时间段。
此外，还有一种场景，因为变动，原本已经安排了起止时间的任务无法按计划执行，且没有明确的新的计划，需要放回到“全天”这个池子里以便将来另行安排。

以上两个业务场景，涉及到周视图和日视图中的两个操作，将顶部的全天区域事件拖放到下面正常区域，以及将下面区域中的事件，拖放到顶部全天区域。

经测试，将事件在全天区域与非全天区域之间拖动，会导致结束时间被清空，这是FullCalendar组件内置的处理逻辑。同时，区域内部拖动，如周一的全天事件，拖放到周二，或周四的8点-9点的会议拖放到周五，结束时间不会清空。

解决方案

如何解决呢？
需要改造的是拖放结束事件回调，既然FullCalendar组件会将结束时间置为空，那我们就自行来设置一个结束时间。
添加个输出，确认下回调事件的参数数据：

 // 拖动结束
  eventDrop(arg) {
    console.log('1111111', arg.event.start, arg.event.end, arg.event.allDay)
    this.changeTime(arg)
  }

在两个区域内拖放，打印输出如下：

梳理逻辑如下：
通过allDay属性，可以确定拖放方向，若allDay为false，从全天到非全天，反之为从非全天到全天。
从全天到非全天，结束时间=开始时间+任务的计划时长。如计划时长也为空，计划时长默认设置为半小时。
从非全天到全天，结束时间=开始时间+1天。