Fullcalendar v2 dayRender for agenda view和agendaWeek

Question

在Fullcalender的第2版中，我需要dayRender回調，我想更改禁用日的顏色。

此回調僅適用於month，basicWeek和basicDay views ..但是我需要爲agendaWeek和議程調用回調。

你有任何替代或答案dayRender？

我試試這個：

 dayRender: function(date, cell){ 
      if (date > maxDate){ 
       $(cell).addClass('disabled'); 
       console.log("ok"); 
      } 
     } 

和我的觀點

 views: { 
      agendaSix: { 
       type: 'agenda', 
       duration: { days: 6 }, 
       buttonText: '5 day', 
      }, 
      agendaFive: { 
       type: 'agenda', 
       duration: { days: 5 }, 
       buttonText: '4 day' 
      }, 
      agendaFour: { 
       type: 'agenda', 
       duration: { days: 4 }, 
       buttonText: '3 day' 
      }, 
     }, 

     defaultView: 'agendaWeek' 

謝謝你很多！

Answer 1

您可以在dayRender中找到議程插槽的單元格併爲它們着色。如果fullCalendar的內部將來發生變化 - 可能會破壞道路。

https://jsfiddle.net/vd67xj0k/

var maxDate = moment(); 

$('#calendar').fullCalendar({ 
    defaultView: 'agendaWeek', 
    header: { 
    left: 'basicWeek, agendaWeek, agendaSix, agendaFive, agendaFour', 
    middle: 'title', 
    right: 'prev, next' 
    }, 
    dayRender: function(date, cell) { 
    if (date > maxDate) { 
     $(cell).addClass('disabled'); 
     /* This may break in future versions? */ 
     var $td = $('div.fc-bg > table > tbody > tr > td[data-date="' + date.format('YYYY-MM-DD') + '"]'); 
     $td.addClass('disabled'); 
     console.log("ok"); 
    } 
    }, 
    views: { 
    agendaSix: { 
     type: 'agenda', 
     duration: { 
     days: 6 
     }, 
     buttonText: '5 day', 
    }, 
    agendaFive: { 
     type: 'agenda', 
     duration: { 
     days: 5 
     }, 
     buttonText: '4 day' 
    }, 
    agendaFour: { 
     type: 'agenda', 
     duration: { 
     days: 4 
     }, 
     buttonText: '3 day' 
    }, 
    } 
}); 

Answer 2

對於agendaWeek，如果allDaySlot被設置爲true的DayRender只調用解僱。如果將allDaySlot設置爲false，則不會調用dayRender。