fullCalendar设置日期td样式

  本示例通过遍历fullCalendar显示日期的容器,和要设置特殊样式的日期进行对比,对比成功则设置此日期的容器的样式为给定的参数样式。

2013-12-31更新:增加当前年月限制,防止跨年月设置。

2014-01-02更新:增加周/日显示模式的高亮控制,增加的高亮改为控制通过样式控制,方便更换模式或者点击上下箭头切换日期后清空高亮显示,具体看代码解释

2014-01-08更新:通过比对fullCalendar当前显示的日期进行设置,不是当前年月日的日期对应的格子一起加上样式。注意参数修改过,传递view对象。

  view模式为“月”效果图,跨年月

fullCalendar设置日期td样式

  view模式为“周”效果图,跨年月

fullCalendar设置日期td样式

  view模式为“日”效果图

fullCalendar设置日期td样式

  示例代码如下

新增高亮样式

<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样式

评论(1)Web开发网
阅读(2915)喜欢(0)JavaScript/Ajax开发技巧