fullCalendar设置日期td样式
本示例通过遍历fullCalendar显示日期的容器,和要设置特殊样式的日期进行对比,对比成功则设置此日期的容器的样式为给定的参数样式。
2013-12-31更新:增加当前年月限制,防止跨年月设置。
2014-01-02更新:增加周/日显示模式的高亮控制,增加的高亮改为控制通过样式控制,方便更换模式或者点击上下箭头切换日期后清空高亮显示,具体看代码解释
2014-01-08更新:通过比对fullCalendar当前显示的日期进行设置,不是当前年月日的日期对应的格子一起加上样式。注意参数修改过,传递view对象。
view模式为“月”效果图,跨年月
view模式为“周”效果图,跨年月
view模式为“日”效果图
示例代码如下
新增高亮样式
<style> .specialday{background-color:red;color:white} </style>
function isSameDay(d1, d2) {//判断2个日期对象是否为同一天 return d1.getDate() == d2.getDate() && d1.getMonth() == d2.getMonth() && d1.getFullYear() == d2.getFullYear(); } function setBasicDay(days, calendarID, cls, currentDate) { //fullCalendar view模式为basicDay for (var i = 0; i < days.length; i++) { if (isSameDay(days[i], currentDate)) {//日对比成功 $('#' + calendarID + ' div.fc-view-basicDay').find('th,td').addClass(cls); return; //对比成功直接退出函数,因为只显示一天 } } } function setBasicWeek(days, calendarID, cls, currentDate) { //fullCalendar view模式为basicWeek var year = currentDate.getFullYear(), month = currentDate.getMonth(), date = currentDate.getDate(); for (var i = 0; i < days.length; i++) { for (var j = 0; j < 7; j++) { currentDate.setDate(currentDate.getDate() + (j == 0 ? 0 : 1)); //设置开始日期为从周一到周日和当前循环到的日期进行对比 if (isSameDay(days[i], currentDate)) { $('#' + calendarID + ' div.fc-view-basicWeek').find('th:eq(' + j + ')').addClass(cls).end().find('td:eq(' + j + ')').addClass(cls); break; //退出当前循环 } } //重新还原成当前周一的日期,注意getMonth得到的月份是从0~11,但是日期对象参数需要的是1~12 currentDate = new Date(year + '/' + (month + 1) + '/' + date); } } //setFocusDays参数说明 //@days:日期对象数组,对比当前fullCalendar显示的日期,以便添加样式,注意是日期对象 //@calendarID:fullCalendar的容器id //@cls:要给对比成功的日期容器添加的样式名称 //@view:当前fullCalendar显示view(显示模式)对象 function setFocusDays(days, calendarID, cls, view) { //fullCalendar由于没有重新生成table,所以上一次对比可能成功的样式没有去掉 //要注意先清空可能已经设置的td样式,要不对不不成功上一次设置的td样式还会保留下来 $('#' + calendarID + ' th,#' + calendarID + ' td').removeClass(cls); var currentDate = view.start, viewName = view.name; if (viewName == 'basicDay') setBasicDay(days, calendarID, cls, currentDate); //按日显示,currentDate即为显示的日期 else if (viewName == 'basicWeek') setBasicWeek(days, calendarID, cls, currentDate); //按周显示,currentDate即为显示的周的星期一 else {//按月份显示 var startDate = view.visStart, endDate = view.visEnd; //fullCalendar当前显示开始日期和结束日期 var divDay = $('#' + calendarID + ' div.fc-day-number'); //获取fullCalendar显示日期的div容器 var index = 0; var year = startDate.getFullYear(), month = startDate.getMonth(), date = startDate.getDate(); //记录开始日期的年月日,以便进行还原操作 for (var i = 0; i < days.length; i++) { index = 0; //重置下标 while (!isSameDay(startDate, endDate)) { if (isSameDay(days[i], startDate)) {//跨月容器增加了透明样式,注意去掉 divDay.eq(index).closest('td').addClass(cls).removeClass('fc-other-month'); break; } startDate.setDate(startDate.getDate() + 1); //fullCalendar显示的下一个日期 index++; } startDate = new Date(year + '/' + (month + 1) + '/' + date); //还原开始日期,以便和下一个需要的日期对比 } } } $(document).ready(function () { $('#calendar').fullCalendar({ //........fullcalendar其他配置 viewDisplay: function (view) {//每次日历加载以及日历的view改变的时候触发一次 //这里特意传递一个12年的参数 setFocusDays([new Date('2013/12/30'), new Date('2014/1/3'), new Date('2013/12/31')], 'calendar', 'specialday', view); } }); });
加支付宝好友偷能量挖...
原创文章,转载请注明出处:fullCalendar设置日期td样式