第一:总体效果。
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