前一段时间，一个老项目需要新增一个小功能，日程表~
于是网上找了下，发现FullCalendar这个控件还不错于是就拿来用了下，下面简单介绍下我的学习笔记。
首先就是了解下FullCalendar的API
比较详细的我推荐的是
http://www.cnblogs.com/yuanxianlai/archive/2012/03/31/2427117.html
然后自己先把日历控件加载出来
记得先引用如下
<script type="text/javascript" src='fullcalendar/lib/jquery-1.3.2.min.js'></script>
<script type="text/javascript" src='fullcalendar/lib/jquery.min.js'></script>
<script type="text/javascript" src='fullcalendar/lib/jquery-ui.custom.min.js'></script>
<script type="text/javascript" src='fullcalendar/fullcalendar.min.js'></script>
<script type="text/javascript" src='calendar.js'></script>
<link href="fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />
PS：我发布到具体的IIS服务器时，出现了加载jquery-1.3.2.min.js为定义的错误，此时可替换jquery-1.10.2.min.js 即可
$(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#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 添加选中某元素时需要进行操作的方法，比如：添加会议、备注等事项
alert("1");
},
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 添加点击某事项时需要进行操作的方法，比如：修改会议、备注等事项
alert("2");
},
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 添加改变某事项大小时需要进行操作的方法，比如：修改会议、备注等事项
alert("3");
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 添加拖拽某事项之后需要进行操作的方法，比如：修改会议、备注等事项
alert("4");
if (!confirm("is this okay?")) {
revertFunc();
}
},
events: //function(start, end, callback) { }//获取事项的数据，这里是用的 function ，可以是 array ，也可以是 json
[{
title: '张丽值班',
start: new Date(y, m, 1)
},
{
title: '小吴值班',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
}
]
});
});