FullCalendar日历组件集成系列11——颜色区分及解决新增事件重复问题

本文主要是介绍FullCalendar日历组件集成系列11——颜色区分及解决新增事件重复问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

通过颜色区分任务完成状态

对于日历中的事件,通过不同颜色来区分任务是否完成。

先前尝试过使用任务的优先级来控制事件显示不同的颜色,效果并不好,颜色多了比较花哨,既影响信息有效展现,也影响美观,如下图所示:

最终采用只使用背景色来区分,任务完成(包括已完成和已取消)两种状态显示为灰色背景,其他状态显示为醒目的蓝色背景,边框色与背景色一致,避免出现一个框影响美观,文字使用白色,最终效果图如下:
image.png
需要调整设计到两个地方,一是任务数据加载的时候,二是动态修改单条任务的时候。

首先实现一个公共方法,通过任务状态计算颜色,如下:

 // 计算事件颜色
calculateEventColor(status) {// 根据状态设置不同的颜色,默认蓝底白字let textColor = 'white'let backgroundColor = '#0d6efd'let borderColor = '#0d6efd'switch (status) {//已完成和已取消两种任务状态为灰底白字case 'COMPLETED':case 'CANCELED':backgroundColor = 'gray'borderColor = 'gray'break}return {backgroundColor: backgroundColor,borderColor: borderColor,textColor: textColor}
}

然后在任务数据转换为事件时调用,如下:

// 任务数据转换为事件对象
convertTaskToEvent(task) {// 计算全天事件属性值const allDay = this.calculateAllDay(task.startTime, task.endTime)// 根据状态设置不同的颜色const color = this.calculateEventColor(task.status)// 数据转换return {id: task.id,title: task.name,start: task.startTime,end: task.endTime,allDay: allDay,textColor: color.textColor,backgroundColor: color.backgroundColor,borderColor: color.borderColor,extendedProps: {status: task.status,plannedDuration: task.plannedDuration}}
}

还有就是动态修改单个任务的时候,需要通过setPro的API来实现,如下:

 // 修改任务
modifyTask(task) {const fullCalendar = this.$refs.fullCalendar.calendarconst event = fullCalendar.getEventById(task.id)if (task.startTime && task.status != 'PENDING') {// 开始时间有值,且状态不是待安排,更新任务信息event.setProp('title', task.name)event.setStart(task.startTime)event.setEnd(task.endTime)let allDay = this.calculateAllDay(task.startTime, task.endTime)event.setAllDay(allDay)event.setExtendedProp('status', task.status)event.setExtendedProp('plannedDuration', task.plannedDuration)// 根据状态设置不同的颜色const color = this.calculateEventColor(task.status)event.setProp('textColor', color.textColor)event.setProp('backgroundColor', color.backgroundColor)event.setProp('borderColor', color.borderColor)} else {// 开始时间无值或状态为待安排// 从日历视图中移除任务event.remove(task.id)// 刷新收集箱列表this.reloadCollectionBox()}
}

解决新增事件重复问题

问题描述

使用过程中发现一个新问题,具体如下:
在周日历视图中,新增一个任务,保存,正常显示;
image.png
切换到月日历视图中,该任务会显示两次,如下所示:
image.png
并且再切换到周视图或日视图,该任务都会重复显示:
image.png

原因分析

依据前面的经验,切换视图时,若时间范围变大,FullCalendar将会自动调用后端服务,获取相应范围内的数据加载和显示,问题在于,该加载并没有处理同一事件的合并问题,

解决方案

尝试调用FullCalendar的render事件来刷新,无效。
查找官方文档,没找到清空事件的api。
然后查看addEvent方法时,有了新发现,该方法第二个参数可以指定数据源,相关描述如下:

source represents the Event Source you want to associate this event with. When the source is refetched, it will clear the dynamically added event from the internal cache before fetching. This optional parameter can be specified as any of the following:

  • an Event Source ID string
  • an Event Source Object
  • true, which signifies the first event source

大意是指定一个数据源,当重新获取(refetched)时,会将动态添加的事件从内部缓存中清空。

这也是为什么通过addEvent方法动态添加的事件,在切换视图的时候为什么会重复显示了。
但是我们给日历组件FullCalendar设置事件是指定event属性为方法,当切换视图时会自动调用,并没有使用事件源,也没有调用refetch方法,这种方式下能有用吗?

尝试调整新增任务方法,将addEvent方法多传一个参数,设置为true,如下:

 // 新增任务
addTask(task) {// 获取日历对象const fullCalendar = this.$refs.fullCalendar.calendar// 将任务数据转换为日历事件const event = this.convertTaskToEvent(task)// 调用api添加任务fullCalendar.addEvent(event, true)
}

测试发现,功能正常了,在周视图动态添加的任务,切换到月视图后不会重复显示两遍,问题解决。

应用系统

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

这篇关于FullCalendar日历组件集成系列11——颜色区分及解决新增事件重复问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1108112

相关文章

Mysql如何解决死锁问题

《Mysql如何解决死锁问题》:本文主要介绍Mysql如何解决死锁问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录【一】mysql中锁分类和加锁情况【1】按锁的粒度分类全局锁表级锁行级锁【2】按锁的模式分类【二】加锁方式的影响因素【三】Mysql的死锁情况【1

SpringBoot内嵌Tomcat临时目录问题及解决

《SpringBoot内嵌Tomcat临时目录问题及解决》:本文主要介绍SpringBoot内嵌Tomcat临时目录问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录SprinjavascriptgBoot内嵌Tomcat临时目录问题1.背景2.方案3.代码中配置t

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

Spring Boot 集成 Quartz并使用Cron 表达式实现定时任务

《SpringBoot集成Quartz并使用Cron表达式实现定时任务》本篇文章介绍了如何在SpringBoot中集成Quartz进行定时任务调度,并通过Cron表达式控制任务... 目录前言1. 添加 Quartz 依赖2. 创建 Quartz 任务3. 配置 Quartz 任务调度4. 启动 Sprin

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

如何解决idea的Module:‘:app‘platform‘android-32‘not found.问题

《如何解决idea的Module:‘:app‘platform‘android-32‘notfound.问题》:本文主要介绍如何解决idea的Module:‘:app‘platform‘andr... 目录idea的Module:‘:app‘pwww.chinasem.cnlatform‘android-32

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient

kali linux 无法登录root的问题及解决方法

《kalilinux无法登录root的问题及解决方法》:本文主要介绍kalilinux无法登录root的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,... 目录kali linux 无法登录root1、问题描述1.1、本地登录root1.2、ssh远程登录root2、

SpringBoot应用中出现的Full GC问题的场景与解决

《SpringBoot应用中出现的FullGC问题的场景与解决》这篇文章主要为大家详细介绍了SpringBoot应用中出现的FullGC问题的场景与解决方法,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录Full GC的原理与触发条件原理触发条件对Spring Boot应用的影响示例代码优化建议结论F

MySQL 中查询 VARCHAR 类型 JSON 数据的问题记录

《MySQL中查询VARCHAR类型JSON数据的问题记录》在数据库设计中,有时我们会将JSON数据存储在VARCHAR或TEXT类型字段中,本文将详细介绍如何在MySQL中有效查询存储为V... 目录一、问题背景二、mysql jsON 函数2.1 常用 JSON 函数三、查询示例3.1 基本查询3.2