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

2013年10月10日 22:39helloweba.com 作者:月光光 标签:jQuery  Fullcalendar 

FullCalendar可以灵活运用到项目开发中,本站上一篇文章中,我们介绍了如何在FullCalendar新建日程事件,今天我要给大家介绍的是如何在FullCalendar中编辑和删除日程事件,这样我们就完成了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()的。

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

$(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 '事件不存在!';
	}
}

好了,本文介绍了编辑和删除fullCalendar日历事件,文中给出的代码不是连贯的,建议不要直接复制使用,您可以看明白了再测试,当然,如果你够懒,可以下载本文提供的打包文件,包括读取、新建、编辑和删除日程事件功能。Hellwoeba.com感谢您的关注,接下来月光光会对fullCalendar的最后一个操作:拖动及保存日程事件做讲解以及总结,敬请关注。

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/234.html

21条评论

  • 方家安

    为什么删除了,不会刷新,要手动刷新才可以

  • 问下,数据库文件在哪里啊?

  • 怎么下载源码?

  • 楼主,怎样才能改变月份时触发一个事件获得月份呢?

  • 可不可以支持鼠标划过相应日期块,可以触发一个响 应呢,比如:鼠标划过某个日期块,可以获取当天的时间

  • 哦,下载了,谢谢

  • 请直接下载源码

  • 能把demo给我发来吗?zhoudongfeng@126.com我想用这个写个java的试试,谢谢楼主

  • 怎么样才能显示出结束时间呢?

  • 求教楼主,为什么我的fancybox添加事件按确定后在日历上不显示呢?

  • 这个不错。学习了,版主加油!希望越办越好!

  • 如何做到 多显示些内容?
    $(json).each(function() {
    events.push({
    title:$(this).attr('title'),
    reg_num:$(this).attr('reg_num'),
    color:$(this).attr('color') ,
    start:$(this).attr('start') ,
    end:$(this).attr('end')
    });
    });
    callback(events);
    但是 reg_num 字段显示不出来

  • 楼主 为什么我用的时候会报TypeError: $.fancybox is not a function这个错误呢

  • 楼主,为什么,新建了时间以后,没有办法在日程表里面出现啊,只能出现在一大段的代码

  • 可以在eventClick中根据日期时间判断,是否提供修改和删除功能。

  • 学习了!

  • 博主加油

  • bug不少哦

  • 感谢分享 期待分享 FullCalendar如何让“今天”之前时间写的 “事件” 无法操作(无法修改或者删除)

  • 谢谢提醒,已经修复