背景
有一些应用系统或应用功能,如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件,但功能比较简单,用来做数据展现勉强可用。但如果需要进行复杂的数据展示,以及互动操作如通过点击添加事件,则需要做大量的二次开发。
FullCalendar是一款备受欢迎的开源日历组件,以其强大的功能而著称。其基础功能不仅免费且开源,为开发者提供了极大的便利,仅有少量高级功能需要收费。然而,尽管该组件功能卓越,其文档却相对简洁,导致在集成过程中需要开发者自行摸索与探索,这无疑增加了不少学习和验证的时间成本。
为此,本专栏通过日程管理系统的真实案例,手把手带你了解该组件的属性和功能,通过需求导向的方式,详细阐述FullCalendar组件的集成思路和实用解决方案。
在介绍过程中,我们将重点关注集成要点和注意事项,力求帮助开发者在集成过程中少走弯路,提供有效的避坑指南,从而提升开发效率,更好地利用这款优秀的日历组件。
官网:https://fullcalendar.io/
环境Vue3+Element Plus+FullCalendar 6.1.11。
使用
配置周次
前面我们配置了属性weekNumbers,设置为true后开启了周次显示功能。
默认的W+周次数字的模式虽然简明,但看上去像是中文日历中遗留了一个非汉化的元素,可以进一步通过配置解决,如下:
// 开启周次显示
weekNumbers: true,
// 显示周次文本
weekText: '周',
W被替换为了我们设置的“周”,效果如下:
这样看上去还是有点别扭,不符合中文习惯,颠倒一下顺序,如22周,或第22周更符合国人习惯。
通过使用回调方法来重写展现解决,如下所示:
// 设置周次显示
weekNumberContent: this.weekNumberContent
// 设置周次显示
weekNumberContent(arg) {
return '第' + arg.num + '周'
}
效果如下:
开启当前时间线标识
一个小功能,配置nowIndicator为true,默认未开启。
// 显示当前时间线
nowIndicator: true,
在周视图和日视图中会用红线标识当前时间,可以算一个挺实用的功能吧。
设置工作时间
组件预置了设置工作时间功能,对应属性是businessHours,默认未开启。这个功能与我当前想实现的需求关系不大,但在某些应用场景下还是很有用的,因此也了解一下,放在这作为备忘。功能可以不用,但是得知道有。
该属性比较灵活,设置为true会开启,但默认是周一到周五,9:00-17:00,即标准的朝九晚五。
businessHours:true
也可以设置为对象,以下是设置周一到周五,8:00-17:30为工作时间。
businessHours: {
daysOfWeek: [1, 2, 3, 4, 5],
startTime: '8:00',
endTime: '17:30'
}
还可以设置为数组,进行任意组合,例如常见的将工作日(周一到周五)和节假日(周六周日)分别设置不同的时间段。
需要注意的是,经测试,工作时间只是用白色背景标识,非工作时间用灰色背景标识,非工作时间依旧可以选中,添加事件等操作,即只影响显示,不影响功能。
显示事件起止时间
前面我们提过设置属性displayEventTime,可以控制月视图中是否显示事件开始时间,今天来详细说说关于事件起止时间那些配置。
首先得明确,对于事件,组件有个概念是全天与非全天,通过allDay属性来控制。
对于全天事件,会统一放到视图(周视图与日视图)顶部区域,非全天事件,才会显示具体的起止时间。
对于月视图,全天事件,会以在日单元格中顶部显示,且以蓝色背景标识,与非全天事件区分。
默认情况下,月视图会显示开始时间,周视图和日视图会显示起止时间,各个视图支持单独设置属性,如果把属性设置在根路径下,则会对所有视图生效。
// 显示事件开始时间
displayEventTime: true,
// 显示事件结束时间
displayEventEnd: true,
效果如下,月视图也显示非全天事件的起止时间了。