前一段时间，一个老项目需要新增一个小功能，日程表~
于是网上找了下，发现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) } ] }); });