FullCalendar 是一个 优秀的jQuery 的日历插件，支持请求json数据，支持google 日历接口，是我经过几次不同jquery日历插件对比后筛选出来最优秀的一款。用它做了个有用的功能，当然在使用过程中碰到了很多问题，比如事件更新就是一个让人头疼的东西。
官方提供的几种fullcalendar事件更新办法并不是那么完善，比如在fullcalendar移动事件的时候，有的时候会成功，有的时候不会成功，后经我分析 是在移动过程中，由于高频度的移动，导致一个fullcalendar json没有完全请求返回完成，然后又进行一个新的fullcalendar移动操作。导致fullcalendar事件没有及时更新此时如果迅速移动就会使用原来事件记录的时间信息进行新的移动，所以会导致fullcalendar移动出现偶尔成功 偶尔失败的问题
本例用到的插件有 fullcalendar、WdatePicker、jquery-1.10.2.min.js、jquery-ui-1.10.3.custom.min.js
下面是部分html代码参考
<div id='calendar'></div>
<div style="DISPLAY: none" id="reservebox" title="reservebox">
<form id="reserveformID" method="post">
<div class="sysdesc"> </div>
<div class="rowElem"><label>服务器名:</label>
<input type="text" name="servername" id="server" class=""></div>
<div class="rowElem"><label>游戏:</label>
<select id="game" name="game">
<!--{html_options options=$dict_game[1] selected=$dict_game[0]}-->
</select>
<div class="rowElem"><label>合作商:</label>
<select id="partner" name="partner">
<!--{html_options options=$dict_platform[1] selected=$dict_platform[0]}-->
</select>
</div>
<div class="timePicker"><label>开服时间:</label>
<input type="text" maxlength="16" name="start" id="start" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})" value=""></input>
</form>
</div>
下面是javascript代码参考，主要资料都在这里
<script type="text/javascript">
function gotoDate(){
date = document.getElementById("timePicker").value.split(" ")[0];
date = date.split('-');
$('#calendar').fullCalendar( 'gotoDate', date[0], parseInt(date[1])-1, parseInt(date[2]));
//$('#calendar').fullCalendar( 'changeView', 'agendaDay' );
}
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {today: '今天', month: '月', agendaWeek: '周', agendaDay: '日'},
dayNames:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
dayNamesShort:['日', '一', '二', '三','四', '五', '六'],
monthNames:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
monthNamesShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
selectable: true,
selectHelper: true,
editable: true,
events: "json",
//单日点击
dayClick: function(date, allDay, jsEvent, view) {
var time = $.fullCalendar.formatDate(date, "yyyy-MM-dd hh:mm");
document.getElementById("start").value = time;
var selectdate = $.fullCalendar.formatDate(date, "yyyy-MM-dd");
$( "#reservebox" ).dialog({
autoOpen: false,
height: 300,
width: 400,
title: '任务 ' + selectdate,
modal: true,
position: "center",
draggable: false,
buttons: {
"关闭": function() {
$(this).dialog( "close" );
},
"确认": function() {
var server_name = $("#server").val();
var game = $("#game").val();
var partner = $("#partner").val();
var start = $("#start").val();
if (server_name == '' || game < 1 || partner < 1 || start == '') {
alert('有未填写项目');
return FALSE;
}
$.ajax({
type: "POST",
url: "http://test.xxtime.com/newserver/add",
data: "server_name="+server_name+"&game="+game+"&partner="+partner+"&start="+start,
dataType: 'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function(msg){
if (msg.error>0) {
alert('失败 ' + msg.msg);
return FALSE;
}
// TODO : 更新事件
setTimeout('$("#calendar").fullCalendar("refetchEvents")', 2000);
}
});
$(this).dialog( "close" );
}
}
});
$("#reservebox").dialog( "open" );
return false;
},
//事件点击
eventClick: function(event, jsEvent, view) {
if (event.url) {
return 1;
}
$.ajax({
type: "POST",
url: "http://test.xxtime.com/newserver/detail/",
data: "id="+event.id,
dataType: 'json',
success: function(msg){
$("#server_id").html(msg.server_id);
$("#server_name").html(msg.server_name);
$("#game_name").html(msg.cn_name);
$("#partner_name").html(msg.plat_name);
var d = new Date(msg.open_time*1000);
open_time = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes();
$("#open_time").html(open_time);
}
});
$( "#dialog" ).dialog({
autoOpen: false,
height: 200,
width: 400,
title: '任务信息',
modal: true,
position: "center",
draggable: false,
buttons: {
"编辑": function() {
$(this).dialog( "close" );
$( "#editbox" ).dialog({
autoOpen: false,
height: 300,
width: 400,
title: '编辑任务 ' + event.id,
modal: true,
position: "center",
draggable: false,
buttons: {
"关闭": function() {
$(this).dialog( "close" );
},
"确认": function() {
var server_name = $("#editserver").val();
var game = $("#editgame").val();
var partner = $("#editpartner").val();
var start = $("#editstart").val();
$.ajax({
type: "POST",
url: "http://test.xxtime.com/newserver/edit",
data: "id="+event.id+"&server_name="+server_name+"&game="+game+"&partner="+partner+"&start="+start,
dataType: 'json',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function(msg){
if (msg.error>0) alert('失败 ' + msg.msg);
}
});
//更新事件重新渲染
event.title = server_name;
event.game_id = game;
event.partner_id = partner;
event.start = $.fullCalendar.parseDate(start);
$('#calendar').fullCalendar('updateEvent', event);
setTimeout('$("#calendar").fullCalendar("refetchEvents")', 2000);//二次保险更新
$(this).dialog( "close" );
}
}
});
$("#editserver").val(event.title);
$("#editgame").val(event.game_id);
$("#editpartner").val(event.partner_id);
$("#editstart").val(event.day + ' ' + event.start.toString().split(" ")[4].substring(0,5));
$("#editbox").dialog( "open" );
return false;
},
"删除": function() {
if (confirm('确认删除?')) {
$.ajax({
type: "POST",
url: "http://test.xxtime.com/newserver/delete/",
data: "id="+event.id,
dataType: 'json',
success: function(msg){
if (msg.error>0) alert('失败 ' + msg.msg);
}
});
$(this).dialog( "close" );
$("#calendar").fullCalendar("removeEvents",event.id);
}
}
}
});
$("#dialog").dialog( "open" );
return false;
},
eventRender: function(event, element) {
var start = $.fullCalendar.formatDate(event.start, "HH:mm");
var end = $.fullCalendar.formatDate(event.end, "HH:mm");
element.html("<div class='fc-event-inner'><span class='fc-event-title'>"+start+" "+event.title+"</span></div><div class='fc-event-bg'></div>");
},
//事件移动
eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
timeChanged = (dayDelta * 24 * 60 + minuteDelta) * 60;
$.ajax({
type: "POST",
url: "http://test.xxtime.com/newserver/edit",
data: "id="+event.id+"&timeChanged="+timeChanged,
dataType: 'json',
success: function(msg){
if (msg.error>0) alert('失败 ' + msg.msg);
}
});
// TODO : 更新事件
setTimeout('$("#calendar").fullCalendar("refetchEvents")', 2000);
},
//事件缩放
eventResize: function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) {
}
});
});
</script>
