前言：根据前文介绍，我们对JQuery FullCalendar如何从后台取数据有了初步了解，已经实现最基本的要求。下面介绍一下FullCalendar的事件
$('#calendar').fullCalendar("getView")的属性
name : month 当前视图类型，月（month），周（agendaWeek），日（agendaDay）
title : 2013年11月 当前视图显示的年月
start : 2013-11-01 00:00:00 当前视图该月份（星期）的第一天
end : 2013-12-01 00:00:00 当前视图该月份（星期）的最后一天+1
visStart : 2013-10-27 00:00:00 当前视图的第一天日期
visEnd : 2013-12-08 00:00:00 当前视图的最后一天日期
$('#calendar').fullCalendar("getDate")
getDate : 2013-11-21 08:06:20 当天日期详细
一、dayClick事件
dayClick,当单击日历中的某一天时，触发callback
date : 2013-11-19 00:00:00 点击的day的时间
allDay : true 是否为全天事件
jsEvent : [object Object]
view : [object Object]
dayClick: function (date, allDay, jsEvent, view) {
if
($(this).hasClass("bg")) {
$(
this
).removeClass("bg");
//设置点击日期的背景颜色
}else
{
$(
this
).addClass("bg");
}
alert("name :" + $('#calendar').fullCalendar("getView").name);
alert("getDate :" + $.fullCalendar.formatDate($('#calendar').fullCalendar("getDate"), "yyyy-MM-dd HH:mm:ss") );
alert("date :" + $.fullCalendar.formatDate(date, "yyyy-MM-dd HH:mm:ss") ); //点击的day的时间
alert("allDay :" + allDay );
alert("jsEvent :" + jsEvent);
alert("view :" + view);
}
二、eventClick事件
eventClick,当点击日历中的某一日程（事件）时，触发此操作
calEvent.id:返回当前点击对象的id(id值和数据库的一致)
calEvent.title:返回当前点击对象的title(title值和数据库的一致)
eventClick: function (calEvent, jsEvent, view) { alert('calEvent.id: ' + calEvent.id); alert('calEvent.title: ' + calEvent.title); alert('calEvent.start: ' + calEvent.start); $(this).css('border-color', 'red'); }
三、eventAfterRender
当日程事件被渲染后触发
event: 返回渲染对象的数据
element: 包含渲染对象的HTML内容，可以对其进行重写
view:返回当前视图
通过打印element.html()我们可以观察其内容，也可以用开发者工具查看对应的html代码
可以发现，显示在网页上的内容由两个span标记显示出来的，并且第一个div标记的class含有inner字样，先来看看这个结构
其实这个日程事件（fc-event-inner）就渲染在class名为fc-event-container的div中，并且和element.html()内容是吻合的，
于是猜测修改此处代码可以修改前台页面的显示，替代element.html（）里面的元素，并且为日历表单元格添加背景颜色和点击事件
eventAfterRender: function (event, element, view) { if (view.name == "month") { var startTime = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd"); var evtcontent = '<div class="fc-event-inner">'; evtcontent = evtcontent + '<span class="fc-event-time">' + startTime + '</span>'; evtcontent = evtcontent + '<span class="fc-event-title">' + event.title + '</span>'; evtcontent = evtcontent + '</div>';
//如果不加入下面的html，页面日程事件可以拖动，无法改变大小 evtcontent = evtcontent + '<div class="ui-resizable-handle ui-resizable-e"> </div>'; element.html(evtcontent); //通过开发者工具调试页面，发现其单元格含有data-date=2013-11-21这样的标记表示单元格
$("[data-date=" + startTime + "]").addClass("bg"); $("[data-date=" + startTime + "]").click(function () { location.href = "index.aspx"; }); } }
到此，不难发现要控制FullCalendar页面样式是件很简单的事情了，因为我们掌握了它的结构，可以用开发者工具详细研究，通过CSS或者其他方式控制样式
四、eventDrop,eventResize
这是一个很酷的事件，拖动日期事件的时间（start,end同时改变相同的timespan），改变日程事件的结束时间（改变end的时间）
前提是editable:true(默认值也是true)
event.id:返回当前日期的ID值，对应数据库的ID
dayDelta:保存日期向前或向后移动了多少天
minuteDelta:这个值只有在agenda视图有效，移动的时间
eventDrop: function (event, dayDelta, minuteDelta,allDay) { $.post("json.ashx?action=move", { "event": event.id, "dayDelta": dayDelta, "minuteDelta": minuteDelta }, function (data) { }); }, eventResize: function (event, dayDelta, minuteDelta,allDay) { $.post("json.ashx?action=resize", { "event": event.id, "dayDelta": dayDelta, "minuteDelta": minuteDelta }, function (data) { }); }
在后台，我们简单处理一下递交过来的数据
else if (action == "move") { int dayDelta = int.Parse(context.Request["dayDelta"]); int minuteDelta = int.Parse(context.Request["minuteDelta"]); int id = int.Parse(context.Request["eventid"]); AddNewsDataContext db = new AddNewsDataContext(); var res = db.calendar.Single(b => b.Id == id); res.start = res.start.Value.AddDays(dayDelta); res.end = res.end.Value.AddDays(dayDelta); res.start = res.start.Value.AddMinutes (minuteDelta); res.end = res.end.Value.AddMinutes(minuteDelta); db.SubmitChanges(); } else if (action == "resize") { int dayDelta = int.Parse(context.Request["dayDelta"]); int id = int.Parse(context.Request["eventid"]); int minuteDelta = int.Parse(context.Request["minuteDelta"]); AddNewsDataContext db = new AddNewsDataContext(); var res = db.calendar.Single(b => b.Id == id); res.end = res.end.Value.AddDays(dayDelta); res.end = res.end.Value.AddMinutes(minuteDelta); db.SubmitChanges(); }