FullCalendar end date is not inclusive

Question

I'm using FullCalendar Beta2, and I set the AllDay flag to True. The calendar still treats End Date as exclusive! How can I make the End date inclusive?

Many thanks.

Answer 1

@ZooZ - According to the Beta 2 Upgrade docs, the end date is now exclusive:

all end dates are now exclusive. For example, if an all-day event ends on a Thursday, the end date will be 00:00:00 on Friday. The 1.x versions had some strange rules in regards to this. Things should be much simpler now that exclusive end dates are used consistently throughout the API. In addition, this behavior is more consistent with other API's and formats, such as iCalendar.

Reference: http://arshaw.com/fullcalendar/wiki/Upgrading-to-2/

I would just add one to your end date calculation to work around this :)

Answer 2

You can hook into eventAfterAllRender and update a copy of the events and force the calendar to refresh.

In my example the modification only applies to events marked as allDay events (allDay:true). I only modifies a copy/clone of the events data so it only changes the displaying, not the actual data (I think - I need to test it better). I added the clone function but you can use something else if you like. I added the forceRendererToDisplay flag make it run only once.

Here is a fiddle: https://jsfiddle.net/a3q9c5tr/15/

 function clone(obj) {
  if (null == obj || "object" != typeof obj) return obj;
  var copy = obj.constructor();
  for (var attr in obj) {
      if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
  }
  return copy;
}

$('#calendar1').fullCalendar({
forceRerenderToDisplay: true,
eventAfterAllRender: function(){
    var startdatestr = this.options.events[0].start;
    var enddatestr = this.options.events[0].end;
    if(this.options.forceRerenderToDisplay == true){
        var endDisplayDate = new Date(enddatestr);
        endDisplayDate.setDate(endDisplayDate.getDate() + 1);
        this.options.forceRerenderToDisplay = false;
      var evs = clone(this.options.events);
      for(var i in evs){
        if(evs[i].allDay){
            evs[0].end = new Date(endDisplayDate).toISOString().slice(0,10);
        }
      }
      this.calendar.removeEvents();
      this.calendar.addEventSource(evs);
      this.calendar.rerenderEvents();
    }
},
events:[
    {start:'2016-04-03',end:'2016-04-05',title:'my event', allDay:true}
],
header: {
  left: 'prev,next,today',
  center: 'title',
  right: 'month,agendaWeek,agendaDay',
  allDay:true
  }
});