FullCalendar-日志事件

FullCalendar可以灵活运用到项目开发中，本站上一篇文章中，我们介绍了如何在FullCalendar新建日程事 件，今天我要给大家介绍的是如何在FullCalendar中编辑和删除日程事件，这样我们就完成了FullCalendar上的“增删改查”一系列操 作。

查看演示DEMO

下载源码

 

HTML

和上一篇文章FullCalendar应用——新建日程事件一样，HTML页面我们仍然使用cal_opt.html，这里HTML代码及相关js和css文件的载入就不再详述，如果您是第一次阅读本文，请先从FullCalendar系列文章第一篇看起。

 

jQuery

在日历视图中，我们通过单击需要编辑的日程事件项，调用fancybox弹出编辑层。FullCalendar提供了事件单击eventClick方法，请看代码：

Js代码  


$(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代码  


<?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插件，代码也基本和新建事件一样。

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层，并刷新日历视图。

Php代码  


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：

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也要加上删除操作。

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的最后一个操作：拖动及保存日程事件做讲解以及总结，敬请关注。

 

来源于helloweba.com 》

FullCalendar应用——编辑与删除日程事件

fullcalendar_opt_all.zip (103.2 KB)
下载次数: 30