用html完成编辑日程,FullCalendar应用——编辑与删除日程事件

HTML

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

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