HTML
首先是载入jQuery库,jQuery ui,ullcalendar及弹出层fancybox。
<script src='js/jquery.js'></script> <script src=js/jquery-ui.js'></script> <script src='js/fullcalendar.min.js'></script> <script src='js/jquery.fancybox-1.3.1.pack.js'></script>
jQuery
FullCalendar提供了可拖动日程事件的方法,但必须依赖jquery ui的draggable插件。当拖动完毕后,eventDrop回调函数中,我们使用post方式向后台php发送ajax请求,请求的参数包括id:当前拖动事件的id唯一标识,daydiff:拖动前后的天数变更(天数偏移量),minudiff:拖动前后分钟变更(分钟偏移量),allday:是否为全天事件。然后接收后台php处理的结果,如果返回的不是1(拖动处理失败),就弹出提示信息,并且将日程事件恢复到拖动前的状态,请看代码:
$(function() { events: 'json.php', //事件数据源 editable: true, //允许拖动 dragOpacity: {//设置拖动时事件的透明度 agenda: .5, '':.6 }, //拖动事件 eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) { $.post("ajax.php?action=drag",{id:event.id,daydiff:dayDelta, minudiff:minuteDelta,allday:allDay},function(msg){ if(msg!=1){ alert(msg); revertFunc(); //恢复原状 } }); } });
最后附上calendar表结构:
CREATE TABLE `calendar` ( `id` int(11) NOT NULL auto_increment, `title` varchar(100) NOT NULL, `starttime` int(11) NOT NULL, `endtime` int(11) default NULL, `allday` tinyint(1) NOT NULL default '0', `color` varchar(20) default NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8;