利用FullCalendar做简单的日程管理，以及后台动态更新数据出现的问题。
第一：总体效果。
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：
有些是我做样式跟定格式需要的，可自行筛选。
jsp的代码如下：
initFullCalendar();
$("#Form").hide();//隐藏新增日程表单
$("#Form0").hide();//隐藏修改日程的表单
$("#Form").submit(function(e){//选择新增日程表单提交
$.ajax({
type:"post",
url:"add.action",
data:$("#Form").serialize(),
success: function(msg) {
location.reload();
/* alert(msg.start+"==="+msg.content);
var events = [];
events.push({"title":msg.content,"start":msg.start})
$('#calendar').fullCalendar('updateEvent', events); */
}
});
});
$("#Form0").submit(function(e){//修改日程的表单提交
var color = $("#color").val();
if(color == "#f2a026"){
alert("非本人日程不可编辑");
}else{
$.ajax({
type:"post",
url:"edit.action",
data:$("#Form0").serialize(),
success: function(msg) {
location.reload();
}
});
}
});
});
//初始化日程视图
function initFullCalendar(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,//可以拖动
firstDay:1,
eventLimit: true,
timeFormat: 'H:mm',
axisFormat: 'H:mm',
events:[
{
id:'${id}',title:'${title}',start:'${start}',color:'${color}',
//end:'${end}'
},
],
dayClick: function(date, allDay, jsEvent, view) { //当单击日历中的某一天时，触发callback
/* var views = $('#calendar').fullCalendar('getView'); */
console.log(date);
openLayer(date);
},
eventClick:function(event, jsEvent, view){//当点击日历中的某一日程（事件）时，触发此操作
var date = new Date(event.start).format("yyyy-MM-dd")
openEditLayer(event,date);
console.log(this);
},
eventMouseover:function (event, jsEvent, view){//鼠标划过的事件
},eventMouseout:function( event, jsEvent, view ) { //鼠标离开的事件
}
});
}
//选中事件
function changeState(dom){
if($(dom).prop("checked")){
$('#Form').parent().parent().css('height','400px');
$('#Form').parent().css('height','366px');
$("#divEndTime").show();
$('#Form0').parent().parent().css('height','400px');
$('#Form0').parent().css('height','366px');
$("#divEndTime0").show();
}else{
$('#Form').parent().parent().css('height','330px');
$('#Form').parent().css('height','296px');
$("#divEndTime").hide();
$('#Form0').parent().parent().css('height','330px');
$('#Form0').parent().css('height','296px');
$("#divEndTime0").hide();
}
}
var addIndex;
//打开新增日程表单
function openLayer(date){
$("#Form").show();
$('#Form')[0].reset();
$('#endTimeChk').prop("checked",false);
changeState('#endTimeChk');
$('#startTime').val(new Date(date).format("yyyy-MM-dd"));
addIndex=layer.open({
title : ' 新增日程',
type : 1,
fix : false,
skin : 'layui-layer-rim',
// 加上边框
area : [ '470px', '330px' ],
// 宽高
content : $('#Form')
});
}
function openEditLayer(data,date){
$("#Form0").show();
$("#sid").val(data.id);
$('#Form0')[0].reset();
$('#endTimeChk0').prop("checked",false);
changeState('#endTimeChk0');
$('#content0').val(data.title);
$('#color').val(data.color);
$('#startTime0').val(date);
/*$('#endTime').val(data.start.Format("yyyy-MM-dd hh:mm:ss")); */
/*$('#startTime').val(new Date(date).Format("yyyy-MM-dd hh:mm:ss"));*/
addIndex=layer.open({
title : ' 编辑日程',
type : 1,
fix : false,
skin : 'layui-layer-rim',
// 加上边框
area : [ '470px', '330px' ],
// 宽高
content : $('#Form0')
});
}
//关闭弹出层
function closeLayer(){
layer.close(addIndex);
}
//进入下一个月视图
function next(){
$('#calendar').fullCalendar('next');
}
function dels(){
var id=$("#sid").val();
var color=$("#color").val();
if (color=="#4d87ce") {
alert("到单消息不能删除");
closeLayer();
}else if(color=="#f2a026"){
alert("非本人日程不能删除");
closeLayer();
}else{
layer.confirm('您确定删除该日程吗?', function(){
$.ajax({//获取数据
type : "POST",
url : "delete.action",
data:{"id":id},
dataType : 'json',
success : function(data) {
closeLayer();
layer.msg("删除成功", { time : 2000});
location.reload();
$('#calendar').fullCalendar('refetchEvents');
}
});
});
}
}
function share(){
var id=$("#sid").val();
var content=$("#content0").val();
var color=$("#color").val();
var start = $("#startTime0").val();
if (color=="#4d87ce") {
alert("到单消息不能分享！");
closeLayer();
}else{
layer.open({
type: 2,
skin: 'layui-layer',
title: '分享日程',
shadeClose: true,
area: ['30%', '20%'],
content: '${ctx}/schedule/share.action?id='+id,
});
}
}
function choices(){
var id = $("#sid").val;
layer.open({
type: 2,
skin: 'layui-layer-molv',
title: '选择显示',
shadeClose: true,
area: ['15%', '50%'],
content: '${ctx}/schedule/choices.action',
});
}
function shareEnd(){
location.reload();
}```