标签：
首先简单说一下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中的日期时间的话，很强大
---恢复内容结束---
标签：
原文地址：http://www.cnblogs.com/liu411323/p/4240890.html
