本文主要是介绍FullCalendar日历组件集成实战(14),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
背景
有一些应用系统或应用功能,如日程管理、任务管理需要使用到日历组件。虽然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天。
上面逻辑看上去不复杂,但是,混合以下两个因素就麻烦了。
一是任务的结束时间可能本来就是空的。
二是拖动可能未发生跨区域的情况。
例如,一个周一的8点开始的会议,未设置结束时间,拖放到了周二8点,这时候拿到的allDay属性为false,按照上面梳理逻辑,会自动计算结束时间后赋值,这么做,系统的自动化处理一定程度相当于“改变”了用户原本的设置。
为了规避这点,调整实现逻辑,当计划时长为空时,不设置其默认值,将结束时间依然留空。
这篇关于FullCalendar日历组件集成实战(14)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!