javascript - 防止呈现给定日期之前发生的事件

Question

我正在尝试删除完整日历中特定开始日期之前的所有事件(假设开始日期是 2016 年 10 月 17 日)。

这是我的代码，它确实做到了这一点:

$("#calendar").fullCalendar('removeEvents', function(eventObject) {
    //return true if the event 'eventObject' needs to be removed, return false if it doesn't
    if (moment(eventObject.start).isBefore(start_date)) {
        return true;
    }
});

因此，加载页面后，10 月份 2016 年 10 月 17 日之前发生的所有事件都消失了。但是，如果我导航到下个月(即 11 月)然后导航回 10 月，所有已删除的事件都会突然回来!

如何才能在初始化时删除开始日期之前的事件。我是否需要将此脚本包装在每当发生月份变化时触发的事件中？

Answer 1

有几个选项可以做到这一点。

1. 如果您可以控制的话，请在后端执行此操作。这是最好的选择，因为您将在服务器端过滤事件，请求响应会更小，并且不需要 JavaScript 处理。

2. 您可以使用 events as a function并“操纵”请求中发送的日期，因此如果开始日期早于您需要的日期，您只需更新发送到服务器的参数即可。像这样的事情:

   var startDate = moment("17-10-2016", "DD-MM-YYYY");
   
   $('#calendar').fullCalendar({
       // use events as a function instead of a json feed
       events: function(start, end, timezone, callback) {
           // Before the request to the server, check if the `start` param is before `startDate`
           // then the parameter will be the startDate.
           // This way the server would return the events after that date
           // Beware: you might need to tweak the end parameter as well
           var startParam = start.isBefore(startDate) ? startDate : start;
   
           $.ajax({
               url: '/fullcalendar/events18',
               dataType: 'json',
               data: {
                   start: startParam.format('YYYY-MM-DD'),
                   end: end.format('YYYY-MM-DD')
               },
               success: function(data) {
                   callback(data.sourcename);
               }
           });
       }
   });
   

3. 根据 smcd 的建议在他的评论中，您可以使用 eventRender删除在您想要的日期之前发生的事件。像这样的东西:

   var startDate = moment("17-10-2016", "DD-MM-YYYY");
   
   $('#calendar').fullCalendar({
       events: '/fullcalendar/events18',
       eventRender: function(event, element) {
       // if the start date of the event occured before `startDate`, return false and don't render the event
           if (event.start.isBefore(startDate)) {
               return false;
           }
       }
   });
   

   检查这个working fiddle .