Question

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

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

提前致谢！

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

Fiddle

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

最好的问候的Krzysztof

根据事件数量在月视图上呈现不同颜色的天数

1 个答案: