用php做日历并且编辑事情,日历插件fullcalendar+php的使用教程 — 编辑和删除日程...

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'";

}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 = '';

}

}

?>

编辑事件

">

日程内容：

placeholder="记录你将要做的一件事..." value="<?php  echo $title;?>">

开始时间：

id="startdate" value="<?php  echo $start_d;?>" readonly>

>

" selected><?php  echo $start_h;?>

00

...//这里省略多个option，下同

:

" selected><?php  echo $start_m;?>

00

...

>结束时间：

name="enddate" id="enddate" value="<?php  echo $end_d;?>" readonly>

>

" selected><?php  echo $end_h;?>

...

:

" selected><?php  echo $end_m;?>

...

>

全天

> 结束时间

value="删除">

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

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

}

}