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

背景

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

官网:https://fullcalendar.io/
image.png
环境Vue3+Element Plus+FullCalendar 6.1.11。

使用

按需加载数据(四)

前面实现了功能,不过说的主要的前端的事。
后端取数也比较重要,在这补充说明下。
后端取数逻辑需要考虑周全,涉及到四个时间的比较。
任务开始时间
任务结束时间
查询范围开始时间(FullCalendar组件)
查询范围结束时间(FullCalendar组件)

假设任务的起止时间都有值的情况下,实际需要考虑三种情况:

  • 任务开始时间>=区域开始时间且任务开始时间<=区域结束时间
  • 任务结束时间>=区域开始时间且任务结束时间<=区域结束时间
  • 任务开始时间<=区域开始时间且任务结束时间>=区域结束时间

即任务开始时间落在区域时间范围内,或任务结束时间落在区域时间范围内,或任务起止时间包含在区域时间内部。
服务方法如下:

 @Override
public List<Task> listWithScope(LocalDateTime startTime, LocalDateTime endTime) {QueryWrapper<Task> queryWrapper = new QueryWrapper<>();queryWrapper.lambda()// 任务开始时间落在区域范围内,即任务开始时间>=区域开始时间且任务开始时间<=区域结束时间.and(x -> x.ge(Task::getStartTime, startTime).le(Task::getStartTime, endTime))// 或者 任务结束时间落在区域范围内,即任务结束时间>=区域开始时间且任务结束时间<=区域结束时间.or(x -> x.ge(Task::getEndTime, startTime).le(Task::getEndTime, endTime))// 或者 任务起止时间包含区域范围,即任务开始时间<=区域开始时间且任务结束时间>=区域结束时间.or(x -> x.le(Task::getStartTime, startTime).ge(Task::getEndTime, endTime));return this.list(queryWrapper);}

此外,任务的开始时间和结束时间并非必填项,有些业务场景会只设置其中一项:

  • 场景1:任务耗时极短,我们只需要标记开始时间即可,无需设置结束时间,相当于起到备忘功能,即开始时间有值,结束时间为空
  • 场景2:任务耗时不确定,开始时间可以安排,结束时间无法计划,即开始时间有值,结束时间为空
  • 场景3:任务有截止时间,但尚未安排什么时间开始做,即开始时间为空,结束时间有值

以上3个场景对应两类情况,上面的后端处理逻辑仍能获取期望范围内的数据。

但是,FullCalendar组件这边发现存在问题。
对于场景1和2,开始时间有值,结束时间为空,会在视图中显示一条只有开始时间,没有结束时间的事件,正常。
对于场景3,开始时间为空,结束时间有值,该事件不会在视图中显示,就跟不存在一样。

思考了下,对于场景3,不适合由系统自动补全一个开始时间,例如参照结束时间,会跟初衷相违背。此时,由用户注意这点,设置一个相对宽泛的开始时间,比如周五截止的任务,设置周一为开始时间,或者干脆就设置截止时间同一天,但作为日程安排的制定人,对任务的情况是清楚的,也没影响到用户体验。

注:至于起止时间都为空,往往是一项尚未拆解的大任务大目标,或者作为任务的归类,没有显示在日程表上的必要。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/26594.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎么防止源代码泄露?9种方法教会你!

怎么防止源代码泄露&#xff1f;首先要了解员工可以通过哪些方式将源代码传输出去&#xff01; 物理方法&#xff1a; — 网线直连&#xff0c;即把网线从墙上插头拔下来&#xff0c;然后和一个非受控电脑直连; — winPE启动&#xff0c;通过光盘或U盘的winPE启动&#xff0c;甚…

Maven Dependency Tree:深入理解你的项目依赖

在Java开发领域&#xff0c;Apache Maven作为一款强大的构建和项目管理工具&#xff0c;广泛应用于自动化构建、依赖管理和项目报告生成等场景。当处理大型项目时&#xff0c;管理依赖关系变得尤为关键&#xff0c;因为不透明或冗余的依赖可能导致各种问题&#xff0c;从构建失…

Mybatis save、saveOrUpdate、update的区别

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff01; 1. save方法 Mybatis的save方法用于插入一条新的记录。当数据库中不存在相同的记录时&#xff0c;会执行插入操作&#xff1b;如果已经存在相同的记录&#xff0c;则会抛出异常。 int result sqlSession.insert(&…

【SAP-ABAP】-权限批导-批量分配角色给具体用户

需求&#xff1a;SAP期初上线的时候&#xff0c;业务顾问经常会遇到批量创建角色和分配角色权限的情况 岗位需求&#xff1a;一般是业务顾问定义权限&#xff0c;BASIS进行后期运维&#xff0c;今天讲两个批导功能&#xff0c;方便期初上线 此程序功能&#xff1a;给具体用户…

计算各聚类中心

任务描述 本关实现一个函数来计算各簇的中心。 相关知识 在前一个关卡中&#xff0c;我们实现了一个函数来计算距离每个样本最近的簇中心&#xff0c;这样每一个样本都有了所属的簇团&#xff0c;从而将一堆数据分成了 n 个簇&#xff0c;也就是 n 个类。 K-means 算法是一…

leetcode打卡#day41 509. 斐波那契数、70. 爬楼梯、746. 使用最小花费爬楼梯

509. 斐波那契数 class Solution { public:int fib(int n) {if (n 0) return 0;if (n 1) return 1;return fib(n-1) fib(n-2);} };70. 爬楼梯 class Solution { public://动态规划 -- 爬楼梯int climbStairs(int n) {if (n < 1) return n; //防止空指针vector<int&g…

【Go】十三、TOKEN机制与跨域处理方式

身份校验 对于微服务场景来说&#xff0c;使用 cookie session 来进行身份校验是一种不合适的做法&#xff0c;因为 生成的sessionid 是不存储任何信息的&#xff0c;这样我们如果要在其他模块中进行身份校验就是做不到的&#xff0c;例如&#xff1a;我们无法在商品模块中筛…

Android Unable to determine activity name

报错:Unable to determine activity name的解决办法 最新的Android Studio长颈鹿版(Android Studio Giraffe | 2022.3.1 Patch 4) 新建一个空白的Activity,只能选kotlin. 选No Activity,则可以选Java语言。 新建好后,不像以前的老版本,点击运行,可以直接进入Hello wor…

电脑桌面提醒做事的app 好用的桌面提醒app

在快节奏的现代生活中&#xff0c;我们每天都要通过电脑处理大量的工作事项。然而&#xff0c;繁忙的工作节奏有时会导致我们遗忘某些重要任务&#xff0c;从而带来不必要的损失。为了避免这种情况&#xff0c;选择一款好用的桌面提醒app显得尤为重要。 想象一下&#xff0c;你…

世界上最顶级的动画公司是哪个?基于什么技术?

世界上最顶级的动画公司之一是皮克斯动画工作室&#xff08;Pixar Animation Studios&#xff09;。皮克斯以其技术创新、卓越的动画质量和强大的故事叙述能力闻名。下面是皮克斯的一些关键技术和创新&#xff1a; 1. 计算机动画&#xff08;CGI&#xff09;&#xff1a; 皮…

C语言| 数组

直接定义一个数组&#xff0c;并给所有元素赋值。 数组的下标从0开始&#xff0c;下标又表示数组的长度。 【程序代码】 #include <stdio.h> int main(void) { int a[5] {1, 2, 3, 4, 5}; int i; for(i0; i<5; i) { printf("a[%d] %d\…

主窗体获取子窗体的数值

本文所描述的是一个modbus读从站的数值实时更新到主窗体中&#xff0c;在主窗体中实时检测子窗体反馈回来的数据当它为false的时候添加报警输出 在主窗体中 //公开一个静态的字典用来接收数值 public static Dictionary<string, bool> StatusDictionary { get; set; }p…

翻译: Gen AI生成式人工智能学习资源路线图一

Introduction 介绍 本文档旨在作为学习现代人工智能系统背后的关键概念的手册。考虑到人工智能最近的发展速度&#xff0c;确实没有一个好的教科书式的资源来快速了解 LLMs 或其他生成模型的最新和最伟大的创新&#xff0c;但互联网上有大量关于这些主题的优秀解释资源&#x…

WireGuard网络架构及配置详解

WireGuard网络架构及配置详解 一.点对点二.中心网关,实现nat穿透弊端:流量全部经过中心网关,带宽上限受限于中心网关 三.借助registry实现双向nat穿透需要借助registry实现 udp打洞, 待二开 一.点对点 yum install epel-release elrepo-release -y yum install yum-plugin-elr…

QT——事件

一、什么是事件 在QT中,事件(Event)是指由特定对象发生的动作或状态变化,通常用于响应用户的操作。事件可以是鼠标点击、键盘输入、窗口移动等用户操作,也可以是系统发出的信号,比如定时器超时、网络数据到达等。在QT中,可以通过连接信号与槽(Signals and Slots)的方…

蒂姆·库克解释Apple Intelligence和与ChatGPT合作的区别|TodayAI

在2024年全球开发者大会&#xff08;WWDC 2024&#xff09;上&#xff0c;苹果公司首席执行官蒂姆库克&#xff08;Tim Cook&#xff09;隆重介绍了公司的最新人工智能&#xff08;AI&#xff09;计划——Apple Intelligence&#xff0c;并宣布了与OpenAI的ChatGPT的合作。虽然…

知识图谱存在的挑战---数据相关和算法相关

文章目录 数据相关算法相关 数据相关 数据是知识图谱的基石,知识图谱的数据来源主要有两种&#xff1a;自有数据&#xff08;自身采集 或拥有等&#xff09;和外源数据。自有数据由建设者因特定的业务需求而采集获取或经过特定加工处理形成且被自己所拥有的数据&#xff1b;外源…

kotlin 协程之初识挂起函数

什么是挂起函数 官方文档 在 Kotlin 协程:从基础概念到开发实践 文章中,提到 kotlin协程 是一个可挂起计算的实例,可以在一个线程中挂起并在另一个线程中恢复继续执行,这期间不会阻塞线程。 这种挂起和恢复的能力就是通过挂起函数来实现的。 在使用示例中,我们用到了 w…

定时器0电机控制PWM输出

/*立式不锈钢波纹管机控制板2021 2 26 pcb PAST******/ #include <REG52.H> #include <intrins.H> #define uint unsigned int #define uchar unsigned char #define …

vue使用

if (this.$isPGY) {typeof window.tabCreateFn "function" && window.tabCreateFn("对账单 - 新增", "/vues/account/add", "")} else {this.$router.push({ name: "AccountAdd" })}