如何设置单个单元格的背景颜色而不是事件？ [英] How does one set the background colour of individual cells rather than of events?

问题描述

与其为圣诞节和复活节等创建活动，我希望能够对受影响的日期单元格着色，甚至可能为每个事件涂上一层灰色半透明文字。是否有任何简单的方法在FullCalendar中执行此操作？

编辑
$ b 我已经指出fc-state-highlight用于强调fc-today，所以也许可以做类似的事情，将css类应用于单元格并将其定义为公共假日颜色。一个想法。问题是，如何将这个类应用到相关日期，以便它在FC内工作而不会破坏任何内容。

解决方案

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

  eventAfterAllRender：function（view）{
 //使用view.intervalStart和view.intervalEnd找到假期的日期范围
 //使ajax呼叫找到范围内的假期。 
 var fourthOfJuly = moment（'2014-07-04'，'YYYY-MM-DD'）; 
 var holidays = [fourthOfJuly]; 
 var holidayMoment; 
 for（var i = 0; i  holidayMoment = holidays [i]; 
 if（view.name =='month'）{
 $（td [data-date =+ holidayMoment.format（'YYYY-MM-DD'）+]）。addClass （'假日'）; 
} else if（view.name =='agendaWeek'）{
 var classNames = $（th：contains（'+ holidayMoment.format（'M / D'）+'） ）.attr（ 类）; 
 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'）; 
休息; （'YYYY-MM-DD'）（$ Y $ Y $ Y $ Y $ Y $ Y $ Y $ Y $ Y $ Y $ Y $ Y $ Y $ Y $ Y $ Y $ Y $ Y $ Y $ Y $ Y $ Y 
 
 
} else if（view.name =='agendaDay'）{
 if（holidayMoment.format ）== $（'＃calendar'）。fullCalendar（'getDate'）。format（'YYYY-MM-DD'））{
 $（td.fc-col0）。addClass（'holiday' ）; 
}; 
} 
} 
} 
  

Rather than create events for Christmas and Easter and the like, I'd like to be able colour the date cells affected, and even perhaps have a grey translucent text for each event. Is there any easy way to do this in FullCalendar?

EDIT

It's been pointed out to me that fc-state-highlight is used to highlight fc-today, so perhaps a similar thing could be done, applying a css class to cells and defining it as "public holiday colour". A thought. The problem is how does one apply this class to the relevant dates such that it works within FC without breaking anything.

解决方案

This could be done using eventAfterAllRender. Make a separate ajax call to find all of the holidays then change the color of the td. Example for month and holiday being June 1st, done with FC 2.0.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');
                    };
                }
            }
        }

这篇关于如何设置单个单元格的背景颜色而不是事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！