FullCalendar日历组件集成实战(14)

2024-06-16 02:12

本文主要是介绍FullCalendar日历组件集成实战(14),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

背景

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

官网:https://fullcalendar.io/
image.png
环境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)}

在两个区域内拖放,打印输出如下:
image.png
梳理逻辑如下:
通过allDay属性,可以确定拖放方向,若allDay为false,从全天到非全天,反之为从非全天到全天。
从全天到非全天,结束时间=开始时间+任务的计划时长。如计划时长也为空,计划时长默认设置为半小时。
从非全天到全天,结束时间=开始时间+1天。

上面逻辑看上去不复杂,但是,混合以下两个因素就麻烦了。
一是任务的结束时间可能本来就是空的。
二是拖动可能未发生跨区域的情况。

例如,一个周一的8点开始的会议,未设置结束时间,拖放到了周二8点,这时候拿到的allDay属性为false,按照上面梳理逻辑,会自动计算结束时间后赋值,这么做,系统的自动化处理一定程度相当于“改变”了用户原本的设置。

为了规避这点,调整实现逻辑,当计划时长为空时,不设置其默认值,将结束时间依然留空。

这篇关于FullCalendar日历组件集成实战(14)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Debezium 与 Apache Kafka 的集成方式步骤详解

《Debezium与ApacheKafka的集成方式步骤详解》本文详细介绍了如何将Debezium与ApacheKafka集成,包括集成概述、步骤、注意事项等,通过KafkaConnect,D... 目录一、集成概述二、集成步骤1. 准备 Kafka 环境2. 配置 Kafka Connect3. 安装 D

Spring AI集成DeepSeek的详细步骤

《SpringAI集成DeepSeek的详细步骤》DeepSeek作为一款卓越的国产AI模型,越来越多的公司考虑在自己的应用中集成,对于Java应用来说,我们可以借助SpringAI集成DeepSe... 目录DeepSeek 介绍Spring AI 是什么?1、环境准备2、构建项目2.1、pom依赖2.2

使用 sql-research-assistant进行 SQL 数据库研究的实战指南(代码实现演示)

《使用sql-research-assistant进行SQL数据库研究的实战指南(代码实现演示)》本文介绍了sql-research-assistant工具,该工具基于LangChain框架,集... 目录技术背景介绍核心原理解析代码实现演示安装和配置项目集成LangSmith 配置(可选)启动服务应用场景

在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程

《在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程》本文介绍了在Java中使用ModelMapper库简化Shapefile属性转JavaBean的过程,对比... 目录前言一、原始的处理办法1、使用Set方法来转换2、使用构造方法转换二、基于ModelMapper

Java实战之自助进行多张图片合成拼接

《Java实战之自助进行多张图片合成拼接》在当今数字化时代,图像处理技术在各个领域都发挥着至关重要的作用,本文为大家详细介绍了如何使用Java实现多张图片合成拼接,需要的可以了解下... 目录前言一、图片合成需求描述二、图片合成设计与实现1、编程语言2、基础数据准备3、图片合成流程4、图片合成实现三、总结前

nginx-rtmp-module构建流媒体直播服务器实战指南

《nginx-rtmp-module构建流媒体直播服务器实战指南》本文主要介绍了nginx-rtmp-module构建流媒体直播服务器实战指南,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录1. RTMP协议介绍与应用RTMP协议的原理RTMP协议的应用RTMP与现代流媒体技术的关系2

C语言小项目实战之通讯录功能

《C语言小项目实战之通讯录功能》:本文主要介绍如何设计和实现一个简单的通讯录管理系统,包括联系人信息的存储、增加、删除、查找、修改和排序等功能,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录功能介绍:添加联系人模块显示联系人模块删除联系人模块查找联系人模块修改联系人模块排序联系人模块源代码如下

四种Flutter子页面向父组件传递数据的方法介绍

《四种Flutter子页面向父组件传递数据的方法介绍》在Flutter中,如果父组件需要调用子组件的方法,可以通过常用的四种方式实现,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录方法 1:使用 GlobalKey 和 State 调用子组件方法方法 2:通过回调函数(Callb

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

Java中Springboot集成Kafka实现消息发送和接收功能

《Java中Springboot集成Kafka实现消息发送和接收功能》Kafka是一个高吞吐量的分布式发布-订阅消息系统,主要用于处理大规模数据流,它由生产者、消费者、主题、分区和代理等组件构成,Ka... 目录一、Kafka 简介二、Kafka 功能三、POM依赖四、配置文件五、生产者六、消费者一、Kaf