利用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：
有些是我做样式跟定格式需要的，可自行筛选。

<link href="${ctx}/css/fullcalendar.min.css" type="text/css" rel="stylesheet" />
<link href="${ctx}/css/fullcalendar.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="${ctx}/layui/css/layui.css"><script src="${ctx}/js/jquery.js" type="text/javascript"></script><script src="${ctx}/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script><script src="${ctx}/js/jquery.validate.min.js" type="text/javascript"></script><script src="${ctx}/js/DateUtils.js" type="text/javascript"></script><script src="${ctx}/layui/layui.js"></script><script src="${ctx}/js/layer/layer.js"></script><script src="${ctx}/fullCalendar/moment.min.js" type="text/javascript"></script><script src="${ctx}/fullCalendar/fullcalendar.min.js" type="text/javascript"></script><script src="${ctx}/fullCalendar/zh-cn.js" type="text/javascript"></script><script src="${ctx}/js/DatePicker/WdatePicker.js" type="text/javascript"></script>

jsp的<script></script>代码如下：

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:[<s:iterator value="#request['schedulelist']">{id:'${id}',title:'${title}',start:'${start}',color:'${color}',//end:'${end}'  },</s:iterator>],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 : '<i class="fa fa-plus"></i>&nbsp;新增日程',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 : '<i class="fa fa-plus"></i>&nbsp;编辑日程',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();}```

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

Android 数据存储利用SQLiteDatabase实现简单的学生管理
转载请注明出处:明桑Android 这是作为上一篇Android 数据存储如何搞定SQLite Database的实例练习,之所以单独列出来是因为除了数据库方面的知识,还涉及其它方面的知识,所以就写 ...
Revit二次开发高级应用（1）——利用wcf做简单的族库管理
因为对应用场景不是特别明确,暂时就用wcf做一个可以上传和下载的功能来管理族库. 1.用WCF做服务端的上传下载管理首先添加上传下载的接口: [ServiceContract]public inte ...
利用Python做简单的数据可视化2【二手房数据】
1.读入数据 import matplotlib.pyplot as plt import seaborn as sns import numpy as np import pandas as pd ...
利用css做三线表格,如何快速制作三线表格式数据
在做论文分析时,多少会用到一些表格辅助,论文中最常见的就是三线表. 但这时大家一定会有这样的苦恼:"软件输出的格式和论文要求格式完全不一样!还得自己整理!好麻烦!" 为科(bi)研 ...
前端项目，看我在这里管理全局后台初始化的数据，就问你飒不飒？
echarts简单使用、echarts通过计时器进行动态更新数据、echarts连接数据库实时更新数据
1.echarts引入在官网下载并放入项目中. 引入echarts.js文件: <script src="./echarts.js"></script> ...
FullCalendar（日程管理控件）
(以下是我学习FullCalendar控件时,网络上收集的一些资料) 第一部分(官方资料) jQuery.fullCalendar官方网址: http://arshaw.com/fullcalenda ...
基于LayUI使用FullCalendar实现日程管理
引言最新工作中需要实现日程管理功能,由于技术选型(基于layui)限制,从网上对比查询最终选定使用FullCalendar插件来实现日程管理. 其中对比的日程还有XgCalendar.Google ...
python项目源码日程管理_基于fullcalendar制作的日程管理小demo
一.项目地址: 二.项目功能概述: 该项目是基于fullcalendar而制作的日程管理,fullcalendar是一个基于jquery的日历插件,在该项目中,我们可以在日历上编辑我们的日程,并将日程 ...

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

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

最新文章

热门文章