Question

使用简单的实现..

Answer 1

我希望你需要的是：

$('#calendar').fullCalendar({

      defaultView: 'month',
      events: [{
        title: 'event',
        start: '2017-01-05 11:00',
        end: '2017-01-06 13:00',
      }, {
        title: 'event 2',
        start: '2017-01-18'
      }],
      eventAfterAllRender: function(view) {
        var dayEvents = $('#calendar').fullCalendar('clientEvents', function(event) {
          if (event.end) {
            var dates = getDates(event.start, event.end);
            $.each(dates, function(index, value) {
              var td = $('td.fc-day[data-date="' + value + '"]');
              td.addClass('bg');
            });
          } else {
            var td = $('td.fc-day[data-date="' + event.start.format('YYYY-MM-DD') + '"]');
            td.addClass('bg');
          }
        });
      }
    });

    function getDates(startDate, endDate) {
      var now = startDate,
        dates = [];

      while (now.format('YYYY-MM-DD') <= endDate.format('YYYY-MM-DD')) {
        dates.push(now.format('YYYY-MM-DD'));
        now.add('days', 1);
      }
      return dates;
    };

尝试fiddle。

最好的问候！
Krzysztof

Answer 2

这应该按你想要的方式工作：

var td;
$('#calendar').fullCalendar({

  defaultView: 'month',
  events: [{
    title: 'event',
    start: '2017-01-05 11:00',
    end: '2017-01-06 13:00',
  }, {
    title: 'event 3',
    start: '2017-01-20 11:00',
    end: '2017-01-20 18:00'
  }, {
    title: 'event 2',
    start: '2017-01-18 11:00',
    end: '2017-01-19 18:00'
  }, {
    title: 'event 3',
    start: '2017-03-20 11:00',
    end: '2017-03-20 18:00'
  }],
  eventAfterAllRender: function(view) {
    var dates = [];
    var i = 0;
    var dayEvents = $('#calendar').fullCalendar('clientEvents', function(event) {
      i++;
      if (event.end) {
        var alldates = getDates(event.start, event.end);
        $.each(alldates, function(index, value) {
          dates.push(moment(value));
          $('td.fc-day[data-date="' + value.format('YYYY-MM-DD') + '"]').addClass('fc-highlight' + i);
        })

      } else {
        dates.push(event.start);
        $('td.fc-day[data-date="' + event.start.format('YYYY-MM-DD') + '"]').addClass('fc-highlight' + i);
      }
    });


    //Sort Date By Ascending Order Algorithm            
    sortByDateAsc = function(lhs, rhs) {
        return lhs > rhs ? 1 : lhs < rhs ? -1 : 0;
      },
      //Sort Date By Descending Order Algorithm
      sortByDateDesc = function(lhs, rhs) {
        return lhs < rhs ? 1 : lhs > rhs ? -1 : 0;
      },


      $.each(dates.sort(sortByDateAsc), function(index, value) {
        if (value > moment()) {
          td = $('td.fc-day[data-date="' + value.format('YYYY-MM-DD') + '"]');
          return false;
        }
      })

    var classes = td.prop("class").split(' ');
    $.each(classes, function(index, value) {
      if (value.startsWith('fc-highlight')) {
        $('.' + value).css('background', 'yellow');
        return false;
      }
    })



  }

});

function getDates(startDate, endDate) {

  currentDate = new Date(startDate),
    between = [];

  while (currentDate <= endDate) {
    between.push(moment(currentDate));
    currentDate.setDate(currentDate.getDate() + 1);
  }
  return between;
};

Fiddle

祝你好运的Krzysztof

在FullCalendar中，如何使用eventLimitClick？

2 个答案: