利用FullCalendar做简单的日程管理,以及后台动态更新数据出现的问题。

本文介绍了如何利用FullCalendar 3.0.0版本创建一个简单日程管理系统,包括日程添加、修改、删除和分享功能。在实现过程中遇到的问题,如版本更新适应、动态数据更新的挑战,以及解决办法。此外,还分享了上级查看下级日程的实现方式,并提供了代码引入和部分JSP代码片段。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

第一:总体效果。
1、初始化日历:在这里插入图片描述
2、点击某一天可以添加日程:
在这里插入图片描述
3、点击已添加的日程可以进行修改、删除、分享:
在这里插入图片描述
4、点击分享,可以选择系统内的人员进行日程的分享:
在这里插入图片描述
5、如果是上级,可以通过日历左上角的选择,来选择查看自己下级的人员的日程安排和业绩查看:(右上角的颜色用来标识那个颜色代表谁的日程,客户信息需要打码嘻嘻)
在这里插入图片描述
第二:过程中出现的问题与代码实现。(代码太多了有点乱)
1、过程中出现的问题:
(1)版本更新使用问题:刚开始看了网上的例子,跟参考了官方的demo,发现最新版的FullCalendar使用方法更以前的不一样,最新版的初始化就不是$('#calendar').fullCalendar({})这个用法,结果捣鼓了半天,还是决定用旧版的,我使用的是3.0.0的FullCalendar。
(2)在想使用Ajax动态返回数据的时候,居然不能用$ (’#calendar’).fullCalendar(‘updateEvent’, events);去更新日历表里的日程数据,这个问题困扰了我好多天,至今不知道问题出现在哪,最后只能是用最初始的方法,重新把页面刷新。因为初始化的时候我就已经把数据库的数据遍历了一遍,当$ (’#calendar’).fullCalendar(‘updateEvent’, events);不能用时,我只能再更新一遍页面的数据,就能实现了,虽然是最笨的也是最烦杂的方法,但是还是实现了添加日程与更改日程的功能。
(3)由于新增日程跟修改日程需要用到两个表单,所以我只能把他们隐藏了,需要的时候再显示,所以刚进页面的时候就会有两个表单被加载,这也是我觉得很别扭的地方,但是为了在规定时间内完成任务,只能先这么做了。
(4)关于上级查看下级的日程与业绩显示,只需要把需要的数据放到日历初始化的list里面,就可以得到想要看到的人的日程安排与业绩显示。
(5)关于把日程分享给其他人,就跟新增日程差不多,只要获取到想分享的那个人的id就可以往数据表里给他加日程了。
(6)如果想用的是中文版的,加入zh-cn.js即可。

2、代码实现:
需要引入的js,css:
有些是我做样式跟定格式需要的,可自行筛选。

<link href="${ctx}/css/fullca
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值