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

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

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

在日历视图中，我们通过单击需要编辑的日程事件项，调用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根据请求过来的参数，读取对应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 = $st