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 onemorecoke

需要更多解釋。 – 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 
      } 
     }

來源

2013-03-15 11:56:04

埃裏克·巴爾加斯感謝您的例子，我做了一個簡單的改變你的代碼，以便在第一天和最後一天將與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 
        }     

     },

來源

2013-05-09 08:56:46

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

有沒有更好的解決辦法？

來源

2013-10-01 08:03:43 kayz1

Fullcalendar - 需要爲特定日期設置背景顏色

回答

相關問題