接下来是fullcalendar的几个方法，用来设置会议室预定系统日历项的显示，各自是eventRender, eventAfterRender,这里几个方法能够用来生成日历项的内容，详细例如以下：
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(\'<a href=#>\' + fstart + "-" + fend + \'<div style=color:#E5E5E5>\' + event.title + "</div></a>");
},
eventAfterRender : function(event, element, view) {
var fstart = $.fullCalendar.formatDate(event.start, "HH:mm");
var fend = $.fullCalendar.formatDate(event.end, "HH:mm");
//element.html(\'<a href=#><div>Time: \' + fstart + "-" + fend + \'</div><div>Room:\' + event.confname + \'</div><div style=color:#E5E5E5>Host:\' + event.fullname + "</div></a>");
var confbg=\'\';
if(event.confid==1){
confbg = confbg + \'<span></span>\';
}else if(event.confid==2){
confbg = confbg + \'<span></span>\';
}else if(event.confid==3){
confbg = confbg + \'<span></span>\';
}else if(event.confid==4){
confbg = confbg + \'<span></span>\';
}else if(event.confid==5){
confbg = confbg + \'<span></span>\';
}else if(event.confid==6){
confbg = confbg + \'<span></span>\';
}else{
confbg = confbg + \'<span></span>\';
}
var titlebg = \'<span>\' + event.confshortname + \'</span>\';
if(event.repweeks>0){
titlebg = titlebg + \'<span>R</span>\';
}
if(view.name=="month"){
var evtcontent = \'<div><a>\';
evtcontent = evtcontent + confbg;
evtcontent = evtcontent + \'<span>\' + fstart + " - " + fend + titlebg + \'</span>\';
evtcontent = evtcontent + \'<span>Room: \' + event.confname + \'</span>\';
evtcontent = evtcontent + \'<span>Host: \' + event.fullname + \'</span>\';
evtcontent = evtcontent + \'</a><div></div></div>\';
element.html(evtcontent);
}else if(view.name=="agendaWeek"){
var evtcontent = \'<a>\';
evtcontent = evtcontent + confbg;
evtcontent = evtcontent + \'<span>\' + fstart + "-" + fend + titlebg + \'</span>\';
evtcontent = evtcontent + \'<span>\' + event.confname + \' by \' + event.fullname + \'</span>\';
//evtcontent = evtcontent + \'<span>\' + event.fullname + \'</span>\';
evtcontent = evtcontent + \'</a><span><div></div></span>\';
element.html(evtcontent);
}else if(view.name=="agendaDay"){
var evtcontent = \'<a>\';
evtcontent = evtcontent + confbg;
evtcontent = evtcontent + \'<span>\' + fstart + " - " + fend + titlebg + \'</span>\';
evtcontent = evtcontent + \'<span>Room: \' + event.confname + \'</span>\';
evtcontent = evtcontent + \'<span>Host: \' + event.fullname + \'</span>\';
evtcontent = evtcontent + \'<span>Topic: \' + event.topic + \'</span>\';
evtcontent = evtcontent + \'</a><span><div></div></span>\';
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};
identityService.getToBeUpdatedConflictedScheduleDAO(schdata , {
callback:function(data) {
if(data.length== 0){
var newschdata = {sid:event.sid, startdate:event.start, enddate:event.end};
identityService.updateScheduleByNewDateRange(newschdata, {
callback:function(data) {
alert("Thanks, reservation rescheduled successfully.");
//window.location.reload();
}
});
}else{
revertFunc();
alert("Sorry, reservation cannot be rescheduled.");
}
}
});
}else{
revertFunc();
}
},
eventResizeStart: function( event, jsEvent, ui, view ) {
},
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();
}
}
});
以上代码假设须要具体说明，请大家參考官方文档，代码细节这里不再说明。 大家能够使用以下的演示代码执行一下。Fullcalendar是一个很有用的日历插件，使用得当能够开发很复杂的功能。比如，我们这里开发的会议室预定系统。强烈推荐！
