使用的fullcalendar版本是2.7.0, 用到的插件有jquery-ui、bootstrap、jquery、moment.js、WdatePicker.js
<link rel='stylesheet' href='../lib/cupertino/jquery-ui.min.css' /> <link href='../lib/bootstrap.min.css' rel='stylesheet' /> <link href='../fullcalendar.css' rel='stylesheet' /> <link href='../fullcalendar.print.css' rel='stylesheet' media='print' /> <script src='../lib/jquery.min.js'></script> <script src='../lib/jquery-ui.custom.min.js'></script> <script src='../lib/moment.min.js'></script> <script src='../lib/DatePicker/WdatePicker.js'></script> <script src='../lib/bootstrap.min.js'></script> <script src='../fullcalendar.min.js'></script> <script src='../lang-all.js'></script> 页面代码如下：第一个div用来初始化日历，第二个div为bootstrap模态框，用来新增、修改、查看日程。 </head> <body> <div id='calendar'></div> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content" style="width:800px;margin:0 auto;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">添加</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="TITLE">标题</label> <input type="text" name="TITLE" class="form-control" id="TITLE" placeholder="标题"> </div> <div class="form-group"> <label for="GZ">工作安排</label> <input type="text" name="GZ" class="form-control" id="GZ" placeholder="工作安排"> </div> <input type="hidden" id="sday" /> <div class="form-group "> <label>开始时间:</label> <input type="text" id="STARTDATE" class="form-control" placeholder="日期" onclick="WdatePicker({el:'STARTDATE',vel:'sday',dateFmt:'yyyy-MM-dd HH:mm:ss',isShowWeek:true})" /> </div> <input type="hidden" id="eday" /> <div class="form-group "> <label>结束时间:</label> <input type="text" id="ENDDATE" class="form-control" placeholder="日期" onclick="WdatePicker({el:'ENDDATE',vel:'eday',dateFmt:'yyyy-MM-dd HH:mm:ss',isShowWeek:true})" /> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" id="commit" onclick="commit()" class="btn btn-primary">保存</button> <button type="button" id="delete" onclick="dele()" class="btn btn-danger">删除</button> </div> </div> </div> </div> </body> </html> 这部分为页面加载完成后，初始化日历。 theme是设置页面主题的，需引用jquery-ui.js。defaultDate默认日期为当天。events获取数据库中日历数据，可根据start和end作为查询条件获取本月的数据。后台返回数据后，for循环push到定义好的数组中，其中title和start是必须要有的。最后调用callback回调函数。 $(document).ready(function() { $('#calendar').fullCalendar({ theme: true, header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: new Date(),//当前日期 lang: 'zh-cn', editable: true, eventLimit: true, // allow "more" link when too many events events: function(start,end,timezone,callback){ $.ajax({ type : 'get', dataType : 'json', url: 'fullcalendar.jsp', data: { type: 'select', start: start.format('YYYY-MM-DD'), end: end.format('YYYY-MM-DD'), t:Math.random() }, success : function(rs) { var events = []; if (rs.appcode === 0) { alert(rs.appmsg); } else { if(rs.data){ for(var i=0; i<rs.data.length; i++){ events.push({ id: rs.data[i].id, title: rs.data[i].title, start: rs.data[i].start, end: rs.data[i].end, description: rs.data[i].description }) } callback(events); } } } }); }, }); }); dayClick事件是点击日历事件，可在这进行新增日程。点击之后弹出模态框，并把输入框的内容清空、删除按钮隐藏。接着输入数据，点击保存后插入数据库中。 //新增 dayClick: function(date, allDay, jsEvent, view) { var d = new Date(); if(d.format('yyyy-MM-dd')<=date.format('YYYY-MM-DD')){ OBJ_ID = ''; $("#myModalLabel").html('新增日程'); $("#GZ").val(''); $("#STARTDATE").val(''); $("#ENDDATE").val(''); $("#TITLE").val(''); var selectdate = getStartTime(date.format("YYYY-MM-DD hh:mm:ss")); $("#STARTDATE").val(selectdate); $('#sday').val(selectdate), $("#myModal").modal("show");//弹出模态框 $("#commit").attr('class','btn btn-primary'); $("#delete").attr('class','hidden'); } }, eventClick事件是点击日程数据事件，可用来查看、修改、删除数据。点击之后弹出模态框，根据id去数据库中查出数据并显示。当前日期前的数据只能修改，之后的数据既可以修改也可以删除。 //查看，修改 eventClick: function(event){ OBJ_ID = event.id; $.ajax({ type : 'get', dataType : 'json', url: 'fullcalendar.jsp', data: { type: 'edit', OBJ_ID: OBJ_ID, t:Math.random() }, success : function(rs) { var events = []; if (rs.appcode === 0) { alert(rs.appmsg); } else { if(rs.data){ $("#GZ").val(rs.data.GZ); $("#STARTDATE").val(rs.data.STARTDATE); $("#sday").val(rs.data.STARTDATE); $("#ENDDATE").val(rs.data.ENDDATE); $("#eday").val(rs.data.ENDDATE); $("#TITLE").val(rs.data.TITLE); } } } }); $("#myModal").modal("show"); $("#myModalLabel").html('修改日程'); var d = new Date(); if(d.format('yyyy-MM-dd')>event.start.format('YYYY-MM-DD')){ $("#delete").attr('class','hidden'); }else{ $("#delete").attr('class','btn btn-danger'); } }, eventMouseover事件是当鼠标移动到日程上触发的事件，可添加title属性，鼠标移上去时显示时间、标题、内容。 //鼠标移动事件 eventMouseover: function(calEvent,jsEvent,view){ var sdate = calEvent.start.format('YYYY-MM-DD HH:mm'); var edate = ''; if(calEvent.end!=null && calEvent.end!=''){ edate = calEvent.end.format('YYYY-MM-DD HH:mm'); $(this).attr('title',sdate+"至"+edate+" "+calEvent.title+":"+calEvent.description); }else{ $(this).attr('title',sdate+" "+calEvent.title+":"+calEvent.description); } } 新增和修改是根据有无id来判断的，有id就执行修改方法，无id就执行新增方法。 function btn(type,title){ var sday = $('#sday').val(); var eday = $('#eday').val(); var TITLE = $('#TITLE').val(); var GZ = $('#GZ').val(); if(TITLE=="" || TITLE==null){ alert("标题不能为空"); return; } if(GZ=="" || GZ==null){ alert("工作内容不能为空"); return; } if(sday=="" || sday==null){ alert("开始日期不能为空"); return; } if(sday!="" && eday!=""){ if(sday.replace(/\-/g,"")>eday.replace(/\-/g,"")){ alert("结束日期不能小于开始日期"); return; } } $.ajax({ type : 'get', dataType : 'json', url: 'fullcalendar.jsp', data: { type: type, OBJ_ID: OBJ_ID, GZ: $('#GZ').val(), STARTDATE: $('#sday').val(), ENDDATE: $('#eday').val(), TITLE: $('#TITLE').val(), t:Math.random() }, success : function(rs) { var events = []; if (rs.appcode === 0) {//失败 alert(rs.appmsg); } else {//成功 $("#myModal").modal("hide"); $('#calendar').fullCalendar("refetchEvents");//刷新页面 } } }); } function commit(){ if(OBJ_ID != null && OBJ_ID != ''){ btn('update','修改成功'); }else{ btn('commit','提交成功'); } } 删除是根据id来进行删除 function dele(){ $.ajax({ type : 'get', dataType : 'json', url: 'fullcalendar.jsp', data: { type: 'delete', OBJ_ID: OBJ_ID, t:Math.random() }, success : function(rs) { var events = []; if (rs.appcode === 0) {//失败 alert(rs.appmsg); } else {//成功 $("#myModal").modal("hide"); $('#calendar').fullCalendar("refetchEvents");//刷新页面 } } }); }代码下载地址：https://download.csdn.net/download/qq_41403242/12816202
