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