FullCalendar日历组件集成实战(17)
背景
有一些应用系统或应用功能,如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件,但功能比较简单,用来做数据展现勉强可用。但如果需要进行复杂的数据展示,以及互动操作如通过点击添加事件,则需要做大量的二次开发。
FullCalendar是一款备受欢迎的开源日历组件,以其强大的功能而著称。其基础功能不仅免费且开源,为开发者提供了极大的便利,仅有少量高级功能需要收费。然而,尽管该组件功能卓越,其文档却相对简洁,导致在集成过程中需要开发者自行摸索与探索,这无疑增加了不少学习和验证的时间成本。
为此,本专栏通过日程管理系统的真实案例,手把手带你了解该组件的属性和功能,通过需求导向的方式,详细阐述FullCalendar组件的集成思路和实用解决方案。
在介绍过程中,我们将重点关注集成要点和注意事项,力求帮助开发者在集成过程中少走弯路,提供有效的避坑指南,从而提升开发效率,更好地利用这款优秀的日历组件。
官网:https://fullcalendar.io/
环境Vue3+Element Plus+FullCalendar 6.1.11。
使用
拖放日历组件外元素至日志组件内(一)
业务场景
先来说下需求。
我们通过日历组件来安排日程,主要是安排那些有相对明确的时间的事项。但实际还存在一些事项,比如临时的,刚想起或刚产生的,不紧急,甚至需要完成一些前置依赖。安排到哪个时间点尚不确定。
这种场景下,需要一个收集箱来暂存这些任务,用于提醒,防止遗忘而遗漏。
如上所述,将任务状态标记为“待安排”,并将其起止时间值为空。
安排计划时再根据实际情况把这些事项放到具体的计划中。
功能设计
对于上述需求,我们在当前日历组件之外,增加收集箱的功能,用于存放和显示“待安排”的任务,如下图所示:
这样用户不需要切换到别的菜单来新建待安排的事项,并且在安排计划时候也可以将待安排的事项一并考虑。
虽然用户可以在收集箱中的任务清单中点击某项任务,设置起止时间,通过刷新日历组件来显示,但是操作较繁琐。为了便于操作,我们来实现“拖放”操作,即将左侧收集箱中的任务,直接拖放到日历组件中,根据放置的位置自动设置起止时间,这样做更方便与直观。
即我们需要将一个FullCalendar日历组件外的元素,拖放到日历组件内部。
尝试方案
官网说明文档有相关描述,但是过于简略,需要摸索。
首先,需要配置属性,将拖放功能开关打开:
// 启用拖动外部元素放置到日历
droppable: true
然后,定义拖放结束的回调事件drop,注意不是前面用过的eventDrop,如下:
//外部元素拖放到日历中
drop: this.drop,
接下来,最关键的操作就是外部元素拖拽到日历组件内部了。
官网描述的使用draggable,说的很含糊,这个draggable到底指啥并不明确。
一开始,尝试使用自己熟悉的vuedraggable组件来实现拖拽功能,然后测试失败,drop回调事件触发不了,怀疑被vuedraggable自己截获和处理了。
然后,使用html5自身的draggable,同样发现无法触发回调事件。
应用系统
名称:遇见
地址:https://meet.popsoft.tech
说明:基于一二三应用开发平台和FullCalendar日历组件实现的面向个人的时间管理、任务管理系统,1分钟注册,完整功能,欢迎使用~
相关文章:
FullCalendar日历组件集成实战(17)
背景 有一些应用系统或应用功能,如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件,但功能比较简单,用来做数据展现勉强可用。但如果需要进行复杂的数据展示,以及互动操作如通过点击添加事件࿰…...
【图像分割】mask2former:通用的图像分割模型详解
最近看到几个项目都用mask2former做图像分割,虽然是1年前的论文,但是其attention的设计还是很有借鉴意义,同时,mask2former参考了detr的query设计,实现了语义和实例分割任务的统一。 1.背景 1.1 detr简介 detr算是第…...
【不锈钢酸退作业区退火炉用高温辐射计快速安装】
项目名称 不锈钢酸退作业区退火炉用高温辐射计快速安装 改造实施项目简介项目提出前状况:不锈钢生产过程中,各种型号的不锈钢带钢在退火工艺中对带钢温度的准确性要求很高,带钢温度的检测直接影响带钢的产品质量,不锈钢带钢温度测量依靠的是高温辐射计,其测量的准确性、稳…...
Studying-代码随想录训练营day29| 134. 加油站、135. 分发糖果、860.柠檬水找零、406.根据身高重建队列
第29天,贪心part03,快过半了(ง •_•)ง💪,编程语言:C 目录 134.加油站 135. 分发糖果 860.柠檬水找零 406.根据身高重建队列 134.加油站 文档讲解:代码随想录加油站 视频讲解:手撕加油站…...
Understanding Zero Knowledge Proofs (ZKP)
Bilingual Tutorial: Understanding Zero Knowledge Proofs (ZKP) 双语教程:理解零知识证明(ZKP) Introduction 介绍 English: Zero Knowledge Proofs (ZKP) are a fascinating concept in cryptography where one party (the prover) can…...
微信小程序 DOM 问题
DOM 渲染问题 问题 Dom limit exceeded, please check if theres any mistake youve made.测试页面 1 <template><scroll-view scroll"screen" style"width: 100%;height: 100vh;" :scroll-y"true" :scroll-with-animation"tru…...
可视化作品集(03):旅游景区的应用,美爆啦。
景区可视化通常指的是利用现代科技手段,如地图、虚拟现实(VR)、增强现实(AR)、无人机航拍等技术,将景区的地理信息、景点分布、交通路线、游客服务设施等内容以可视化的方式呈现给游客或者管理者࿰…...
嵌入式实时操作系统:Intewell操作系统与VxWorks操作系统有啥区别
Intewell操作系统和VxWorks操作系统都是工业领域常用的操作系统,它们各有特点和优势。以下是它们之间的一些主要区别: 架构差异: Intewell操作系统采用微内核架构,这使得它具有高实时性、高安全性和强扩展性的特点。微内核架构…...
PCDN技术如何提高内容分发效率?(壹)
PCDN技术提高内容分发效率的操作主要体现在以下几个方面: 利用P2P技术:PCDN以P2P技术为基础,通过挖掘利用边缘网络的海量碎片化闲置资源,实现内容的分发。这种方式可以有效减轻中心服务器的压力,降低内容传输的延迟&a…...
Java 中Json中既有对象又有数组的参数 如何转化成对象
1.示例一:解析一个既包含对象又包含数组的JSON字符串,并将其转换为Java对象 在Java中处理JSON数据,尤其是当JSON结构中既包含对象又包含数组时,常用的库有org.json、Gson和Jackson。这里我将以Gson为例来展示如何解析一个既包含对…...
什么是数据挖掘(python)
文章目录 1.什么是数据挖掘2.为什么要做数据挖掘?3数据挖掘有什么用处?3.1分类问题3.2聚类问题3.3回归问题3.4关联问题 4.数据挖掘怎么做?4.1业务理解(Business Understanding)4.2数据理解(Data Understanding&#x…...
【Tomcat】Linux下安装帆软(fineReport)服务器 Tomcat
需求:帆软(fineReport)数据集上传至服务器 工具:XSHELL XFTP 帮助文档 一. 安装帆软服务器Tomcat 提供 Linux X86 和 Linux ARM 两种类型的部署包 ,所以在下载部署钱需要确认系统架构不支持在 32 位操作系统上安装 查…...
C++ | Leetcode C++题解之第213题打家劫舍II
题目: 题解: class Solution { public:int robRange(vector<int>& nums, int start, int end) {int first nums[start], second max(nums[start], nums[start 1]);for (int i start 2; i < end; i) {int temp second;second max(fi…...
windows系统中快速删除node_modules文件
npx命令方式 npx rimraf node_modules 项目中设置 "scripts": {# 安装依赖"i": "pnpm install",# 检测可更新依赖"npm:check": "npx npm-check-updates",# 删除 node_modules"clean": "npx rimraf node_m…...
Spring MVC数据绑定和响应——页面跳转(一)返回值为void类型的页面跳转
一、返回值为void类型的页面跳转到默认页面 当Spring MVC方法的返回值为void类型,方法执行后会跳转到默认的页面。默认页面的路径由方法映射路径和视图解析器中的前缀、后缀拼接成,拼接格式为“前缀方法映射路径后缀”。如果Spring MVC的配置文件中没有配…...
CSS动画keyframes简单样例
一、代码部分 1.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><link rel"stylesheet" href…...
LabVIEW风机跑合监控系统
开发了一种基于LabVIEW的风机跑合监控系统,提高风机测试的效率和安全性。系统通过自动控制风机的启停、实时监控电流和功率数据,并具有过流保护功能,有效减少了人工操作和安全隐患,提升了工业设备测试的自动化和智能化水平。 项目…...
sql语句练习注意点
1、时间可以进行排序,也可以用聚合函数对时间求最大值max(时间) 例如下面的例子:取最晚入职的人,那就是将入职时间倒序排序,然后limit 1 表: 场景:查找最晚入职员工的所有信息 se…...
如视“VR+AI”实力闪耀2024世界人工智能大会
7月4日,2024世界人工智能大会暨人工智能全球治理高级别会议(以下简称为“WAIC 2024”)在上海盛大开幕,本届大会由外交部、国家发展和改革委员会、教育部等部门共同主办,围绕“以共商促共享 以善治促善智”主题…...
华为云交付模式和技术支持
华为云交付模式概览 用户由于自身或者企业属性的原因,对于使用云服务的要求也会有所不同。因此,华为云针对于不同用户的不同要求,提供了以下三种交付模式供用户选择。 公有云模式 公有云的核心属性是共享资源服务华为公有云为个人和企业用户…...
RK3568平台(opencv篇)ubuntu18.04上安装opencv环境
一.什么是 OpenCV-Python OpenCV-Python 是一个 Python 绑定库,旨在解决计算机视觉问题。 Python 是一种由 Guido van Rossum 开发的通用编程语言,它很快就变得非常流行,主要是 因为它的简单性和代码可读性。它使程序员能够用更少的代码行…...
R-CNN:深度学习在目标检测中的革命
R-CNN:深度学习在目标检测中的革命 目标检测是计算机视觉领域的一个核心问题,而R-CNN(Regions with Convolutional Neural Networks)算法是这一领域的一个重要里程碑。R-CNN及其后续的多种变体,如Fast R-CNN和Faster …...
docker容器技术、k8s的原理和常见命令、用k8s部署应用步骤
容器技术 容器借鉴了集装箱的概念,集装箱解决了什么问题呢?无论形状各异的货物,都可以装入集装箱,集装箱与集装箱之间不会互相影响。由于集装箱是标准化的,就可以把集装箱整齐摆放起来,装在一艘大船把他们…...
ThinkPHP定时任务是怎样实现的?
接到一个需求:定时检查设备信息,2分钟没有心跳的机器,推送消息给相关人员,用thinkphp5框架,利用框架自带的任务功能与crontab配合来完成定时任务。 第一步:分析需求 先写获取设备信息,2分钟之…...
[C++][CMake][生成可执行文件][上]详细讲解
目录 0.准备工作1.添加CMakeLists.txt文件2.执行cmake命令3.变量定义4.指定使用的C标准5.指定输出路径 0.准备工作 add.c#include <stdio.h> #include "head.h"int add(int a, int b) {return ab; }sub.c#include <stdio.h> #include "head.h"…...
Asp.net Core 反射加载dll
定义一个类库,定义接口 namespace Plugin {public interface IPlugin{void EllisTest();} }定义另外一个类库,引用上面的类库,实现接口 using Plugin;namespace UserCustom {public class Custom : IPlugin{public void EllisTest(){Conso…...
利用coredump获取程序调用通路
一些前置知识 原文链接:https://blog.csdn.net/tenfyguo/article/details/8159176 一、什么是coredump 我们经常听到大家说到程序core掉了,需要定位解决,这里说的大部分是指对应程序由于各种异常或者bug导致在运行过程中异常退出或者中止&a…...
DVWA sql手注学习(巨详细不含sqlmap)
这篇文章主要记录学习sql注入的过程中遇到的问题已经一点学习感悟,过程图片会比较多,比较基础和详细,不存在看不懂哪一步的过程 文章目录 靶场介绍SQL注入 lowSQL注入 MediumSQL注入 HighSQL注入 Impossible 靶场介绍 DVWA(Damn…...
代码随想录算法训练营第70天图论9[1]
代码随想录算法训练营第70天:图论9 拓扑排序精讲 卡码网:117. 软件构建(opens new window) 题目描述: 某个大型软件项目的构建系统拥有 N 个文件,文件编号从 0 到 N - 1,在这些文件中,某些文件依赖于其他文件的…...
浏览器设计为默认
...
windows USB 设备驱动开发-USB设备描述符
USB的描述符是USB设备向主机报告状态的重要数据结构,在USB通电后,端点(也称为终结点)0始终处于可用状态,这个默认的端点就是用于主机从设备中读取描述符的。 讨论USB通讯,需要从软件和硬件两方面说起,在软件上&#x…...
【踩坑】修复报错Cannot find DGL libdgl_sparse_pytorch_2.2.0.so
转载请注明出处:小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你,欢迎[点赞、收藏、关注]哦~ 目录 错误复现 原因分析 解决方法 错误复现 import dgldataset dgl.data.CoraGraphDataset() graph dataset[0] graph.adjacency_matrix() 原因分…...
postman中参数和x-www-form-urlencoded传值的区别
在 Postman 中,传递参数的方式有多种,其中常用的包括 params 和 x-www-form-urlencoded。这两种方式在使用场景和传递数据的方式上有所不同。 1. Params Params 选项用于在 URL 中传递查询参数。这些参数通常用于 GET 请求,但也可以与其他 …...
自己训练 PaddleOCR
打标工具 https://github.com/Evezerest/PPOCRLabel 感谢这位热心网友提供的标注工具,操作非常的方便 只是这个工具有个小坑get_rotate_crop_image() 我的标注数据导出时,很多数据变成倒的 hmmmm, 你管我~ if dst_img_height …...
基于SpringBoot的地方废物回收机构管理系统
本系统主要包括管理员和员工两个角色组成;主要包括:首页、个人中心、员工管理、员工请假管理、销假申请管理、工作日志管理、员工工资管理、员工任务管理、任务汇报管理、设备信息管理、设备借用管理、设备归还管理、设备保修管理、维修入库管理、员工打…...
跑腿平台小程序的设计
管理员账户功能包括:系统首页,个人中心,基础数据管理,管理员管理,接单详情管理,跑腿员管理,跑腿任务管理 微信端账号功能包括:系统首页,跑腿任务,接单员&…...
Java技术栈总结:Redis篇
一、数据类型 Redis 自身是一个 Map,其中的所有数据均采用“key:value”的形式存储。 数据类型指的是存储的数据的类型,即 value 部分的类型,key 的部分只能是字符串。 value 部分的数据类型:<String、List、Hash、Set、Zse…...
django models对应的mysql类型
Django模型字段类型与MySQL数据库类型的对应关系如下: Django 模型字段类型MySQL 数据库类型AutoFieldBIGINT UNSIGNEDCharFieldVARCHARIntegerFieldINTDecimalFieldDECIMALDateFieldDATEDateTimeFieldDATETIMEFileField, ImageFieldVARCHAR (用于文件路径)Boolean…...
2024攻防演练:亚信安全新一代WAF,关键时刻守护先锋
实网攻防 网络安全如同一面坚固的盾牌,保护着我们的信息资产免受无孔不入的威胁。而其中,WAF就像网络安全的守门员,关键时刻挺身而出,为您的企业筑起一道坚实的防线。 攻防不对等 防守方实时应答压力山大 在攻防对抗中…...
富格林:曝光有效方案安全交易
富格林认为,近些年来大家的投资理财意识逐渐增强,现货黄金作为一种自带优质避险功能的投资产品,自然就受到投资者的关注和追捧。但现货黄金的交易市场相对来说还是比较混杂,投资小白稍不留神就可能会陷入受害陷阱当中无法安全交易…...
ArtTS系统能力-窗口管理的学习(3.2)
上篇回顾: ArtTS系统能力-通知的学习(3.1) 本篇内容: ArtTS系统能力-窗口管理的学习(3.2) 一、 知识储备 1. 基本概念 窗口渲染式能力:指对状态栏、导航栏等系统窗口进行控制,减…...
C++ 运算符的优先级和关联性表
C 运算符的优先级和关联性表 1. Precedence and associativity (优先级和结合性)2. Alternative spellings (替代拼写)3. C operator precedence and associativity table (C 运算符的优先级和关联性表)References C documentation (C 文档) https://learn.microsoft.com/en-us…...
正则表达式替换字符串的方法
正则表达式替换字符串的方法 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我们来探讨一个非常实用的编程技术:使用正则表达式替换字符串。正则…...
开源模型应用落地-FastAPI-助力模型交互-WebSocket篇(五)
一、前言 使用 FastAPI 可以帮助我们更简单高效地部署 AI 交互业务。FastAPI 提供了快速构建 API 的能力,开发者可以轻松地定义模型需要的输入和输出格式,并编写好相应的业务逻辑。 FastAPI 的异步高性能架构,可以有效支持大量并发的预测请求,为用户提供流畅的交互体验。此外,F…...
2024/7/4总结
http协议 http协议,是一个客户端请求和响应的标准协议,这个协议详细规定了浏览器和万维网服务器之间互相通信的规则。用户输入地址和端口号之后就可以从服务器上取得所需要的网页信息。 通信规则规定了客户端发送给服务器的内容格式,也规定了服务器发送给…...
【Android面试八股文】Looper如何在子线程中创建?
文章目录 一、Looper的几个重要方法二、子线程中使用Looper的方式1三、子线程中使用Looper的方式23.1 使用HandlerThread实现3.2 HandlerThread源码解析创建子线程的 Looper必须要通过 Looper.prepare()初始化looper,然后再通过 Looper.loop()方法让 Loop运行起来。 那么具…...
IT项目管理文档体系
IT项目管理文档体系是确保项目顺利进行、有效沟通和合规性的关键组成部分。一个完善的文档体系能够帮助项目团队记录决策过程、明确职责、跟踪进度、管理变更并提供审计痕迹。 项目启动文档: 项目章程:正式授权项目启动,定义项目目标、范围、…...
ELK企业内部日志分析系统(1)
ELKKafkaFilebeat企业内部日志分析系统(1) Elasticsearch集群部署 1.部署环境 IP地址主机名配置系统版本192.168.222.129es12核4GRockyLinux192.168.222.130es22核3GRockyLinux192.168.222.131es32核3GRockyLinux 2.配置主机名解析和主机名 #关闭防火墙与selinux #更改主机…...
反序列化POP链技术详解
POP( Procedure Oriented Programming )链是反序列化安全问题中相对比较重要的技术点,相比于其他的反序列化问题,这种漏洞的产生更加难以发现,以及在利用上也比较复杂。 要掌握这个东西首先要先了解面向对象中的几个特…...
process.env.VUE_APP_BASE_API
前端:process.env.VUE_APP_BASE_API 在Vue.js项目中,特别是使用Vue CLI进行配置的项目,process.env.VUE_APP_BASE_API 是一个环境变量的引用。Vue CLI允许开发者在不同环境下配置不同的环境变量,这对于管理API基础路径、切换开发…...