广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    FullCalendar编辑与删除日程事件

    2018-04-13 09:16:39 次阅读 稿源:互联网
    零七广告

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

    jQuery
    $(function() {	$('#calendar').fullCalendar({		//单击事件项时触发		eventClick: function(calEvent, jsEvent, view) {			$.fancybox({				'type':'ajax',				'href':'event.php?action=edit&id='+calEvent.id			});		}	});});

    event.php
    <?phpfunction 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 }?>$(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);	}}
    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{	}

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

    零七网部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与零七网进行文章共享合作。

    零七广告