根据事件数在月视图上以不同的颜色呈现日期

Question

我想检查一天中存在多少个事件，并根据该数量，在月视图中用另一种颜色呈现给定的一天。

例如：如果一天已经有二十个事件，则将该天渲染为红色。

Answer 1

试试这个：

var renderedDays = [];
    $('#calendar').fullCalendar({
      defaultDate: '2017-01-01',
      defaultView: 'month',
      events: [{
        title: 'event 1',
        start: '2017-01-05 09:00',
        end: '2017-01-05 11:00',
      }, {
        title: 'event 2',
        start: '2017-01-05 08:00',
        end: '2017-01-05 09:00'
      }, {
        title: 'event 2',
        start: '2017-01-05 11:00',
        end: '2017-01-05 15:00'
      }, {
        title: 'event 3',
        start: '2017-01-06 11:00',
        end: '2017-01-06 13:00',
      }, {
        title: 'event 4',
        start: '2017-01-06 08:00',
        end: '2017-01-06 10:00'
      }, {
        title: 'event 5',
        start: '2017-01-16 08:00',
        end: '2017-01-16 10:00'
      }],
      eventAfterAllRender: function(view) {
        renderedDays = getDates($('#calendar').fullCalendar('getView').start, $('#calendar').fullCalendar('getView').end);

        $('#calendar').fullCalendar('clientEvents', function(event) {
          var result = $.grep(renderedDays, function(e) {
            return e.id == event.start.format('YYYY-MM-DD');
          });
          if (result.length > 0) {
            result[0].events += 1;
          }
        });
        $.each(renderedDays, function(index, value) {
          if (value.events > 0) {
            var td = $('td.fc-day[data-date="' + value.id + '"]');
            td.addClass('e' + value.events);
          }
        });
      }
    });
    function getDates(startDate, endDate) {
      var now = startDate,
        dates = [];
      while (now.format('YYYY-MM-DD') <= endDate.format('YYYY-MM-DD')) {
        dates.push({
          id: now.format('YYYY-MM-DD'),
          events: 0
        });
        now.add('days', 1);
      }
      return dates;
    };

小提琴。

我简化了逻辑，在计算给定日期的事件数时只检查事件的开始日期。如果你的逻辑更复杂（多天事件），你必须稍微调整一下。但我希望它能给你一个启动。