ThinkPhp+Mysql+FullCalendar日曆拖動與資料儲存

FullCalendar提供了可拖動議程事件的方法，但必須依賴jquery ui的draggable外掛程式。當拖動完畢後，eventDrop回呼函數中，我們使用post方式向後台php發送ajax請求，請求的參數包括id: 當前拖動事件的id唯一標識，daydiff：拖動前後的天數變更（天數位移量），minudiff：拖動前後分鐘變更（分鐘位移量），allday：是 否為全天事件。然後接收後台php處理的結果，如果返回的不是1（拖動處理失敗），就彈出提示資訊，並且將議程事件恢複到拖動前的狀態。
html代碼：
<div class="container">
            <div class="demo">
                <div id='calendar'></div>
            </div>
        </div>
        <script type="text/javascript" src="/Public/js/jquery.js"></script>
        <script src='/Public/js/jquery-ui.js'></script>
        <script src='/Public/js/fullcalendar.min.js'></script>
        <script src='/Public/js/jquery.fancybox-1.3.1.pack.js'></script>
        <script type="text/javascript">
            $(function() {
                $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    editable: true,
                    dragOpacity: {
                        agenda: .5,
                        '': .6
                    },
                    eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {
                        $.post("{:U('Ajax/index')}?action=drag", {id: event.id, daydiff: dayDelta, minudiff: minuteDelta, allday: allDay}, function(msg) {
                            if (msg != 1) {
                                alert(msg);
                                revertFunc();
                            }
                        });
                    },
                    eventResize: function(event, dayDelta, minuteDelta, revertFunc) {
                        $.post("{:U('Ajax/index')}?action=resize", {id: event.id, daydiff: dayDelta, minudiff: minuteDelta}, function(msg) {
                            if (msg != 1) {
                                alert(msg);
                                revertFunc();
                            }
                        });
                    },
                    selectable: true,
                    select: function(startDate, endDate, allDay, jsEvent, view) {
                        var start = $.fullCalendar.formatDate(startDate, 'yyyy-MM-dd');
                        var end = $.fullCalendar.formatDate(endDate, 'yyyy-MM-dd');
                        $.fancybox({
                            'type': 'ajax',
                            'href': '{:U("Even/index")}?action=add&date=' + start + '&end=' + end
                        });
                    },
                    events: '{:U("Json/index")}',
                    dayClick: function(date, allDay, jsEvent, view) {
                        var selDate = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
                        $.fancybox({
                            'type': 'ajax',
                            'href': '{:U("Even/index")}?action=add&date=2015-05-07'
                        });
                    },
                    eventClick: function(calEvent, jsEvent, view) {
                        $.fancybox({
                            'type': 'ajax',
                            'href': '{:U("Even/index")}?action=edit&id=' + calEvent.id
                        });
                    }
                });
            });
        </script>
由於代碼過於太多就不一一貼出點擊下面連結下載代碼及資料庫。
http://pan.baidu.com/s/1kUgki8J
官方文檔地址：http://arshaw.com/fullcalendar/docs/