欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > JavaScript >

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

发布时间:2015-08-07  编辑:杨雨个人博客网站   点击:   

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 }?>

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

本文地址:http://itbyc.com/web/javascript/3042.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1