Jquery_FullCalendar日历插件
HTML
首先第一步就是在需要调用FullCalendar日历的页面中载入必要的javascript和css文件，包括jQuery库文件，FullCalendar插件以及FullCalendar样式表。如果您还想要拖动日历的功能，就还需要加入jQuery ui插件。
<link rel="stylesheet" type="text/css" href="css/fullcalendar.css">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-ui-1.10.2.custom.min.js"></script>
<script src="js/fullcalendar.min.js"></script>
然后，在页面的body里加入div#calendar，用来放置日历主体。
<div id='calendar'></div>
jQuery
现在我们需要在页面加载完成后，调用FullCalendar插件初始化日历，使用jQuery代码：
$(document).ready(function() {
//页面加载完初始化日历
$('#calendar').fullCalendar({
//设置选项和回调
})
});
然后保存并浏览页面，你会发现页面中已经显示一个很大的日历表了。当然这还只是一个初步的日历，FullCalendar的强大之处在于它提供了丰富的选项设置、方法及事件，可以很方便的扩展，打造你想要的日历表，先来做一下简单了解。
Options
FullCalendar官方文档中提供了丰富的操作选项设置，比如是否在日历中显示周末等等，使用方法：
$('#calendar').fullCalendar({
weekends: false //不显示周末，将会隐藏周六和周日
});
Callbacks
当点击或者拖动等事件发生时，可以调用相关函数，比如点击某一天时，弹出提示框：
$('#calendar').fullCalendar({
dayClick: function() {
alert('a day has been clicked!');
}
});
Methods
FullCalendar提供了很多方法可以调用，诸如进入下一个月视图等，代码可以这样写：
$('#calendar').fullCalendar('next');
以上代码调用了next方法后，日历视图切换到下一月（周、日）的视图。
/**************************************************获取Json数据************************************/
开发者可以使用FullCalendar创建强大的日历日程应用，FullCalendar提供了丰富的选项设置和方法调用，使得开发者可以轻松的创建各种功能的日历程序。本文将结合实例使用PHP读取MySQl数据，显示在FullCalendar日历中。
根据FullCalendar日历插件说明文档中的介绍，日历主体事件数据的来源有三，一是直接以javascript数组的形式显示日历事件，二是获取JSON数据形式显示日历事件，三是函数回调的形式显示日历数据，三种调用数据的方式各有所用之处，通常我们在实际项目中会结合数据库，通过PHP等后台语言来读取数据库的数据，并以json格式返回给前端，FullCalendar再处理接收的json数据显示在日历中。
HTML
一切像前面文章：日程安排FullCalendar介绍的一样，在页面中载入必要的javascript和css文件。
<link rel="stylesheet" type="text/css" href="css/fullcalendar.css">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-ui-1.10.2.custom.min.js"></script>
<script src="js/fullcalendar.min.js"></script>
然后，在页面的body里加入div#calendar，用来放置日历主体。
<div id='calendar'></div>
jQuery
我们用以下代码调用FullCalendar，保存后浏览，我们可以看到页面中呈现一个漂亮的日历表，但是日历中没有具体的事件内容，我们使用FullCalendar最主要的是要在FullCalendar中展示日程安排中的事件，给用户直观的展示过去或未来时间内安排的事情。FullCalendar中的事件数据来源在events选项控制，当然如果是有多个数据来源可以使用eventSources选项。
$(function() {
$('#calendar').fullCalendar({
header: {//设置日历头部信息
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
firstDay:1,//每行第一天为周一
editable: true,//可以拖动
events: 'json.php' //事件数据
});
});
PHP
从jQuery代码中我们可以看出，FullCalendar所有事件数据来自于json.php。json.php通过连接后台MySQL数据库，读取符合条件的事件数据，并最终以JSON数据格式的形式返回，请看代码：
include_once('connect.php');//连接数据库
$sql = "select * from calendar";
$query = mysql_query($sql);
while($row=mysql_fetch_array($query)){
$allday = $row['allday'];
$is_allday = $allday==1?true:false;
$data[] = array(
'id' => $row['id'],//事件id
'title' => $row['title'],//事件标题
'start' => date('Y-m-d H:i',$row['starttime']),//事件开始时间
'end' => date('Y-m-d H:i',$row['endtime']),//结束时间
'allDay' => $is_allday, //是否为全天事件
'color' => $row['color'] //事件的背景色
);
}
echo json_encode($data);
值得一提的是，在返回的json数据中，每个字段如id，title..对应着FullCalendar的Event Object事件对象中的属性id，title..。
我们将最终数据以json_encode()输出，然后，前端FullCalendar会解析json数据并显示在日历中，这些FullCalendar都替我们做好了，只管刷新前端页面看下效果吧。
FullCalendar的读取数据操作很简单，接下来我们会讲述如何在FullCalendar日历中新增、修改和删除事件，敬请关注。
最后附上demo中的MySQL数据表calendar的表结构：
CREATE TABLE IF NOT EXISTS `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 /************************************************新建日程********************************************/
FullCalendar用日历的形式直观的展示了日程安排、代办事宜等事件，那么日历中的事件是怎么添加进去的呢？本文将结合实例使用PHP+MySQL+jQuery讲解如何在FullCalendar中新建事件。
本站之前已经推出的FullCalendar应用系列文章中，有介绍FullCalendar的基本使用，FullCalendar的选项配置API，以及FullCalendar如何读取数据库中的数据，本文是建立在前面几个知识点之上的，如果您对FullCalendar还不了解，那建议您先看下本站关于FullCalendar的文章。本文除了您具备基本的html，css知识外，还需要您对PHP，MySQL以及jQuery技术有一定的基础，对于如何连接数据库，以及PHP和jQuery的基本函数方法的使用本文不做讲解。
HTML
我们新建一个名称为cal_opt.html的文件，然后载入必须的CSS和JS文件。
<link rel="stylesheet" type="text/css" href="css/fullcalendar.css">
<link rel="stylesheet" type="text/css" href="css/fancybox.css">
<script src='js/jquery-1.9.1.min.js'></script>
<script src='js/jquery-ui-1.10.3.custom.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/jquery.fancybox-1.3.1.pack.js'></script>
以上文件中，jquery-ui是提供事件拖动、和日期选择器功能，fancybox是点击新建事件时提供弹出层功能。
接着，我们在body中加入以下代码：
<div id="calendar"></div>
jQuery
我们调用fullCalendar日历插件，日历中的events事件数据源来源于json.php，在上一篇文章中我们已经讲解，它是通过PHP读取mysql数据然后生成JSON数据格式返回给fullCalendar渲染事件。
好，到这里我们关键的一步到来了，我们通过单击日历中的任意日期空白格子时，弹出一个要求输入事件相关信息的层，通过在层中的表单输入相关信息并提交来完成新建事件的操作。
FullCalendar提供了dayClick方法，当dayClick发生时，调用回调函数，这里首先要将fullCalendar的日期格式化处理(fullCalendar文档中有说明)，因为我们需要将日期作为参数传给弹出层的表单。然后调用fancybox弹出层，我们使用ajax调用，调用的url是event.php，并追加参数，以下是完整代码：
$(function() {
$('#calendar').fullCalendar({
events: 'json.php', //事件数据源
dayClick: function(date, allDay, jsEvent, view) {
var selDate =$.fullCalendar.formatDate(date,'yyyy-MM-dd');//格式化日期
$.fancybox({//调用fancybox弹出层
'type':'ajax',
'href':'event.php?action=add&date='+selDate
});
}
});
});
关于fancybox弹出层的应用，您可以参阅本站文章的相关介绍： Fancybox丰富的弹出层效果
event.php
Fancybox通过ajax调用了event.php中的内容。event.php通过获取参数，在弹出层中展示一个新建事件的表单，内容如下：
<div class="fancy">
<h3>新建事件</h3>
<form id="add_form" action="do.php" method="post">
<input type="hidden" name="action" value="add">
<p>日程内容：<input type="text" class="input" name="event" id="event" style="width:320px"
placeholder="记录你将要做的一件事..."></p>
<p>开始时间：<input type="text" class="input datepicker" name="startdate" id="startdate"
value="<?php echo $_GET['date'];?>">
<span id="sel_start" style="display:none"><select name="s_hour">
<option value="00">00</option>
...<!--省略多个option，下同-->
</select>:
<select name="s_minute">
<option value="00" selected>00</option>
...
</select>
</span>
</p>
<p id="p_endtime" style="display:none">结束时间：<input type="text" class="input datepicker"
name="enddate" id="enddate" value="<?php echo $_GET['date'];?>">
<span id="sel_end" style="display:none"><select name="e_hour">
<option value="00">00</option>
...
</select>:
<select name="e_minute">
<option value="00" selected>00</option>
...
</select>
</span>
</p>
<p>
<label><input type="checkbox" value="1" id="isallday" name="isallday" checked> 全天</label>
<label><input type="checkbox" value="1" id="isend" name="isend"> 结束时间</label>
</p>
<div class="sub_btn"><span class="del"><input type="button" class="btn btn_del"
id="del_event" value="删除"></span>
<input type="submit" class="btn btn_ok" value="确定"> <input type="button"
class="btn btn_cancel" value="取消" onClick="$.fancybox.close()"></div>
</form>
</div>
在弹出层中，我们要处理几个交互动作，一是点击日期输入框时调用jquery ui的datepicker日期选择器，二是选择“全天”和“结束时间”复选框时需要显示与隐藏的表单控件，最后是“确定”和“取消”按钮的操作。
首先我们要在event.php中载入jquery ui的样式以及ajax处理表单的插件：jquery.form.js。
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css"<
<script type="text/javascript" src="js/jquery.form.min.js"></script>
接着我们来处理调用日期选择器和选择“全天”及“结束时间”复选框时的动作。
$(function(){
$(".datepicker").datepicker();//调用日历选择器
$("#isallday").click(function(){//是否是全天事件
if($("#sel_start").css("display")=="none"){
$("#sel_start,#sel_end").show();
}else{
$("#sel_start,#sel_end").hide();
}
});
$("#isend").click(function(){//是否有结束时间
if($("#p_endtime").css("display")=="none"){
$("#p_endtime").show();
}else{
$("#p_endtime").hide();
}
$.fancybox.resize();//调整高度自适应
});
});
关于日历选择器的使用，本站文章：日期选择器：jquery datepicker的使用有相关介绍。而复选框勾选时，对应的表单内容进行显示与隐藏的操作，需要大家多试试，值得一提的是在勾选“结束时间”选项时，弹出层的高度会变化，这时可以调用$.fancybox.resize()来进行自动调整高度，否则在弹出层中会出现滚动条影响视觉效果。
弹出层的最后操作时提交表单，很显然，event.php表单代码中的action提交到了do.php来处理的。我们调用jquery.form.js进行异步处理，提交表单时进行表单验证，这里的beforeSubmit调用回调函数showRequest()，然后就是提交成功后，success回调函数showResponse()。关于jquery.form.js的使用，后面笔者会在helloweba中专门讲解，敬请关注。
$(function(){
//提交表单
$('#add_form').ajaxForm({
beforeSubmit: showRequest, //表单验证
success: showResponse //成功返回
});
});
function showRequest(){
var events = $("#event").val();
if(events==''){
alert("请输入日程内容！");
$("#event").focus();
return false;
}
}
function showResponse(responseText, statusText, xhr, $form){
if(statusText=="success"){
if(responseText==1){
$.fancybox.close();//关闭弹出层
$('#calendar').fullCalendar('refetchEvents'); //重新获取所有事件数据
}else{
alert(responseText);
}
}else{
alert(statusText);
}
}
showResponse()根据接收状态，获取do.php返回的内容，如果成功（指插入数据成功），则关闭弹出层，并且通过fullcalendar的refetchEvents方法重新载入所有日历事件（局部刷新了日历区的内容），否则提示相关出错信息。
do.php
do.php用来处理表单提交，包括后面会讲解的修改和删除日历事件的操作。通过处理表单数据，然后将数据写入MySQL数据表中，并且返回执行结果。
include_once('connect.php');//连接数据库
$action = $_POST['action'];
if($action=='add'){
$events = stripslashes(trim($_POST['event']));//事件内容
$events=mysql_real_escape_string(strip_tags($events),$link); //过滤HTML标签，并转义特殊字符
$isallday = $_POST['isallday'];//是否是全天事件
$isend = $_POST['isend'];//是否有结束时间
$startdate = trim($_POST['startdate']);//开始日期
$enddate = trim($_POST['enddate']);//结束日期
$s_time = $_POST['s_hour'].':'.$_POST['s_minute'].':00';//开始时间
$e_time = $_POST['e_hour'].':'.$_POST['e_minute'].':00';//结束时间
if($isallday==1 && $isend==1){
$starttime = strtotime($startdate);
$endtime = strtotime($enddate);
}elseif($isallday==1 && $isend==""){
$starttime = strtotime($startdate);
}elseif($isallday=="" && $isend==1){
$starttime = strtotime($startdate.' '.$s_time);
$endtime = strtotime($enddate.' '.$e_time);
}else{
$starttime = strtotime($startdate.' '.$s_time);
}
$colors = array("#360","#f30","#06c");
$key = array_rand($colors);
$color = $colors[$key];
$isallday = $isallday?1:0;
$query = mysql_query("insert into `calendar` (`title`,`starttime`,`endtime`,`allday`,`color`)
values ('$events','$starttime','$endtime','$isallday','$color')");
if(mysql_insert_id()>0){
echo '1';
}else{
echo '写入失败！';
}
}
/**************************************************修改删除日程***********************************************/
FullCalendar可以灵活运用到项目开发中，本站上一篇文章中，我们介绍了如何在FullCalendar新建日程事件，今天我要给大家介绍的是如何在FullCalendar中编辑和删除日程事件，这样我们就完成了FullCalendar上的“增删改查”一系列操作。
HTML
和上一篇文章FullCalendar应用——新建日程事件一样，HTML页面我们仍然使用cal_opt.html，这里HTML代码及相关js和css文件的载入就不再详述，如果您是第一次阅读本文，请先从FullCalendar系列文章第一篇看起。
jQuery
在日历视图中，我们通过单击需要编辑的日程事件项，调用fancybox弹出编辑层。FullCalendar提供了事件单击eventClick方法，请看代码：
$(function() {
$('#calendar').fullCalendar({
//单击事件项时触发
eventClick: function(calEvent, jsEvent, view) {
$.fancybox({
'type':'ajax',
'href':'event.php?action=edit&id='+calEvent.id
});
}
});
});
单击事件项，调用了fancybox，和新建事件一样，采用ajax方式，通过传参，请求了编辑表单页面。
event.php
event.php根据请求过来的参数，读取对应id的日历事件，并将数据完整的现实在编辑表单中。我们将整个读取与显示编辑层的代码混编在event.php中，当然实际开发中，你可能会使用zend、thinkphp等框架，让PHP和html模板分离。下面的代码我们将编辑模块写在了自定义函数editform()中，那么event.php是根据传递的action参数来调用editform()的。
<?php
function editform($id){
$query = mysql_query("select * from calendar where id='$id'");
$row = mysql_fetch_array($query);
if($row){
$id = $row['id'];
$title = $row['title'];
$starttime = $row['starttime'];
$start_d = date("Y-m-d",$starttime);
$start_h = date("H",$starttime);
$start_m = date("i",$starttime);
$endtime = $row['endtime'];
if($endtime==0){
$end_d = $startdate;
$end_chk = '';
$end_display = "style='display:none'";
}else{
$end_d = date("Y-m-d",$endtime);
$end_h = date("H",$endtime);
$end_m = date("i",$endtime);
$end_chk = "checked";
$end_display = "style=''";
}
$allday = $row['allday'];
if($allday==1){
$display = "style='display:none'";
$allday_chk = "checked";
}else{
$display = "style=''";
$allday_chk = '';
}
}
?>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<div class="fancy">
<h3>编辑事件</h3>
<form id="add_form" action="do.php?action=edit" method="post">
<input type="hidden" name="id" id="eventid" value="<?php echo $id;?>">
<p>日程内容：<input type="text" class="input" name="event" id="event" style="width:320px"
placeholder="记录你将要做的一件事..." value="<?php echo $title;?>"></p>
<p>开始时间：<input type="text" class="input datepicker" name="startdate"
id="startdate" value="<?php echo $start_d;?>" readonly>
<span id="sel_start" <?php echo $display;?>><select name="s_hour">
<option value="<?php echo $start_h;?>" selected><?php echo $start_h;?></option>
<option value="00">00</option>
...//这里省略多个option，下同
</select>:
<select name="s_minute">
<option value="<?php echo $start_m;?>" selected><?php echo $start_m;?></option>
<option value="00">00</option>
...
</select>
</span>
</p>
<p id="p_endtime" <?php echo $end_display;?>>结束时间：<input type="text" class="input datepicker"
name="enddate" id="enddate" value="<?php echo $end_d;?>" readonly>
<span id="sel_end" <?php echo $display;?>><select name="e_hour">
<option value="<?php echo $end_h;?>" selected><?php echo $end_h;?></option>
...
</select>:
<select name="e_minute">
<option value="<?php echo $end_m;?>" selected><?php echo $end_m;?></option>
...
</select>
</span>
</p>
<p>
<label><input type="checkbox" value="1" id="isallday" name="isallday" <?php echo $allday_chk;?>>
全天</label>
<label><input type="checkbox" value="1" id="isend" name="isend" <?php echo $end_chk;?>> 结束时间</label>
</p>
<div class="sub_btn"><span class="del"><input type="button" class="btn btn_del" id="del_event"
value="删除"></span><input type="submit" class="btn btn_ok" value="确定">
<input type="button" class="btn btn_cancel" value="取消" onClick="$.fancybox.close()"></div>
</form>
</div>
<?php }?>
关键是处理日期和时间的显示，当然这也不是本文重点，大家可以下载源码慢慢研究。
我们还需要加入代码处理表单提交和验证，和上文的新建事件一样，我们使用了jquery.form.js插件，代码也基本和新建事件一样。
$(function(){
$(".datepicker").datepicker({minDate: -3,maxDate: 3});
$("#isallday").click(function(){
if($("#sel_start").css("display")=="none"){
$("#sel_start,#sel_end").show();
}else{
$("#sel_start,#sel_end").hide();
}
});
$("#isend").click(function(){
if($("#p_endtime").css("display")=="none"){
$("#p_endtime").show();
}else{
$("#p_endtime").hide();
}
$.fancybox.resize();//调整高度自适应
});
//提交表单
$('#add_form').ajaxForm({
beforeSubmit: showRequest, //表单验证
success: showResponse //成功返回
});
});
function showRequest(){
var events = $("#event").val();
if(events==''){
alert("请输入日程内容！");
$("#event").focus();
return false;
}
}
function showResponse(responseText, statusText, xhr, $form){
if(statusText=="success"){
if(responseText==1){
$.fancybox.close();
$('#calendar').fullCalendar('refetchEvents'); //重新获取所有事件数据
}else{
alert(responseText);
}
}else{
alert(statusText);
}
}
do.php
do.php用来处理新建、编辑和删除事件。编辑事件主要是通过接收表单post过来的数据，更新数据表中对应id的事件数据内容，如果更新成功就返回1，那么前端接收到更新成功的消息就会自动关闭fancybox层，并刷新日历视图。
include_once('connect.php');//连接数据库
$action = $_GET['action'];
if($action=='add'){
//新建事件
}elseif($action=="edit"){
//编辑事件
$id = intval($_POST['id']);
if($id==0){
echo '事件不存在！';
exit;
}
$events = stripslashes(trim($_POST['event']));//事件内容
$events=mysql_real_escape_string(strip_tags($events),$link); //过滤HTML标签，并转义特殊字符
$isallday = $_POST['isallday'];//是否是全天事件
$isend = $_POST['isend'];//是否有结束时间
$startdate = trim($_POST['startdate']);//开始日期
$enddate = trim($_POST['enddate']);//结束日期
$s_time = $_POST['s_hour'].':'.$_POST['s_minute'].':00';//开始时间
$e_time = $_POST['e_hour'].':'.$_POST['e_minute'].':00';//结束时间
if($isallday==1 && $isend==1){
$starttime = strtotime($startdate);
$endtime = strtotime($enddate);
}elseif($isallday==1 && $isend==""){
$starttime = strtotime($startdate);
$endtime = 0;
}elseif($isallday=="" && $isend==1){
$starttime = strtotime($startdate.' '.$s_time);
$endtime = strtotime($enddate.' '.$e_time);
}else{
$starttime = strtotime($startdate.' '.$s_time);
$endtime = 0;
}
$isallday = $isallday?1:0;
mysql_query("update `calendar` set `title`='$events',`starttime`='$starttime',`endtime`='$endtime',
`allday`='$isallday' where `id`='$id'");
if(mysql_affected_rows()==1){
echo '1';
}else{
echo '出错了！';
}
}elseif($action=="del"){
//删除事件
}else{
}
删除日程事件
在弹出的编辑表单层中，还有一个删除按钮，当我们点击删除按钮时，同样的发送ajax请求到do.php中，由do.php根据请求删除数据表中对应的日程记录，并返回成功的信息。
在event.php中还应该加上一段js：
$(function(){
...
//删除事件
$("#del_event").click(function(){
if(confirm("您确定要删除吗？")){
var eventid = $("#eventid").val();
$.post("do.php?action=del",{id:eventid},function(msg){
if(msg==1){//删除成功
$.fancybox.close();
$('#calendar').fullCalendar('refetchEvents'); //重新获取所有事件数据
}else{
alert(msg);
}
});
}
});
});
do.php也要加上删除操作。
...
}elseif($action=="del"){//删除
$id = intval($_POST['id']);
if($id>0){
mysql_query("delete from `calendar` where `id`='$id'");
if(mysql_affected_rows()==1){
echo '1';
}else{
echo '出错了！';
}
}else{
echo '事件不存在！';
}
}
好了，本文介绍了编辑和删除fullCalendar日历事件，文中给出的代码不是连贯的，建议不要直接复制使用，您可以看明白了再测试，当然，如果你够懒，可以下载本文提供的打包文件，包括读取、新建、编辑和删除日程事件功能。Hellwoeba.com感谢您的关注，接下来月光光会对fullCalendar的最后一个操作：拖动及保存日程事件做讲解以及总结，敬请关注。
/*********************************************************************拖动和实时保存*****************************************************/
我们可以使用FullCalendar建立一个非常强大的日历程序，用户可以轻松的在FullCalendar操作日程安排，诸如新建、修改、删除等操作以及本文将要讲解的拖动、缩放日程事件。
HTML
我们将日程页面命名为drag.html，首先是要载入jQuery库，jQuery ui以及fullcalendar插件。
<script src='js/jquery-1.9.1.min.js'></script>
<script src='js/jquery-ui-1.10.3.custom.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
然后在body中，建立日历容器div#calendar。
<div id="calendar"></div>
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("do.php?action=drag",{id:event.id,daydiff:dayDelta,
minudiff:minuteDelta,allday:allDay},function(msg){
if(msg!=1){
alert(msg);
revertFunc(); //恢复原状
}
});
}
});
PHP
当拖动结束时，FullCalendar向后台do.php发送了ajax请求。和增删改操作一样，do.php接收action动作参数，首先处理post过来的内容，然后查询数据表中对应的日程事件项，根据是否为全天事件以及是否有结束时间两个条件来构造不同的SQL语句，最后更新数据表，并返回处理结果，请看代码：
...
}elseif($action=="drag"){//拖动
$id = $_POST['id'];
$daydiff = (int)$_POST['daydiff']*24*60*60;
$minudiff = (int)$_POST['minudiff']*60;
$allday = $_POST['allday'];
$query = mysql_query("select * from `calendar` where id='$id'");
$row = mysql_fetch_array($query);
if($allday=="true"){//如果是全天事件
if($row['endtime']==0){
$sql = "update `calendar` set starttime=starttime+'$daydiff' where id='$id'";
}else{
$sql = "update `calendar` set starttime=starttime+'$daydiff',endtime=endtime
+'$daydiff' where id='$id'";
}
}else{
$difftime = $daydiff + $minudiff;
if($row['endtime']==0){
$sql = "update `calendar` set starttime=starttime+'$difftime' where id='$id'";
}else{
$sql = "update `calendar` set starttime=starttime+'$difftime',endtime=endtime
+'$difftime' where id='$id'";
}
}
$result = mysql_query($sql);
if(mysql_affected_rows()==1){
echo '1';
}else{
echo '出错了！';
}
}
以上代码关键在于处理日程事件的开始时间和结束事件，这样，就实现了可以任意拖动日程事件项并实时保存，看下demo，是不是很酷哦。
总结
关于日程事件的缩放
所谓缩放，其实就是用户可以直接在日历视图中将日程事件拉长和缩短，比如事件为一天的变成两天，10:00结束的会议变成9:30，只需在日历视图中将对应的日程事件项向右（月视图）或向下（周视图和日视图）拉长或缩短。使用FullCalendar提供的eventResize方法轻松搞定。
eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
$.post("do.php?action=resize",{id:event.id,daydiff:dayDelta,minudiff:minuteDelta},function(msg){
if(msg!=1){
alert(msg);
revertFunc();
}
});
}
关于选取多天
FullCalendar提供了select方法，用户可以在新建多天日程的时候，一次性选择连贯的日期，然后弹出的新建日程中会自动补全开始日期和结束日期，这个操作只需按住开始日期，然后拖动鼠标到结束日期，松开左键即可，快去demo中操作下吧。
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':'event.php?action=add&date='+start+'&end='+end
});
}
关于多用户共享
要将FullCalendar应用到项目中去，一般是针对多用户使用的，如CRM系统中会有多个用户共享日程，上级可查看下级的日程安排及工作进度，同级用户不能查看对方的日程，这些需求是在项目设计的时候就得定好，当然数据库的设计是至关重要的，这里不再多描述。
不足
唯一遗憾的是日历中没有中国农历历法，哪位大神能将中国农历历法移植到FullCalendar中，将会对FullCalendar在中国的应用做出卓越的贡献。
结束
FullCalendar系列文章讲述了FullCalendar的基本应用，API文档，读取数据库，新建、修改和删除操作，以及拖动、缩放和选取，足以满足大型项目应用场景的需求，至此关于FullCalendar的文章本站就此收官，如有FullCalendar相关问题欢迎大家留言讨论，Helloweba感谢您的关注。