How does one set the background colour of individual cells rather than of events?

问题

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.

回答1:

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');
                    };
                }
            }
        }

回答2:

when doc ready, have a js function to select all TDs, with data-date the ones you want, and add CSS class to them. I don't know if it works, just an idea.

来源：https://stackoverflow.com/questions/24198631/how-does-one-set-the-background-colour-of-individual-cells-rather-than-of-events

标签

fullcalendar