Question

在Fullcalender的第2版中，我需要dayRender回调，我想改变禁用日的颜色。

此回调仅适用于month，basicWeek和basicDay视图..但我需要对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

对于agendaWeek，如果allDaySlot设置为true，则仅触发dayRender调用。如果将allDaySlot设置为false，则不会调用dayRender。

Answer 2

您可以在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'
    },
  }
});

Fullcalendar v2 dayRender用于议程视图和议程周刊

2 个答案: