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

问题描述：

我想设置特定日子的背景颜色。我发现这工作：Fullcalendar - 需要为特定日期设置背景颜色

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

但颜色上的网格16日，而不是一天。如果我知道这个月的第一个月的第一个星期的抵消额，我可以加上这个数字。

编辑：

我发现这工作：

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

但是，有没有更多的缩写解决方案吗？

需要更多解释。 – 2013-03-11 19:43:54

我上面做了一个修改。我不知道如何再创造一个像原文那样的更大的推荐区域。 – onemorecoke 2013-03-11 19:58:01

@blachawk：错！ .fc-dayN表示该项目在当前日历视图中为第N天。它不会说它是当前显示月份的第N天！它将根据当月的哪一天开始变化。 – MarcinJuraszek 2013-03-11 23:20:24

答

这是一个可行的解决方案。声明viewDisplay事件：

 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 
      } 
     }

答

埃里克·巴尔加斯感谢您的例子，我做了一个简单的改变你的代码，以便在第一天和最后一天将与diferent颜色。

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 
        }     

     },

答

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 - 需要为特定日期设置背景颜色

相关推荐