首先简单说一下fullcalendar插件，fullcalendar是一个jquery日历插件，主要用来做日历日程会议等的安排展示等。
因为项目中用到了fullcalendar，也碰到了一些问题，因此记录一下，以备下次使用，也给后来者以帮助。
要使用fullcalendar，首先要在页面引用关键的js文件
<link href="~/Content/fullcalendar/fullcalendar.css" rel="stylesheet" /> <script src="~/Scripts/jquery-1.8.2.js"></script> <script src="~/Content/fullcalendar/lib/moment.min.js"></script> <script src="~/Content/fullcalendar/fullcalendar.js"></script>
包括基本样式文件，jquery库，以及Moment.js。moment.js是一个相当强大的时间处理库，这个也导致在开发中遇到了个坑。
页面中添加相应的元素，比如我测试的
<div id="calendar"></div>
在页面的js中加入如下代码，下边会详细做说明
$(‘#calendar‘).fullCalendar({
header: {
left: ‘prev,next today‘,
center: ‘title‘,
//right: ‘month,agendaWeek,agendaDay‘ //带小时
right: ‘month,basicWeek,basicDay‘
},
height: 500,
defaultDate: new Date(),
timezone: "local",
editable: true,
eventLimit: true, // allow "more" link when too many events
eventClick: function (event) {
var time = moment(event.start);
var startTime = time.format("YYYY/MM/DD");
ShowInfo(event.id, event.title, event.state, startTime, event.performance, event.userName);
},
@*viewRender: function (view) {//动态查询数据并展示
var s = moment(view.start);
var start = s.format("YYYY/MM/DD HH:mm:ss");
var e = moment(view.end);
var end = e.format("YYYY/MM/DD HH:mm:ss");
$("#calendar").fullCalendar(‘removeEvents‘);
$.post("@Url.Content("~/Operation/GetList")", { userId: "liu", startTime: start, endTime: end }, function (data) {
var result = data.data;
$.each(result, function (index, term) {
$("#calendar").fullCalendar(‘renderEvent‘, term, true);
});
}, "JSON");//把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示
},*@
eventAfterRender: function (event, element, view) {
//$(element).on("dblclick", function () {
//});
},
eventRender: function (event, element) {
},
events: function (start, end, timeZone, callback) {
var s = moment(start);
var start = s.format("YYYY/MM/DD HH:mm:ss");
var e = moment(end);
var end = e.format("YYYY/MM/DD HH:mm:ss");
$("#calendar").fullCalendar(‘removeEvents‘);
$.post("@Url.Content("~/Operation/GetList")", { userId: "liu", startTime: start, endTime: end }, function (data) {
var result = data.data;
//$.each(result, function (index, term) {
// $("#calendar").fullCalendar(‘renderEvent‘, term, true);
//});
callback(result);
}, "JSON");//把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示
}
});
fullcalendar的初始化，包括一些事件以及参数的设置
1、header下的left设置日历左边部分的按钮，表示切换上月，上周下月下周等，right设置日历的基本展示方式，注释的地方有说明，一种精确到小时，一种只是到天。
2、defaultDate即设置日历初始化时默认显示的月份日期。
3、timezone这个感觉设置跟没设置区别不大，没有用到，也没做深入了解。
4、eventlimit设置当一个日期下日程多的时候是否显示More来展示
重点说一下日程时间数据的展示渲染，一种是通过event相关的事件或者方法来展示，包括events数组，对象，函数等获取数据源，然后绑定到日历，另外一种是viewrender的方法绑定，不推荐后一种，因为有些时候不可控，很难处理。
events可以是直接的数组，events可以是json对象，也可以是function，本文就是采用的function的方法处理的，因为事件可能很多，因此采用动态切换日历时去加载，所以要取到当前日历视图的起始时间，然后对起始时间的处理。之前版本是fullcalendar将moment.js的方法集成在自身中，直接调用
$.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss"),现在需要引用moment.js自己处理，但是也很简单，代码中有详细使用，取到数据之后直接调用callback(data)此时即调用了eventRender方法，该方法可以什么都不写，也可以写自己需要处理的逻辑，也可以使用代码中注释掉的三行，自己去循环然后绑定事件到日历。eventclick是对点击事件时需要做的处理，event参数包含了该event的所有属性方法。问题：fullcalendar 没有对事件做双击事件的封装，呢我们怎么处理？可以在eventAfterRender方法中处理，代码中有注释说明。如果我单击事件，弹出事件详细信息，然后我对事件做了修改，呢么我如何同步该修改到日历呢？这就是事件数据呈现时用events的好处了，此时可以直接调用 $("#calendar").fullCalendar(‘refetchEvents‘); 即可重新渲染事件了。最后推荐下moment.js，如果需要处理js中的日期时间的话，很强大
---恢复内容结束---