JQuery FullCalendar(二)

前言：根据前文介绍，我们对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">&nbsp;&nbsp;&nbsp;</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();
            }