最近有个日程管理的需求，就学习了一下 FullCalendar 控件的一些基本知识，本文不是详细介绍该控件的 API 的文档，而是记录本人使用过程中的一些学习情况。
先看一下效果图 月/周/日视图 黄色表示今天：
其中有两个事项，rrr 和 test 是名称，7a 和 5a 是开始时间，其中 a 表示上午，同理 p 表示下午，周视图和日视图左侧都有时间轴。
在 html 中建立一个空的 div ：
<div id='fullCalendarDemo'>
</div>
接下来就是 js 代码了，详细的解释会写在注释里，可以配合插图看，方便理解，代码中写 //TODO 的地方需要自己编写相关界面代码，一般为弹窗，或者新页面等来对事项进行增删改：
$(document)
.ready(
function() {
$('#fullCalendarDemo')
.fullCalendar({ //初始化日历
header: { //日历最上面表示头部
left: 'prev,next today', //左边是 前一月/周/日，后一月/周/日 以及 回到今天按钮
center: 'prevYear,title,nextYear', //中间是 去年的本月/周/日 当前试图的时间 明年的本月/周/日
right: 'month,agendaWeek,agendaDay' //切换日历显示月/周/日视图
},
monthNames: ["一月", "二月", "三月", "四月", //设置月份名称，中英文均可
"五月", "六月", "七月", "八月", "九月",
"十月", "十一月", "十二月"
],
monthNamesShort: ["一月", "二月", "三月", //设置月份的简称
"四月", "五月", "六月", "七月", "八月",
"九月", "十月", "十一月", "十二月"
],
dayNames: ["周日", "周一", "周二", "周三", //设置星期名称
"周四", "周五", "周六"
],
dayNamesShort: ["周日", "周一", "周二", //设置星期简称
"周三", "周四", "周五", "周六"
],
today: ["今天"], //today 按钮的显示名称
firstDay: 0, //设置每星期的第一天是星期几，0 是星期日
buttonText: { //设置按钮文本
today: '今天',
month: '月',
week: '周',
day: '日',
prev: '上一月',
next: '下一月'
},
height: windowHeigth, //设置日历高度，宽度是自适应的，不好改，windowHeight 是我计算的值
currentTimezone: 'Asia/Beijing', //设置时区
theme: true, //true 时日历主题可随 jQuery ui 的主题变化
selectable: true, //元素是否可以被选中
selectHelper: true, //选中元素时是否显示相关信息
select: function(startDate, endDate, //选中某元素的方法，startDate 事项的起始时间，endDate 事项的结束时间
allDay, jsEvent, view) { // allDay 事项是否为全天事项，jsEvent 控件的内置对象，view 当前视图
var startD = $.fullCalendar
.formatDate(startDate,
'yyyy-MM-dd HH:mm:ss'); //formatDate 是格式化时间的方法
var endD = $.fullCalendar
.formatDate(endDate,
'yyyy-MM-dd HH:mm:ss');
//TODO 添加选中某元素时需要进行操作的方法，比如：添加会议、备注等事项
},
eventClick: function(event) { //点击事项的方法
var startD = $.fullCalendar
.formatDate(event.start,
'yyyy-MM-dd HH:mm:ss');
var endD = $.fullCalendar
.formatDate(event.end,
'yyyy-MM-dd HH:mm:ss');
//TODO 添加点击某事项时需要进行操作的方法，比如：修改会议、备注等事项
},
editable: true, //事项是否可编辑，改变大小、拖拽等
eventResize: function(event, dayDelta, minuteDelta, revertFunc) {
//事项大小改变后的方法，往往修改事项的起止时间，event 改变的事项，dayDelta 变化的天数，minuteDelta 变化的分钟数，revertFunc 回调函数
var startD = $.fullCalendar
.formatDate(event.start,
'yyyy-MM-dd HH:mm:ss');
var endD = $.fullCalendar
.formatDate(event.end,
'yyyy-MM-dd HH:mm:ss'); //TODO 添加改变某事项大小时需要进行操作的方法，比如：修改会议、备注等事项 if (!confirm("is this okay?")) {
revertFunc(); //如果不要改变，则将事项还原
} },
eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) { //拖拽事项之后的方法，allDay 是否全天事项，其他参数同上
var startD = $.fullCalendar
.formatDate(event.start,
'yyyy-MM-dd HH:mm:ss');
var endD = $.fullCalendar
.formatDate(event.end,
'yyyy-MM-dd HH:mm:ss'); //TODO 添加拖拽某事项之后需要进行操作的方法，比如：修改会议、备注等事项 if (!confirm("is this okay?")) {
revertFunc();
} },
events: function(start, end, callback) {
//获取事项的数据，这里是用的 function ，可以是 array ，也可以是 json
}
});
});
另外，还有几个常用的方法：
$('#fullCalendarDemo').fullCalendar('refetchEvents'); 对事项进行增删改之后可以用来单独刷新日历控件，而不要重新读取数据库
$('#fullCalendarDemo').fullCalendar('updateEvent', event); 单独刷新指定事项
$('#fullCalendarDemo').fullCalendar( 'gotoDate', year [, month, [ date ]] ); 查看指定日期的日程，需要注意的是月份是从0开始的，即1月份为0，2月份为1······
一般日期的存储会用 String 类型，在 parseInt 时有一点需要注意的是 IE 8 的不兼容（其他版本 IE 未测试）。
最后，就说说控件内置的 event Object 对象，只说几个我认为比较需要谈的参数：title、start 必选，考虑到数据存储的问题，id 最好也是必选的，如果是全天事项，即 allDay 为 true，则 end 可以不填， 个人建议当这种情况时，可以设置 end 为当天的 00:00:00。
完整 API 请移步官网文档。