本站之前已經(jīng)推出的FullCalendar應(yīng)用系列文章中，有介紹FullCalendar的基本使用，F(xiàn)ullCalendar的選項(xiàng)配置 API，以及FullCalendar如何讀取數(shù)據(jù)庫(kù)中的數(shù)據(jù)，本文是建立在前面幾個(gè)知識(shí)點(diǎn)之上的，如果您對(duì)FullCalendar還不了解，那建議您 先看下本站關(guān)于 FullCalendar 的文章。本文除了您具備基本的html，css知識(shí)外，還需要您對(duì)PHP，MySQL以及jQuery技術(shù)有一定的基礎(chǔ)，對(duì)于如何連接數(shù)據(jù)庫(kù)，以及PHP和jQuery的基本函數(shù)方法的使用本文不做講解。

?

HTML

我們新建一個(gè)名稱(chēng)為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是提供事件拖動(dòng)、和日期選擇器功能，fancybox是點(diǎn)擊新建事件時(shí)提供彈出層功能。

接著，我們?cè)赽ody中加入以下代碼：

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

?

jQuery

我們調(diào)用fullCalendar日歷插件，日歷中的events事件數(shù)據(jù)源來(lái)源于json.php，在上一篇文章中我們已經(jīng)講解，它是通過(guò)PHP讀取mysql數(shù)據(jù)然后生成JSON數(shù)據(jù)格式返回給fullCalendar渲染事件。

好，到這里我們關(guān)鍵的一步到來(lái)了，我們通過(guò)單擊日歷中的任意日期空白格子時(shí)，彈出一個(gè)要求輸入事件相關(guān)信息的層，通過(guò)在層中的表單輸入相關(guān)信息并提交來(lái)完成新建事件的操作。

FullCalendar提供了dayClick方法，當(dāng)dayClick發(fā)生時(shí)，調(diào)用回調(diào)函數(shù)，這里首先要將fullCalendar的日期格式 化處理(fullCalendar文檔中有說(shuō)明)，因?yàn)槲覀冃枰獙⑷掌谧鳛閰?shù)傳給彈出層的表單。然后調(diào)用fancybox彈出層，我們使用ajax調(diào) 用，調(diào)用的url是event.php，并追加參數(shù)，以下是完整代碼：

        $(function() { 
    $('#calendar').fullCalendar({ 
        events: 'json.php', //事件數(shù)據(jù)源 
        dayClick: function(date, allDay, jsEvent, view) { 
            var selDate =$.fullCalendar.formatDate(date,'yyyy-MM-dd');//格式化日期 
            $.fancybox({//調(diào)用fancybox彈出層 
                'type':'ajax', 
                'href':'event.php?action=add&date='+selDate 
            }); 
        } 
    }); 
}); 
      

?

關(guān)于fancybox彈出層的應(yīng)用，您可以參閱本站文章的相關(guān)介紹： Fancybox豐富的彈出層效果

?

event.php

Fancybox通過(guò)ajax調(diào)用了event.php中的內(nèi)容。event.php通過(guò)獲取參數(shù)，在彈出層中展示一個(gè)新建事件的表單，內(nèi)容如下：

        <div class="fancy"> 
    <h3>新建事件</h3> 
    <form id="add_form" action="do.php" method="post"> 
    <input type="hidden" name="action" value="add"> 
    <p>日程內(nèi)容：<input type="text" class="input" name="event" id="event" style="width:320px" 
 placeholder="記錄你將要做的一件事..."></p> 
    <p>開(kāi)始時(shí)間：<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> 
        ...<!--省略多個(gè)option，下同--> 
    </select>: 
    <select name="s_minute"> 
        <option value="00" selected>00</option> 
        ... 
    </select> 
    </span> 
    </p> 
    <p id="p_endtime" style="display:none">結(jié)束時(shí)間：<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"> 結(jié)束時(shí)間</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> 
      

?

在彈出層中，我們要處理幾個(gè)交互動(dòng)作，一是點(diǎn)擊日期輸入框時(shí)調(diào)用jquery ui的datepicker日期選擇器，二是選擇“全天”和“結(jié)束時(shí)間”復(fù)選框時(shí)需要顯示與隱藏的表單控件，最后是“確定”和“取消”按鈕的操作。

首先我們要在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> 
      

?

接著我們來(lái)處理調(diào)用日期選擇器和選擇“全天”及“結(jié)束時(shí)間”復(fù)選框時(shí)的動(dòng)作。

        $(function(){ 
    $(".datepicker").datepicker();//調(diào)用日歷選擇器 
    $("#isallday").click(function(){//是否是全天事件 
        if($("#sel_start").css("display")=="none"){ 
            $("#sel_start,#sel_end").show(); 
        }else{ 
            $("#sel_start,#sel_end").hide(); 
        } 
    }); 
     
    $("#isend").click(function(){//是否有結(jié)束時(shí)間 
        if($("#p_endtime").css("display")=="none"){ 
            $("#p_endtime").show(); 
        }else{ 
            $("#p_endtime").hide(); 
        } 
        $.fancybox.resize();//調(diào)整高度自適應(yīng) 
    }); 
}); 
      

?

關(guān)于日歷選擇器的使用，本站文章： 日期選擇器：jquery datepicker的使用 有相關(guān)介紹。而復(fù)選框勾選時(shí)，對(duì)應(yīng)的表單內(nèi)容進(jìn)行顯示與隱藏的操作，需要大家多試試，值得一提的是在勾選“結(jié)束時(shí)間”選項(xiàng)時(shí)，彈出層的高度會(huì)變化，這時(shí)可以調(diào)用$.fancybox.resize()來(lái)進(jìn)行自動(dòng)調(diào)整高度，否則在彈出層中會(huì)出現(xiàn)滾動(dòng)條影響視覺(jué)效果。

彈出層的最后操作時(shí)提交表單，很顯然，event.php表單代碼中的action提交到了do.php來(lái)處理的。我們調(diào)用 jquery.form.js進(jìn)行異步處理，提交表單時(shí)進(jìn)行表單驗(yàn)證，這里的beforeSubmit調(diào)用回調(diào)函數(shù)showRequest()，然后就是 提交成功后，success回調(diào)函數(shù)showResponse()。關(guān)于jquery.form.js的使用，后面筆者會(huì)在helloweba中專(zhuān)門(mén)講 解，敬請(qǐng)關(guān)注。

        $(function(){ 
    //提交表單 
    $('#add_form').ajaxForm({ 
        beforeSubmit: showRequest, //表單驗(yàn)證 
        success: showResponse //成功返回 
    });  
}); 
 
function showRequest(){ 
    var events = $("#event").val(); 
    if(events==''){ 
        alert("請(qǐng)輸入日程內(nèi)容！"); 
        $("#event").focus(); 
        return false; 
    } 
} 
 
function showResponse(responseText, statusText, xhr, $form){ 
    if(statusText=="success"){     
        if(responseText==1){ 
            $.fancybox.close();//關(guān)閉彈出層 
            $('#calendar').fullCalendar('refetchEvents'); //重新獲取所有事件數(shù)據(jù) 
        }else{ 
            alert(responseText); 
        } 
    }else{ 
        alert(statusText); 
    } 
} 
      

?

showResponse()根據(jù)接收狀態(tài)，獲取do.php返回的內(nèi)容，如果成功（指插入數(shù)據(jù)成功），則關(guān)閉彈出層，并且通過(guò)fullcalendar的refetchEvents方法重新載入所有日歷事件（局部刷新了日歷區(qū)的內(nèi)容），否則提示相關(guān)出錯(cuò)信息。

?

do.php

do.php用來(lái)處理表單提交，包括后面會(huì)講解的修改和刪除日歷事件的操作。通過(guò)處理表單數(shù)據(jù)，然后將數(shù)據(jù)寫(xiě)入MySQL數(shù)據(jù)表中，并且返回執(zhí)行結(jié)果。

        include_once('connect.php');//連接數(shù)據(jù)庫(kù) 
 
$action = $_POST['action']; 
if($action=='add'){ 
    $events = stripslashes(trim($_POST['event']));//事件內(nèi)容 
    $events=mysql_real_escape_string(strip_tags($events),$link); //過(guò)濾HTML標(biāo)簽，并轉(zhuǎn)義特殊字符 
 
    $isallday = $_POST['isallday'];//是否是全天事件 
    $isend = $_POST['isend'];//是否有結(jié)束時(shí)間 
 
    $startdate = trim($_POST['startdate']);//開(kāi)始日期 
    $enddate = trim($_POST['enddate']);//結(jié)束日期 
 
    $s_time = $_POST['s_hour'].':'.$_POST['s_minute'].':00';//開(kāi)始時(shí)間 
    $e_time = $_POST['e_hour'].':'.$_POST['e_minute'].':00';//結(jié)束時(shí)間 
 
    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 '寫(xiě)入失敗！'; 
    } 
} 
      

?

好了，本文簡(jiǎn)單介紹了在fullcalendar中創(chuàng)建日程事件的流程，代碼比較多，而且調(diào)用了多個(gè)相關(guān)插件，一次性看下來(lái)真要有點(diǎn)信心，特奉上代 碼包以供有需要的朋友下載后慢慢琢磨。接下來(lái)我們會(huì)介紹fullcalendar如何修改和刪除日歷事件，以及拖動(dòng)保存日歷事件等文 章，Helloweba感謝您的關(guān)注，順祝：十一放假愉快！