Fullcalendar v2 dayRender for agenda view and agen

问题:

In version 2 of Fullcalender I need the dayRender callback, I want to change color of disable day.

This callback only works for month, basicWeek, and basicDay views.. But I need this callback for agendaWeek and agenda.

Do you have any alternative or answers for dayRender ?

I try this :

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

and my view

       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'

Thank you a lot !

回答1:

For the agendaWeek, the dayRender call only fired if allDaySlot is set to true. If you set allDaySlot false then dayRender will not be called.

回答2:

You can find the cells for agenda slots and color them during dayRender. If the internals of fullCalendar change in the future - heads up as to possibly breaking down the road.

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