Thinkphp+mysql+fullcalendar Calendar drag and data save

Fullcalendar provides a way to drag schedule events, but you must rely on the draggable plug-ins of the jquery UI. After dragging, in the EventDrop callback function, we use post to send AJAX requests to the background PHP with the requested parameter including ID: The ID of the current drag event uniquely identifies, Daydiff: The number of days before and after the drag (days offset), Minudiff: Minute change before and after dragging (minute offset), Allday: Whether it is a whole day event. Then receive the results of the background PHP processing, if the return is not 1 (drag processing failed), pop-up prompts, and the schedule event to revert to the State before the drag.
HTML code:
<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>
Because the code too much will not be posted to click the link below to download the code and database.
Http://pan.baidu.com/s/1kUgki8J
Official Document Address: http://arshaw.com/fullcalendar/docs/