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

Answer 3

I know this is kind of old now but with end dates being exclusive I found this workaround without having to add additional days. first up is set display time to false this will make it so that the time is not shown on the events.

 displayEventTime: false,

Then remove the allDay tag from your event and I used a foreach loop for my events which I pulled from DB.

$events=[
 "start_date"=>"2020-01-01 00:00:00",
 "end_date"=>"2020-01-04 00:00:00",
 "title"=>"My Event",
]

events:[
<?php foreach ($events as $event):?>
<?php echo "{start:'".$event["start_date"]."',end:'".$event["end_date"]."',title:'".$event["title"]."'}},";?>
<?php endforeach;?>
],

Within the events part is where I have a foreach loop for the events. I will add

          <?php $date = DateTime::createFromFormat("Y-m-d H:i:s", $event["end_date"]);
             $date->setTime(0, 0);
             // Add 23 hours
             $date->add(new DateInterval('PT23H'));?>

so my final foreach loop looks like

events:[
    <?php foreach ($events as $event):?>
      <?php $date = DateTime::createFromFormat("Y-m-d H:i:s", $event["end_date"]);
      $date->setTime(0, 0);
      // Add 23 hours
      $date->add(new DateInterval('PT23H'));?>
 <?php echo " 
 {start:'".$event["start_date"]."',end:'".$date->format('Y-m-d H:i:s')."', 
 title:'".$event["title"]."'}},";?>
  <?php endforeach;?>
 ],

so this has the foreach loop within the events. Then I create the date in a easy format to work with where I add the 23 hours and then echo out the date formatted within the event itself.

This then displays the end date as inclusive without having to adjust nextDayThreshold or having to add days before adding a date to your Database.