FullCalendar end date not included

Question

I use FullCalendar Beta2 and I set the AllDay flag to True. The calendar still sees End Date as exclusive! How can I make the end date included?

Many thanks.

Answer 1

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

All end dates are now exclusive. For example, if an event ends on an entire day on Thursday, the end date will be 00:00:00 on Friday. The 1.x versions had some weird rules regarding this. Things should be much simpler when exclusive end dates are used consistently throughout the API. In addition, this behavior is more consistent with other APIs and formats, such as iCalendar.

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

I would just add one to the calculation of the end date to get around this :)

Answer 2

You can connect to eventAfterAllRender and update the copy of events and force update the calendar.

In my example, the modification applies only to events marked as allDay events (allDay: true). I only change the copy / clone of the event data, so it changes the display, not the actual data ( I think ) I need to check it better). I added a clone function, but you can use something else if you want. I added the forceRendererToDisplay flag so that it runs only once.

Here is the 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 } });