Fullcalendar - 특정 날짜의 배경색을 설정해야합니다.

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 이벤트를 선언 : 첫 번째와 마지막 날은 다른 색상으로 될 수 있도록

 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

에릭 바 가스가 예를 들어 주셔서 감사합니다, 나는 당신의 코드에 간단한 변경을했다. 더 나은 솔루션

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

있습니까?