Question

我不想为圣诞节和复活节等创建活动，而是希望能够对受影响的日期单元进行着色，甚至可能为每个事件设置灰色的半透明文本。有没有简单的方法在FullCalendar中执行此操作？

修改

我已经向我指出fc-state-highlight用于突出fc-today，所以也许可以做类似的事情，将css类应用于单元格并将其定义为＆＃34;公众假期颜色＆＃34;。一个想法。问题是如何将此类应用于相关日期，以使其在FC中工作而不会破坏任何内容。

Answer 1

可以使用eventAfterAllRender完成此操作。进行单独的ajax调用以查找所有假期，然后更改td的颜色。使用FC 2.0.1完成月份和假日为6月1日的示例：http://jsfiddle.net/marcrazyness/C8jpm

       eventAfterAllRender: function (view) {
            //Use view.intervalStart and view.intervalEnd to find date range of holidays
            //Make ajax call to find holidays in range.
            var fourthOfJuly = moment('2014-07-04','YYYY-MM-DD');
            var holidays = [fourthOfJuly];
            var holidayMoment;
            for(var i = 0; i < holidays.length; i++) {              
                holidayMoment = holidays[i];
                if (view.name == 'month') {
                    $("td[data-date=" + holidayMoment.format('YYYY-MM-DD') + "]").addClass('holiday');
                } else if (view.name =='agendaWeek') {
                    var classNames = $("th:contains(' " + holidayMoment.format('M/D') + "')").attr("class");
                    if (classNames != null) {
                        var classNamesArray = classNames.split(" ");
                        for(var i = 0; i < classNamesArray.length; i++) {
                            if(classNamesArray[i].indexOf('fc-col') > -1) {
                                $("td." + classNamesArray[i]).addClass('holiday');
                                break;
                            }
                        }
                    }
                } else if (view.name == 'agendaDay') {
                    if(holidayMoment.format('YYYY-MM-DD') == $('#calendar').fullCalendar('getDate').format('YYYY-MM-DD')) {
                        $("td.fc-col0").addClass('holiday');
                    };
                }
            }
        }

Answer 2

当doc准备就绪时，有一个js函数来选择所有的TD，data-date是你想要的，并为它们添加CSS类。我不知道它是否有效，只是一个想法。

如何设置单个细胞的背景颜色而不是事件的背景颜色？

2 个答案: