本站之前已經推出的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如何修改和刪除日歷事件，以及拖動保存日歷事件等文 章，Helloweba感謝您的關注，順祝：十一放假愉快！