分享日历拖动与数据保存

首先是载入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>

<div id="calendar"></div>

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(); //恢复原状  
            }  
        });  
    }  
});

日历拖动演示：http://www.sucaihuo.com/js/107.html