前一段时间，一个老项目需要新增一个小功能，日程表~
于是网上找了下，发现FullCalendar这个控件还不错于是就拿来用了下，下面简单介绍下我的学习笔记。
首先就是了解下FullCalendar的API
比较详细的我推荐的是
http://www.cnblogs.com/yuanxianlai/archive/2012/03/31/2427117.html
然后自己先把日历控件加载出来
记得先引用如下
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) } ] }); });
posted on 2015-06-10 10:07 阅读( ...) 评论( ...) 收藏