Prevent rendering of events that occured before a given date

Question

I am trying to remove all events on my full calendar that fall before a certain start date (let's say the start date is Oct-17-2016).

Here is my code that does exactly that:

$("#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;
    }
});

So upon loading the page, all events falling before Oct-17-2016 for the month of October are gone. However if I navigate to the next month (i.e November) then navigate back to October, all the events that were deleted are suddenly back!

How do I make it so that upon initialization, the events before my start date stay deleted. Will I need to wrap this script in an event that is triggered whenever a month change occurs?

Answer 1

There are a couple of options to do so.

1. Do so on the backend side, if you have control over that. This is the best option because you'll filter the events on the server side, the request response would be smaller and there's no need for javascript processing.

2. You could use events as a function and "manipulate" the dates sent on the request, so if the start date is before the date you need, you would just update the parameter sent to the server. Something like this:

   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. As suggested by smcd on his comment, you could use eventRender to remove events that occured before the date you want. Something like:

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

   Check this working fiddle.