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

背景

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

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

使用

按需加载事件数据(一)

前面我们调用后端服务,一次性把所有数据都传回了前端。系统刚开始使用,数据量比较小,系统会流畅运行。但随着时间的推移,数据越来越多,性能上可能存在问题,因此需要按需加载数据。
因官方文档过于简略,这地方花了很长时间摸索,分成三篇详细说说。

功能需求

1.初始化页面时调用后端服务加载数据
2.点击头部按钮工具栏时,进行视图切换(月、周、日)或点击前一个、后一个时,调用后端服务来加载数据。

起止时间

当前视图的起止时间,组件模型倒是提供了基础数据模型支撑(https://fullcalendar.io/docs/view-object),在视图对象中有几个关键属性:
activeStart:可见开始时间
activeEnd:可见结束时间
currentStart:真实开始时间
currentEnd:真实开始时间
两类起止时间,差异在于前者是可见,后者是真实,以月视图为例,默认是显示6行,42天。
image.png
以上图为例,activeStart是5月27日,activeEnd是7月7日,currentStart和currentEnd则是6月1日和6月30日。
结合上面例子,我们想控制后端返回数据的范围,使用的属性应该是activeStart和activeEnd。

方案探索

接下来就在于如何拿到起止时间了,并且在视图切换时触发调用后端服务来获取数据。
翻了很长时间的官方文档,发现组件预置的几个按钮,没有暴漏接口出来,要想添加自己的逻辑,能想到的曲线救国的方式,就是使用自定义按钮去覆写整个头部工具栏,以上一个按钮为例:

 customButtons: {changeShowScopeButton: {text: '显示全部',click: this.changeShowScope},myPreButton: {text: '‹',click: this.navPre}}navPre(e) {const view = this.$refs.fullCalendar.calendar.view……}

这么做缺点明显,很繁琐……

进一步探索,组件自身是否在视图呈现时回调方法,获取到视图对象,拿到起止时间。
还真找到了https://fullcalendar.io/docs/view-render-hooks。
添加属性与方法,如下:

// 视图展示回调
viewDidMount: this.viewDidMountviewDidMount(view) {console.log(view)
}

测试了下,只有视图加载时才会触发,同一视图,如月视图,通过上一个、下一个,都不会触发回调。

此外,还有一个隐含的关键问题,头部工具栏最右侧的四个切换按钮实际来自于三个不同的视图插件,周视图和日视图是公用一个插件timeGrid。而机制是只有视图切换时才会触发,日视图和周视图之间切换,并不会触发回调。这样就无法实现我们的功能需求了。

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

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

相关文章

【算法每日一练】新月轩就餐

思路: 其实很容易想到是双指针或者双端队列。 我们设置一个type表示当前区间已经有了多少种厨师,同时还需要记录区间中每个元素出现的次数,然后比较棘手的是移动问题了,什么时候移动呢? 我们可以发现当区间当队头元…

手眼标定学习笔记

目录 标定代码: 手眼标定原理学习 什么是手眼标定 手眼标定的目的 eye in hand eye to hand AXXB问题的求解 标定代码: GitHub - pumpkin-ws/HandEyeCalib 推荐博文: https://zhuanlan.zhihu.com/p/486592374 手眼标定原理学习 参…

「前端+鸿蒙」核心技术HTML5+CSS3(九)

以一个产品网站为例,以下是每个部分的HTML结构和CSS样式的完整代码示例。 1、顶部导航条 顶部导航条通常包含网站的联系信息或者一些导航链接。 HTML: <div id="top-nav"><ul><li><a href="#">联系方式</a></li>&…

国产操作系统上Vim的详解01--vim基础篇 _ 统信 _ 麒麟 _ 中科方德

原文链接&#xff1a;国产操作系统上Vim的详解01–vim基础篇 | 统信 | 麒麟 | 中科方德 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇在国产操作系统上使用Vim的详解文章。Vim是一款功能强大且高度可定制的文本编辑器&#xff0c;广泛应用于编程和日常文本编辑中。…

记一次cms代码审计

000&#xff1a;前言 记录一次小型cms代码审计 001&#xff1a;任意文件删除 由于代码繁杂&#xff0c;不再一一展示 /app/controller/kindeditor.class.php 关键漏洞代码 public function delete() {$path ROOT_PATH.$_GET[pic];unlink($path);$flash M("flash&qu…

Postgre数据库初探

一、PostgreSQL介绍 PostgreSQL是以加州大学伯克利分校计算机系开发的POSTGRES&#xff0c; 版本 4.2为基础的对象关系型数据库管理系统&#xff08;ORDBMS&#xff09;。POSTGRES 领先的许多概念在很久以后才出现在一些商业数据库系统中。 PostgreSQL是最初的伯克利代码的开…

vscode编译c/c++找不到jni.h文件

解决办法: 一、下载JDK 访问Oracle官网的Java下载页面&#xff1a;Java Downloads | Oracle 选择适合您操作系统的JDK版本&#xff1a; 对于Windows&#xff0c;选择“Windows x64”或“Windows x86”&#xff08;取决于您的系统是64位还是32位&#xff09;。对于Linux&#…

代码随想录-算法训练营day59【单调栈02:下一个更大元素II、接雨水】

代码随想录-035期-算法训练营【博客笔记汇总表】-CSDN博客 第十章 单调栈part02● 503.下一个更大元素II ● 42. 接雨水 详细布置 503.下一个更大元素II 这道题和 739. 每日温度 几乎如出一辙,可以自己尝试做一做https://programmercarl.com/0503.%E4%B8%8B%E4%B8%80%E4%B8%…

Linux文件操作(二)

目录 1、Linux下文件查找命令 2、Linux下文件压缩工具 3、Linux下文件打包工具 一、Linux下文件查找命令 命令查找 Linux下一切皆文件&#xff01; which 命令&#xff1a;找出命令的绝对路径 whereis 命令&#xff1a;找出命令的路径以及文档手册信息 [rootlocalhost ~]…

筑牢科技与人才“护城河”,泸州老窖构建创新新生态

执笔 | 姜 姜 编辑 | 扬 灵 5月30日&#xff0c;以“‘数智’启新篇 ‘新质’酿未来”为主题的泸州老窖2024年科技和人才工作大会在泸州召开&#xff0c;再次让行业看到了近十年来泸州老窖科技人才布局与培养的显著成果&#xff0c;以及泸州老窖传承700年的人才力量。 表彰创新…

【接金币game】

接金币游戏是一种常见的简单游戏&#xff0c;玩家通过移动一个角色&#xff08;比如一个篮子或者人物&#xff09;来接住屏幕上方掉落的金币。以下是一个简单的接金币游戏程序的编写思路&#xff0c;我们将使用Python语言&#xff0c;并假设您使用的是Pygame库&#xff0c;这是…

RPM包方式离线部署gitlab

下载安装包 要求&#xff1a;可以联网&#xff0c;系统及版本与目标服务器一致。配置gitlab yum仓库 curl -s https://packages.gitlab.com/install/repositories/gitlab/gitlab-ce/script.rpm.sh | sudo bash 新建包存放目录 mkdir /root/gitlab 下载gitlab及相关安装包 …

【TB作品】MSP430G2553 单片机口袋板,DAC波形发生器

功能 DAC波形发生器 按键切换波形&#xff0c;正弦波、三角波、锯齿波、方波。 部分代码 const unsigned int zhengxian[101] { 32767, 34824, 36874, 38907, 40916, 42893,44830, 46719, 48553, 50325, 52027, 53654, 55198, 56653, 58015, 59276,60434, 61481, 62416, 63…

移动端input输入时底部按钮被虚拟键盘顶上解决办法

前言 遇到了在输入框输入时底部按钮被虚拟键盘上去的问题&#xff0c;把解决办法分享一下 解决办法 文本通过监听页面高度的变化对按钮进行隐藏控制 代码实现 import React, {useState } from "react";const BottomView ({ children, ...props }: any) > {c…

记录遇见的小问题

1&#xff0c;angularjs 使用bootstrap时&#xff0c;遇见模态框怎么点击空白处不关闭&#xff1b; <div id"dialog-modal" data-backdrop"static" data-keyboard"false"> 但是在实际使用过程中调用了一个html 需要在 js里加 $scope.Up…

老赛棍版端口,扫别人没扫到的资产

0x001 获取目标信息 因为某些敏感原因&#xff0c;这部分干脆以长沙为例&#xff0c;仅做查询方式参考。首先FOFA搜&#xff1a;region"Hunan" && city"Changsha"&#xff0c;全部转换为C段后去重&#xff0c;就得到该城市的大致网段&#xff1a;…

MR混合现实情景实训教学系统在消防课堂上的应用

MR混合现实情景实训教学系统在消防课堂上的应用具有很大的优势。它能够为学生提供一种沉浸式的体验&#xff0c;让他们更好地理解和掌握消防知识和技能。 1、模拟火灾现场&#xff1a;通过MR技术&#xff0c;可以创建逼真的火灾现场&#xff0c;让学生亲身体验火灾的危害和紧急…

Android O Camera深度研究

目录 Adnroid O之前的Android camera软件框架 Adnroid O camera软件框架 Passthrough Mode Binderized mode Wrapper shim for libhardware HALs Wrapper shim for libhardware HALs Customized Treble Camera HAL/framework Camera HAL transition and removal plan …

Android精通值Fragment的使用 —— 不含底层逻辑(五)

1. Fragment 使用Fragment的目标&#xff1a;根据列表动态显示内容&#xff0c;更简洁显示界面、查找界面 eg. 使用新闻列表动态显示新闻 1.1 Fragment的特性 具备生命周期 —— 可以动态地移除一些Fragment必须委托在Activity中使用可以在Activity中进行复用 1.2 Fragmen…

新鲜速递:图解新颖LLM的CoPE位置编码

大模型技术论文不断&#xff0c;每个月总会新增上千篇。本专栏精选论文重点解读&#xff0c;主题还是围绕着行业实践和工程量产。若在某个环节出现卡点&#xff0c;可以回到大模型必备腔调重新阅读。而最新科技&#xff08;Mamba,xLSTM,KAN&#xff09;则提供了大模型领域最新技…