FullCalendar用日历的形式直观的展示了日程安排、代办事宜等事件，那么日历中的事件是怎么添加进去的呢？本文将结合实例使用PHP+MySQL+jQuery讲解如何在FullCalendar中新建事件。

HTML

<link rel="stylesheet" type="text/css" href="css/fullcalendar.css"><link rel="stylesheet" type="text/css" href="css/fancybox.css"><script src='js/jquery-1.9.1.min.js'></script><script src='js/jquery-ui-1.10.3.custom.min.js'></script><script src='js/fullcalendar.min.js'></script><script src='js/jquery.fancybox-1.3.1.pack.js'></script>
接着，我们在body中加入以下代码：<div id="calendar"></div>
好，到这里我们关键的一步到来了，我们通过单击日历中的任意日期空白格子时，弹出一个要求输入事件相关信息的层，通过在层中的表单输入相关信息并提交来完成新建事件的操作。
$(function() {	$('#calendar').fullCalendar({		events: 'json.php', //事件数据源		dayClick: function(date, allDay, jsEvent, view) {			var selDate =$.fullCalendar.formatDate(date,'yyyy-MM-dd');//格式化日期			$.fancybox({//调用fancybox弹出层				'type':'ajax',				'href':'event.php?action=add&date='+selDate			});    	}	});});
event.php
<div class="fancy">	<h3>新建事件</h3>    <form id="add_form" action="do.php" method="post">    <input type="hidden" name="action" value="add">    <p>日程内容：<input type="text" class="input" name="event" id="event" style="width:320px" placeholder="记录你将要做的一件事..."></p>    <p>开始时间：<input type="text" class="input datepicker" name="startdate" id="startdate" value="<?php echo $_GET['date'];?>">    <span id="sel_start" style="display:none"><select name="s_hour">    	<option value="00">00</option>        ...<!--省略多个option，下同-->    </select>:    <select name="s_minute">    	<option value="00" selected>00</option>        ...    </select>    </span>    </p>    <p id="p_endtime" style="display:none">结束时间：<input type="text" class="input datepicker" name="enddate" id="enddate" value="<?php echo $_GET['date'];?>">    <span id="sel_end" style="display:none"><select name="e_hour">    	<option value="00">00</option>    	...    </select>:    <select name="e_minute">    	<option value="00" selected>00</option>        ...    </select>    </span>    </p>    <p>    <label><input type="checkbox" value="1" id="isallday" name="isallday" checked> 全天</label>    <label><input type="checkbox" value="1" id="isend" name="isend"> 结束时间</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>
首先我们要在event.php中载入jquery ui的样式以及ajax处理表单的插件：jquery.form.js。<link rel="stylesheet" type="text/css" href="css/jquery-ui.css"<<script type="text/javascript" src="js/jquery.form.min.js"></script>$(function(){	$(".datepicker").datepicker();//调用日历选择器	$("#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();//调整高度自适应	});});
弹出层的最后操作时提交表单，很显然，event.php表单代码中的action提交到了do.php来处理的。我们调用jquery.form.js进行异步处理，提交表单时进行表单验证，这里的beforeSubmit调用回调函数showRequest()，然后就是提交成功后，success回调函数showResponse()。关于jquery.form.js的使用，后面笔者会在helloweba中专门讲解，敬请关注。$(function(){	//提交表单	$('#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.phpinclude_once('connect.php');//连接数据库$action = $_POST['action'];if($action=='add'){	$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);	}elseif($isallday=="" && $isend==1){		$starttime = strtotime($startdate.' '.$s_time);		$endtime = strtotime($enddate.' '.$e_time);	}else{		$starttime = strtotime($startdate.' '.$s_time);	}	$colors = array("#360","#f30","#06c");	$key = array_rand($colors);	$color = $colors[$key];	$isallday = $isallday?1:0;	$query = mysql_query("insert into `calendar` (`title`,`starttime`,`endtime`,`allday`,`color`)     values ('$events','$starttime','$endtime','$isallday','$color')");	if(mysql_insert_id()>0){		echo '1';	}else{		echo '写入失败！';	}}