FullCalendar應用——增刪改數據操做

FullCalendar能夠靈活運用到項目開發中，本站上一篇文章中，咱們介紹瞭如何在FullCalendar新建日程事件，今天我要給你們介紹的是如何在FullCalendar中編輯和刪除日程事件，這樣咱們就完成了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 '事件不存在！';     } }