Fullcalendar

news/2024/12/4 19:17:19/文章来源:https://www.cnblogs.com/feiwenstyle/p/18524257

月光光

 

使用Fullcalendar管理时间计划调度安排

头像
月光光
 
2020-01-05
阅读 4 分钟
 

Fullcalendar可以很好的管理日程安排事件,可以管理时间和任务调度,比如日常值班岗位安排、举办活动会议议程安排、项目行动安排、车间劳动岗位排班等等。今天我们来了解一下使用Fullcalendar(v4),完成一个基于时间的行动任务调度,先看演示DEMO。

【查看演示】

准备

我们这个例子基于Vue2和Fullcalendar4,因此你先可以了解本站文章:在Vue框架下使用Fullcalendar,或者到官网:https://fullcalendar.io/了解有关Fullcalendar的更多详情。

我们在本例中用到了事件调度插件:timeline,因此先安装好相关插件:

npm install --save @fullcalendar/core 
npm install --save @fullcalendar/resource-timeline 
npm install --save @fullcalendar/timeline

使用

我们先新建timeline.vue组件文件,添加组件代码:

<FullCalendar defaultView="resourceTimeline" locale="zh-cn" weekNumberCalculation="ISO" showNonCurrentDates="false":schedulerLicenseKey="licenseKey":slotLabelFormat="slotLabelFormat":eventTimeFormat="evnetTime":header="header":aspectRatio="aspectRatio":plugins="calendarPlugins"resourceAreaWidth="20%"resourceLabelText="项目":resources="resources":events="calendarEvents"/>

接着在<script>先导入组件插件以及相关css文件。

Fullcalendar的日程调度timeline插件属于增值功能,意思是属于高级功能要貌似要收费,但是用户可以将该插件用在非营利性项目中。使用timeline插件默认会在页面左下角有版权信息,但是我们可以将一个参数schedulerLicenseKey的值设置为'GPL-My-Project-Is-Open-Source'就可隐藏左下角的版权内容。

<script>
import FullCalendar from '@fullcalendar/vue'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import '@fullcalendar/core/main.css';
import '@fullcalendar/timeline/main.css'
import '@fullcalendar/resource-timeline/main.css'export default {components: {FullCalendar},data() {return {licenseKey: 'GPL-My-Project-Is-Open-Source',calendarPlugins: [ resourceTimelinePlugin],aspectRatio: 2.4,header: {left: 'prev',center: 'title',right: 'next'},evnetTime: {hour: 'numeric',minute: '2-digit',hour12: false},slotLabelFormat: {hour: 'numeric',minute: '2-digit',hour12: false},resources: [{id: 1,eventColor: 'green',title: '侦查组'},{id: 2,eventColor: '#369',title: '抓捕组'},{id: 3,title: '警戒组'},{id: 4,eventColor: '#f60',title: '机动组'},{id: 5,eventColor: '#e90',title: '取证组'},{id: 6,eventColor: '#360',title: '审查组'}],calendarEvents: {url: 'timeline.php'}}},mounted() {},created() {},methods: {//}
}
</script>

我们看DEMO,本例是展示一个警方的破案行动计划,在计划调度表中左侧是行动分组,右侧是每个分组对应的职责和在时间范围内要做的事情。

data部分,通过:resources可以设置调度表左侧部分,内容是一个数组,我们也可以异步请求后台一个数据源,返回json格式数据即可。

events:事件数据。我们一般异步请求后台url,如url: 'timeline.php',将返回json格式的数据源,Fullcalendar会直接将这些数据渲染到界面上。

后端timeline.php

我们后端使用PHP提供数据接口,本例只是演示,没有用到数据库。实际项目中,应该使用PHP或Python等后端语言操作数据库,为Fullcalendar提示数据源。

$data = ['0' => ['resourceId' => 1,'title' => '前期侦查','start' => date('Y-m-d 00:30:00'),'end' => date('Y-m-d 09:00:00')],'1' => ['resourceId' => 2,'title' => '雷霆抓捕行动','start' => date('Y-m-d 06:00:00'),'end' => date('Y-m-d 10:00:00')],'2' => ['resourceId' => 3,'title' => '负责区域警戒安防','start' => date('Y-m-d 05:00:00'),'end' => date('Y-m-d 18:00:00')],'3' => ['resourceId' => 4,'title' => '机动特别组,随时待命','start' => date('Y-m-d 05:00:00'),'end' => date('Y-m-d 12:00:00')],'4' => ['resourceId' => 5,'title' => '抓捕行动结束后现场取证','start' => date('Y-m-d 10:00:00'),'end' => date('Y-m-d 18:00:00')],'5' => ['resourceId' => 6,'title' => '提审嫌疑人','start' => date('Y-m-d 15:00:00'),'end' => date('Y-m-d 23:00:00')]
];
echo json_encode($data);

注意,在后端返回的数据列表中,resourceId要和Fullcalendar的resources中的id值对应。

保存,运行项目你将可以看到Demo中的效果。

fullcalendarvue.js
阅读 5.5k发布于 2020-01-05
 

头像
月光光
133 声望8 粉丝
 

« 上一篇
使用Fullcalendar管理日程事件(增删改查拖放)
万维广告联盟
🔥码云GVP开源项目 12k star Uniapp + ElementUI 功能强大 支持多语言、二开方便!广告

引用和评论

被 3 篇内容引用
  • 头像
    fullcalendar的timeline组件放到页面上,左下角总是有一个‘Your license key is invalid. More info’,怎样把它消除?
  • 头像
    在Vue框架下使用Fullcalendar
    2
  • 头像
    使用Fullcalendar管理日程事件(增删改查拖放)
    2
推荐阅读
头像
前端开发工具

寒青赞 15阅读 4.1k

头像
开发插件集合

寒青赞 11阅读 2.8k

头像
Vue.js-方法与事件

寒青赞 6阅读 3k

头像
Vue 项目推荐使用这个图标库 vue-icons-plus

破晓L赞 4阅读 1.6k评论 3

头像
从零开始搭建 Vue3 组件库开发环境

zxl20070701赞 2阅读 594

头像
electron开发采坑小记

aqiongbei赞 3阅读 7.8k评论 2

头像
这个前端神器,竟让滴滴、美团都爱不释手?!

白水赞 4阅读 225评论 1

1 条评论
得票最新
头像
 
评论支持部分 Markdown 语法:**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用 来通知其他用户。
头像
425824365:

大佬 event这里每一行的高度怎么自适应占满呢? 左侧用了expandRows

2021-08-01
©2024 月光光
除特别声明外,作品采用《署名-非商业性使用-禁止演绎 4.0 国际》进行许可
使用 SegmentFault 发布
SegmentFault - 凝聚集体智慧,推动技术进步
服务协议隐私政策浙ICP备15005796号-2浙公网安备33010602002000号
 

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

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

相关文章

哈希函数与数据完整性 (^=◕ᴥ◕=^)

哈希函数与数据完整性:保护猫咪世界的小鱼干 (^=◕ᴥ◕=^) 在数字世界中,我们总是希望确保传输和存储的数据没有被篡改,就像猫咪们想保护它们珍贵的小鱼干不被“偷吃”一样。为此,哈希函数(Hash Functions)成为了一个强大而可靠的工具。哈希函数能生成独特的数据“指纹”…

学期 2024-2025-1 学号 20241403 《计算机基础与程序设计》第六周学习总结

学期(如2024-2025-1) 学号(如:20241403) 《计算机基础与程序设计》第六周学习总结 作业信息这个作业属于哪个课程 <班级的链接>(如2024-2025-1-计算机基础与程序设计)这个作业要求在哪里 <作业要求的链接>(如2024-2025-1计算机基础与程序设计第一周作业)这个…

2024 强网杯逆向 Writeups

最心有余而力不足的一集,做完 vm 颈椎病犯了,第二天根本打。最后,加上学弟学妹打的,最后剩一个 Android 逆向没 AK,要是没有颈椎病这一说肯定 AK 了。感觉快退役了... mips 编译一个 qemu-6.2.0 mips-linux-user bindiff 一下恢复符号,怀疑修改了 ELF loader 或者 syscal…

坐标系-投影

墨卡托投影墨卡托投影(Mercator Projection),是正轴等角圆柱投影。由荷兰地图学家墨卡托(G.Mercator)于1569年创立。假设地球被围在一中空的圆柱里,其基准纬线与圆柱相切(赤道)接触,然后再假想地球中心有一盏灯,把球面上的图形投影到圆柱体上,再把圆柱体展开,这就是一…

蚂蚁KAG框架核心功能研读

首篇KAG框架解读,看蚂蚁KAG框架如何通过知识图谱和向量检索结合,增强大模型在专业领域知识服务中的准确性和逻辑推理能力,解决现有RAG技术栈的挑战。作者介绍:薛明:拥有近10年在医疗和零售领域应用机器学习和人工智能的经验。曾就职于通用电气、复星医药等企业。长期专注于…

Burpsuite下载安装超详细教程,社区版永久有效,专业版汉化激活到2099年,不看会后悔系列,亲测好用!

声明:该公众号大部分文章来自作者日常学习笔记,也有部分文章是经过作者授权和其他公众号白名单转载. 未经授权,严禁转载,如需转,联系开白, 请勿利用文章内的相关技术从事非法测试,如因此产生的一切不良后果与文章作者和本公众号无关.现在只对常读和星标的公众号才展示大图推送…

非对称加密:猫咪的双钥匙保护 (^• ω •^)

非对称加密:猫咪的双钥匙保护 (^• ω •^) 在之前的博客中,我们讨论了对称加密算法。这种算法使用单一密钥对数据进行加密和解密,但这也带来了一些问题,例如密钥分发和共享的安全风险。为了解决这些问题,非对称加密(Asymmetric Encryption)应运而生。 非对称加密采用…

2024.10.28(商品品牌的增删改查)

按着ALt按左键整体编辑查询功能

【shell脚本】将Shell脚本转换为Systemd服务:轻松实现自动化管理

原创 青菜浪人背景介绍 从 Ubuntu 17.10 开始,/etc/rc.local 文件不再默认存在于系统中,因为 systemd 已成为主要的初始化系统。如果需要在系统启动时自动执行某些命令,可以通过编写 Shell 脚本并将其封装为一个 systemd 服务来实现这一操作。 实现方法 这里以一个简单的脚本…

学期2024-2025-1 学号20241424 《计算机基础与程序设计》第7周学习总结

学期2024-2025-1 学号20241424 《计算机基础与程序设计》第7周学习总结 作业信息 |这个作业属于2024-2025-1-计算机基础与程序设计)| |-- |-- | |这个作业要求在哪里|https://www.cnblogs.com/rocedu/p/9577842.html#WEEK01| |这个作业的目标|参考上面的学习总结模板,把学习过…

鸿蒙开发案例:直尺

【1】引言(完整代码在最后面) 本文将通过一个具体的案例——创建一个横屏显示的直尺应用,来引导读者了解鸿蒙应用开发的基本流程和技术要点。 【2】环境准备 电脑系统:windows 10 开发工具:DevEco Studio NEXT Beta1 Build Version: 5.0.3.806 工程版本:API 12 真机:Mat…

2024-三叶草安全技术小组第十五届极客大挑战 wp

Crypto 1.凯撒加密 YEI{CKRIUSK_ZU_2024_MKKQ_INGRRKTMK} 6位 SYC{WELCOME_TO_2024_GEEK_CHALLENGE} 2.RSA 原文: from Crypto.Util.number import bytes_to_long, getPrime from secret import flag p = getPrime(128) q = getPrime(128) n = p*q e = 65537 m = bytes_to_lon…