fullcalendar是个很强大的日历控件,可以用它进行排班、排会议、拍任务,很直观,用户体验良好。
看下效果图:
#parse("index/head.vm") <link rel="stylesheet" href="$!{rc.contextPath}/modules/devappwithfullcanlendar/css/mainstructure.css"> <link rel="stylesheet" href="$!{rc.contextPath}/modules/devappwithfullcanlendar/css/maincontent.css"> <script type="text/javascript" src="$!{rc.contextPath}/modules/devappwithfullcanlendar/js/jquery-1.4.2.min.js">script> <script type="text/javascript" src="$!{rc.contextPath}/modules/devappwithfullcanlendar/js/jquery-ui-1.8.6.custom.min.js">script> <script type="text/javascript" src="$!{rc.contextPath}/modules/devappwithfullcanlendar/js/jquery-ui-timepicker-addon.js">script> <link rel="stylesheet" href="$!{rc.contextPath}/modules/devappwithfullcanlendar/css/redmond/jquery-ui-1.8.1.custom.css"> <script src="$!{rc.contextPath}/modules/devappwithfullcanlendar/js/formValidator/js/jquery.validationEngine.js" type="text/javascript">script> <script src="$!{rc.contextPath}/modules/devappwithfullcanlendar/js/formValidator/js/jquery.validationEngine-en.js" type="text/javascript">script> <link rel="stylesheet" href="$!{rc.contextPath}/modules/devappwithfullcanlendar/js/formValidator/css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" /> <link rel='stylesheet' type='text/css' href='$!{rc.contextPath}/modules/devappwithfullcanlendar/js/fullcal/css/fullcalendar.css' /> <script type='text/javascript' src='$!{rc.contextPath}/modules/devappwithfullcanlendar/js/fullcal/fullcalendar.js'>script> <BODY> <STYLE type=text/css>#loading { TOP: 0px; RIGHT: 0px } .tooltip { PADDING-BOTTOM: 25px; PADDING-LEFT: 25px; WIDTH: 160px; PADDING-RIGHT: 25px; DISPLAY: none; BACKGROUND: url(images/black_arrow.png); HEIGHT: 70px; COLOR: #fff; FONT-SIZE: 12px; PADDING-TOP: 25px; z-order: 100 } STYLE> <DIV id=wrap> <SCRIPT type=text/javascript> $(document).ready(function() { $("#groupName").click(function(){ dialog({ content: 'url:$!{rc.contextPath}/duty/dutyGroup/lookup?txtId=groupId&txtName=groupName&from=canlendar', zIndex:20000, title: '选择', lock: false, width: 300, height: 300, }); }); $("#reserveformID").validationEngine({ validationEventTriggers:"keyup blur", // 键盘按键触发验证 openDebug: true }) ; $("#addhelper").hide(); var calendar =$('#calendar').fullCalendar({ header:{ right: 'prev,next today', center: 'title', left: 'month,agendaWeek,agendaDay' }, monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], today: ["今天"], firstDay: 1, buttonText: { today: '今天', month: '月', week: '周', day: '日', prev: '上一月', next: '下一月' }, theme: true, editable: false,//日历项拖拽 allDaySlot : false, events: function(start, end , callback){//生成日历 //alert(calendar.fullCalendar('getDate')); var events = []; $.ajax({ 'url':"$!{rc.contextPath}/duty/dutyScheduling/canlendarModel?time="+new Date().getTime(), 'data': { timeStart:$.fullCalendar.formatDate(start,"yyyy-MM-dd HH:mm:ss"), timeEnd:$.fullCalendar.formatDate(end,"yyyy-MM-dd HH:mm:ss") }, 'dataType': 'json', 'type': 'post', 'error': function(data){ alert("保存失败"); return false; }, 'success': function(doc) { $(doc).each(function(i) { events.push({ sid: doc[i].id, uid: doc[i].id, title: 'Daily Scrum meeting', start: doc[i].startTime, end: doc[i].endTime, fullname: doc[i].groupName,// 此处改变,列表和明细都会改变 confname: doc[i].orderName, groupPersons: doc[i].personNames, confshortname: doc[i].orderName.substring(0, 1), confcolor: '#ff3f3f', confid: 'test1', allDay: false, topic: doc[i].orderName, description : doc[i].remark, id: 1 }); }); callback(events);// } }); }, dayClick: function(date, allDay, jsEvent, view) {// 单机日历内空白 新增事件 var selectdate = $.fullCalendar.formatDate(date, "yyyy-MM-dd"); $( "#dutyDate" ).val(selectdate); // dutyDate $( "#reservebox" ).dialog({ autoOpen: false, height: 450, width: 400, title: '新增排班' + selectdate ,// 此处声明title,会将reservebox中的title属性覆盖 modal: true, position: "center", draggable: true,// 可拖拽 beforeClose: function(event, ui) { $.validationEngine.closePrompt("#orderId"); $.validationEngine.closePrompt("#groupId"); $.validationEngine.closePrompt("#groupName"); }, buttons: {// 弹出窗右下角的按钮 "关 闭": function() { $( this ).dialog( "close" ); }, "保 存": function() { if($("#reserveformID").validationEngine({returnIsValid:true})){ var orderId = $("#orderId").val(); var dutyDate = $("#dutyDate").val(); var groupId = $("#groupId").val(); var groupName = $("#groupName").val(); var remark = $("#remark").val(); var schdata = {orderId:orderId, dutyDate:dutyDate, groupId:groupId, groupName:groupName,remark:remark}; $.ajax({ 'url':"$!{rc.contextPath}/duty/dutyScheduling/save?time="+new Date().getTime(), 'data': schdata, 'dataType': 'json', 'type': 'post', 'error': function(data){ alert("保存失败"); return false; }, 'success': function(data) { window.location.reload(); } }); } } } }); $( "#reservebox" ).dialog( "open" ); return false; }, timeFormat: 'HH:mm{ - HH:mm}', eventClick: function(event) {// 单机日历内已有事件 var tempStart = $.fullCalendar.formatDate(event.start, "yyyy/MM/dd"); var tempEnd = $.fullCalendar.formatDate(event.end, "yyyy/MM/dd"); if(tempStart==tempEnd){//若在同一天,结束日期省略 var fstart = $.fullCalendar.formatDate(event.start, "yyyy/MM/dd HH:mm"); var fend = $.fullCalendar.formatDate(event.end, "HH:mm"); }else{ var fstart = $.fullCalendar.formatDate(event.start, "yyyy/MM/dd HH:mm"); var fend = $.fullCalendar.formatDate(event.end, "yyyy/MM/dd HH:mm"); } var schdata = {sid:event.sid, deleted:1, uid:event.uid}; $( "#reserveinfo" ).dialog({ autoOpen: false, height: 280, width: 400, modal: true, position: "center", draggable: true, buttons: {// 这里貌似不可以自定义添加其他按钮 "close": function() { $( this ).dialog( "close" ); } } }); if(1==1||2==schdata.uid){ $("#reserveinfo").dialog("option", "buttons", { "关闭": function() { $( this ).dialog( "close" ); } }); } var showtopic = ''; if(event.topic.length>15){// 题目过长处理 showtopic = event.topic.substring(0, 15) + '...'; }else{ showtopic = event.topic; } //明细弹出窗 描述 $("#revdesc").html(''+showtopic+'' +''+"宋体"+'; line-height:28px;">
'); $( "#reserveinfo" ).dialog( { title: fstart + "-" + fend + " " + showtopic } ); $( "#reserveinfo" ).dialog( "open" ); return false; }, loading: function(bool) { if (bool) $('#loading').show(); else $('#loading').hide(); }, eventMouseover: function(calEvent, jsEvent, view) { var fstart = $.fullCalendar.formatDate(calEvent.start, "yyyy/MM/dd HH:mm"); var fend = $.fullCalendar.formatDate(calEvent.end, "HH:mm"); $(this).attr('title', fstart + " - " + fend + " " + calEvent.topic + " : " + calEvent.description); $(this).css('font-weight', 'normal'); $(this).tooltip({ effect:'toggle', cancelDefault: true }); }, eventMouseout: function(calEvent, jsEvent, view) { $(this).css('font-weight', 'normal'); }, eventRender: function(event, element) { var fstart = $.fullCalendar.formatDate(event.start, "HH:mm"); var fend = $.fullCalendar.formatDate(event.end, "HH:mm"); // Bug in IE8 // element.html('' + fstart + "-" + fend + '' +' ' +' ' +''+event.confshortname +' '+event.confname+'值班'+event.fullname +'' +' '+'值班人员'+' '+event.groupPersons+' ' +' '+'值班备注'+' // style=color:#E5E5E5>' + event.title + ""); }, eventAfterRender : function(event, element, view) { // alert($.fullCalendar.formatDate($('#calendar').fullCalendar('getView').start,"yyyy-MM-dd"),); var fstart = $.fullCalendar.formatDate(event.start, "HH:mm"); var fend = $.fullCalendar.formatDate(event.end, "HH:mm"); // element.html('Time: ' + fstart + "-" + fend + // 'Room:' + event.confname + '// style=color:#E5E5E5>Host:' + event.fullname + ""); var confbg=''; if(event.confid==1){ confbg = confbg + '什么?'; }else if(event.confid==2){ confbg = confbg + '什么?'; }else if(event.confid==3){ confbg = confbg + '什么?'; }else if(event.confid==4){ confbg = confbg + '什么?'; }else if(event.confid==5){ confbg = confbg + '什么?'; }else if(event.confid==6){ confbg = confbg + '什么?'; }else{ confbg = confbg + '什么?'; } var titlebg = ''+ event.confcolor +'">' + event.confshortname + ''; // if(event.repweeks>0){ // titlebg = titlebg + ' // style="background:#fff;top:0;right:15;color:#3974BC;font-weight:bold">R'; // } if(view.name=="month"){ var evtcontent = ''; element.html(evtcontent); }else if(view.name=="agendaWeek"){ var evtcontent = ''; evtcontent = evtcontent + confbg; evtcontent = evtcontent + '' + fstart + "-" + fend + titlebg + ''; evtcontent = evtcontent + '' + event.confname + ' by ' + event.fullname + ''; // evtcontent = evtcontent + '' + event.fullname + ''; evtcontent = evtcontent + ''; element.html(evtcontent); }else if(view.name=="agendaDay"){ var evtcontent = ''; evtcontent = evtcontent + confbg; evtcontent = evtcontent + '' + fstart + " - " + fend + titlebg + ''; evtcontent = evtcontent + '班次: ' + event.confname + ''; evtcontent = evtcontent + '班组: ' + event.fullname + ''; evtcontent = evtcontent + '组员: ' + event.groupPersons + ''; evtcontent = evtcontent + ''; element.html(evtcontent); } }, eventDragStart: function( event, jsEvent, ui, view ) { ui.helper.draggable("option", "revert", true); }, eventDragStop: function( event, jsEvent, ui, view ) { }, eventDrop: function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { if(1==1||2==event.uid){ var schdata = {startdate:event.start, enddate:event.end, confid:event.confid, sid:event.sid}; }else{ revertFunc(); } }, eventResizeStart: function( event, jsEvent, ui, view ) { alert('开始调整大小'); }, eventResize: function(event,dayDelta,minuteDelta,revertFunc) { if(1==1||2==event.uid){ var schdata = {startdate:event.start, enddate:event.end, confid:event.confid, sid:event.sid}; }else{ revertFunc(); } } }); // goto date function if($.browser.msie){// 转到某一日 $("#calendar .fc-header-right table td:eq(0)").before('' +' ' +'' +' '); }else{ $("#calendar .fc-header-right table td:eq(0)").before(' ' +' ' +'' +' '); } $("#selecteddate").datepicker({ dateFormat:'yy-mm-dd', beforeShow: function (input, instant) { setTimeout( function () { $('#ui-datepicker-div').css("z-index", 15); }, 100 ); } }); $("#selectdate").click(function() { var selectdstr = $("#selecteddate").val(); var selectdate = $.fullCalendar.parseDate(selectdstr, "yyyy-mm-dd"); alert(selectdate.getFullYear()+"年"+selectdate.getMonth()+"月"+selectdate.getDate()+"日"); var now = new Date(); alert(now.getFullYear()+"年"+now.getMonth()+"月"+now.getDate()+"日");//月份0开始 $('#calendar').fullCalendar( 'gotoDate', selectdate.getFullYear(), selectdate.getMonth(), selectdate.getDate()); }); //var view = $('#calendar').fullCalendar('getView'); //alert("The view's title is " + view.title); }); SCRIPT> <DIV id=calendar>DIV> <DIV id=reserveinfo title=Details> <DIV id=revtitle>DIV> <DIV id=revdesc>DIV>DIV> <DIV style="DISPLAY: none" id=reservebox> <FORM id="reserveformID" action="$!{rc.contextPath}/duty/dutyScheduling/save"> <DIV class=sysdesc> DIV> <DIV class=rowElem><LABEL>日期:LABEL> <input type="text" id="dutyDate" name="dutyDate" class="ui-input Wdate validate[required]" readonly="readonly" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" value="$!{dutyScheduling.dutyDate}" size=22 /> DIV> <DIV class=rowElem><LABEL>班次:LABEL> <select name="orderId" id="orderId" class=validate[required]> <option value="">请选择班次option> #foreach($!list in $!listDutyOrder) <option value="$!{list.id}">$!{list.orderName}option> #end select> DIV> <DIV class=rowElem><LABEL>班组:LABEL> <input class="ui-input" type="hidden" readonly="readonly" id="groupId" name="groupId" value="$!{dutyScheduling.groupId}" /> <input class="ui-input validate[required]" type="text" readonly="readonly" id="groupName" name="groupName" value="$!{dutyScheduling.groupName}" /> DIV> <DIV class=rowElem><LABEL>备注:LABEL> <TEXTAREA id="remark" rows=3 cols=43 name=remark>$!{dutyScheduling.remark}TEXTAREA> DIV> <DIV class=rowElem> DIV> <DIV class=rowElem> DIV> <DIV id=addhelper class=ui-widget> <DIV style="PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px" class="ui-state-error ui-corner-all"> <DIV id=addresult>DIV> DIV> DIV> FORM> DIV> DIV> BODY> HTML>
后台取日历上数据的canlendarModel方法(springMVC):
@ResponseBody @RequestMapping(value = "canlendarModel") public ListcanlendarModel(ModelMap model,Date timeStart,Date timeEnd) throws Exception { List listDutyOrder = dutyOrderService.findAll(); model.put("listDutyOrder", listDutyOrder); Date[] dd = {timeStart,timeEnd}; List listMonthDutySchedulings = dutySchedulingService.findBetweenTimes(dd); //String jsonListMonthDutySchedulings = JsonUtil.JsonFromObject(listMonthDutySchedulings); //model.put("listSize", listMonthDutySchedulings.size()); //model.put("jsonListMonthDutySchedulings", jsonListMonthDutySchedulings); return listMonthDutySchedulings; }
后台代码没什么,要点在于页面上的
var calendar =$('#calendar').fullCalendar({
。。。
events: function(start, end , callback){//生成日历
。。。。
}
}
此处start和end为当前加载进来的日历的起始时间和结束时间,需要将这两个时间传到后台取数据。这里我之前翻了个错误,开始我同步取数据,即页面加载时候,把当天所在月的数据都取出来。当前月份是显示出来了,可是新的问题是页面右上角的 prev: '上一月',next: '下个月',不知道怎样再去跟后台交互了!查阅大量资料,终于被我发现这里问题所在,这个地方一定要异步去取,把当前日历(一般显示的是一个月加月前月后几天)的起始、结束时间传到后台。这样做之后,点击prev: '上一月',next: '下个月',它会自己再把新的月份的起始、结束时间传到后台,重新加载var calendar =$('#calendar').fullCalendar({。。});。
此处还有个地方要注意,当加载完页面之后,左上角有个按日期查询当日排班(任务)的功能。如果选的日期是当前日历月份(即桌面上显示7*6的格子)范围以内的,它会定位到直接定位到当天,而数据则是之前已经加载好的;如果选的日期不在当前日历月份范围以内的,它会再调用var calendar =$('#calendar').fullCalendar({。。});。传新的时间去后台取数据,这一点设计的非常好。
events: function(start, end , callback){//生成日历
。。。
start: doc[i].startTime,
end: doc[i].endTime,
}
上面这个是生成日历项的地方,主要就是这两个参数,直接决定在日历上面显示的任务的起始和结束时间,如果不在同一天,那就会跨格子显示。
我传的是一个String格式 yyyy-MM-dd HH:mm:ss 的日期,没问题,fullcalendar可以识别。
另外fullcalendar还支持日历的拖拽等,还有很多别的有意思的方法,还待研究。