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()的。

  
      
    
       
     
            
      
编辑事件
      
      
             
       
        ">      
        
日程内容：
         
      
        
开始时间：
         
                
          
           >
           
                      
            
             " selected>
                       
             
              00          ...//这里省略多个option，下同      :      
              
                         
               
                " selected>
                          
                
                 00          ...                  
                
               
              
             
            
           
          
         
      
        
         >结束时间：
         
                
          
           >
           
                      
            
             " selected>
                       ...      :      
             
                        
              
               " selected>
                         ...                  
               
      
               
      
                 
                  >   全天
                       
                 
                  > 结束时间
                       
      
               
                
                 
                  
                      
                   
                              
                     
                   
                  
                 
                
               
              
             
            
           
          
         
        
       
      
     
    

关键是处理日期和时间的显示，当然这也不是本文重点，大家可以下载源码慢慢研究。

我们还需要加入代码处理表单提交和验证，和上文的新建事件一样，我们使用了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 '事件不存在！';      }  }