Question

我正在尝试为特定日期设置背景颜色。我发现这有效：

$('.fc-day15').css('backgroundColor','black');

但颜色是网格中的第16个而不是白天。如果我知道当月1日的第一周的偏移量，我可以添加数字。

编辑：

我发现这有效：

                    var TheActualDay=15;
                    var DayOffset=($('#calendar').fullCalendar('getView').start.getTime()-$('#calendar').fullCalendar('getView').visStart.getTime())/(1000 * 60 * 60 * 24);
                    var DayNumber=(TheActualDay-1)+DayOffset;
                    $('.fc-day'+DayNumber.toString()).css('backgroundColor','black');

但是有更简洁的解决方案吗？

Answer 1

这是一种可能的解决方案。声明视图显示事件：

        viewDisplay: function(view) {
            if (view.name == 'month'){ //just in month view mode 
                var d = view.calendar.getDate(); //choise the date for cell customize
                var cell = view.dateCell(d); //get the cell location for date
                var bodyCells = view.element.find('tbody').find('td');//get all cells from current calendar
                var _element = bodyCells[cell.row*view.getColCnt() + cell.col]; //get specific cell for the date
                $(_element).css('background-color', '#FAA732'); //customize the cell
            }
        }

Answer 2

Erik Vargas感谢您的示例，我对您的代码进行了简单的更改，以便第一天和最后一天使用不同的颜色。

viewDisplay: function(view) {  

                    if (view.name == 'month')
                    { //just in month view mode 
                        var start_date = view.start; // this is the first day of the current month ( you can see documentation in Fullcalender web page )
                        var last_date = view.end; // this is actually the 1st day of the next month ( you can see documentation in Fullcalender web page )                          
                        //var d = view.calendar.getDate(); //choise the date for cell customize                         
                        var start_cell = view.dateCell(start_date); //get the cell location for date
                        var last_cell = view.dateCell(last_date); //get the cell location for date                   
                        var bodyCells = view.element.find('tbody').find('td');//get all cells from current calendar                                                       
                        var _element_firstday = bodyCells[start_cell.row*view.getColCnt() + start_cell.col]; //get specific cell for the date
                        var _element_lastday = bodyCells[last_cell.row*view.getColCnt() + last_cell.col]; //get specific cell for the date
                        //alert(start_cell.row*view.getColCnt() + start_cell.col);

                        $(_element_firstday).css('background-color', 'black'); //customize the cell #40ACC8
                        $(_element_lastday).css('background-color', 'blue'); //customize the cell #40ACC8
                    }                   

        },

Answer 3

eventRender: function (event, element, view) {          
        // like that
        var dateString = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd');
        view.element.find('.fc-day[data-date="' + dateString + '"]').css('background-color', '#FAA732');

        // or that
        var cell = view.dateToCell(event.start);
        view.element.find('tr:eq(' + (cell.row + 1) + ') td:eq(' + cell.col + ')').css('background-color', '#FAA732');
    }

有更好的解决方案吗？

Fullcalendar - 需要为特定日期设置背景颜色

3 个答案: