fullCalendar not showing the correct end date

Question

I am looking at the debug page of the official FullCalendar site. I want to schedule an event from 22/09/2015 to 30/09/2015 (dd/mm/yyyy). But it only shows up for dates from 22/09/2015 to 29/09/2015 - 30/09/2015 is missing.

Here is the code:

$(function() { // document ready
   $('#calendar').fullCalendar({
     header: {
       left: 'prev,next today',
       center: 'title',
       right: 'month,agendaWeek,agendaDay'
     },
     defaultDate: '2014-11-12',
     editable: true,
     eventLimit: true, // allow "more" link when too many events
     events: [
        {
          title: 'Meeting',
          start: '2015-09-22',
          end: '2015-09-30'
        }
     ]
   });  
});

Here is an image of the output:

What is the problem with this code?

[*It is the moment immediately after the event has ended. For example, if the last full day of an event is Thursday, the exclusive end of the event will be 00:00:00 on Friday!*](http://fullcalendar.io/docs/event_data/Event_Object/) — D4V1D, Sep 21 '15 at 21:59

score 2 · Answer 1 · edited Mar 20 '21 at 11:25

2

Don't think of the dates as discrete days, but as a continium in time. The date 2015-09-30 is implicitly given the time 00:00:00, i.e. midnight. This means that the event will not actually extend to the 30th, but en just when that day starts.

This gives you a simple solution. Just end the event one day later:

end: '2015-10-01'

Or, take it from the documentation:

It is the moment immediately after the event has ended. For example, if the last full day of an event is Thursday, the exclusive end of the event will be 00:00:00 on Friday!

edited Mar 20 '21 at 11:25

ADyson

57,178
14
51
63

answered Sep 21 '15 at 22:11

Anders

8,307
9
56
88

Well this works for full days but not for parts of dates. I try now this: events: [ { title: 'Meeting', start: '2015-09-08T02:30:00', end: '2015-09-09T04:30:00' } ] and it dose not show the date 2015-09-09 just shows: 2015-09-08. what can be the problem? – Dushy Sep 21 '15 at 22:25
OK found the problem with part dates. just add nextDayThreshold:'00:00:00', – Dushy Sep 21 '15 at 22:48
1

@Dushy If you found an alternative solution, you should post it as an answer to your own question. – Anders Sep 22 '15 at 06:54
@Anders same issue I faced when full calendar implementing in angular5, can you give me idea how to do it in angular 5? – Brijesh Mavani Jan 17 '18 at 11:41

score 0 · Answer 2 · answered Sep 23 '15 at 22:19

OK to show the correct end time do this:

For all day like: from 23-09-2015 till 30-09-2015 (dd-mm-yyyy)
Add a day to the "end"

$('#calendar').fullCalendar({    
  events: [
    {
      title: 'Meeting',
      start: '2015-23-09',
      end: '2015-01-10'
    }
  ]
}

For mySql query add a day like this:

DATE_ADD(end_date, INTERVAL 1 DAY)

For part of a day like: from 23-09-2015 12:00:00 till 30-09-2015 15:30:00 (dd-mm-yyyy hh:mm:ss)
You need to set the fullcalendar "nextDayThreshold" paremeter so it will start the day from 00:00

$('#calendar').fullCalendar({    
  nextDayThreshold:'00:00:00',
  events: [
    {
      title: 'Meeting',
      start: '2015-23-09T12:00:00',
      end: '2015-30-09T15:30:00'
    }
  ]
}

the same issue faced in when I implement full calendar for angular 5, and I will try your solution but it's not worked can you help — Brijesh Mavani, Jan 17 '18 at 11:46

ValhallaSkies · Answer 3 · 2015-10-01T02:45:42.453

0

You can try using date_add().

$date=date_create("2013-03-15");
date_add($date,date_interval_create_from_date_string("1 day"));

Then apply the php to echo out the new date.

end: '<?php echo date_format($date,"Y-m-d"); ?>'

edited Oct 01 '15 at 02:45

answered Oct 01 '15 at 02:33

ValhallaSkies

61
1
12

score 0 · Answer 4 · answered Jun 01 '17 at 09:50

0

Try

    $('#calendar').fullCalendar({
        nextDayThreshold:'00:00', // not 00:00:00
   [...]

answered Jun 01 '17 at 09:50

MantasJa

11
3

Mostafijur Rahman · Answer 5 · 2018-01-21T11:46:04.377

0

enter image description herejust add time range 12:00:00 to 24:00:00

    events: [
     {
       title: 'Anniversary',
       start: '2018-01-21T12:00:00',
       end: '2018-01-23T24:00:00'
     }
    ]

edited Jan 21 '18 at 11:46

answered Jan 21 '18 at 11:38

Mostafijur Rahman

1
3

score 0 · Answer 6 · answered Oct 13 '21 at 09:42

It is as per library specification that it exclude last day from the event docs for reference are https://github.com/fullcalendar/fullcalendar/issues/2653 https://github.com/fullcalendar/fullcalendar/issues/3679

my work around to include end date is by adding one more day to it using moment as

   moment(new Date())
      .add(1, 'day')
      .startOf('day')
      .toDate(),

It will take the date object and add one day to it

var date = new Date(); new Date(date.setDate(date.getDate() + 1))

score 0 · Answer 7 · answered Nov 15 '21 at 11:23

You can add day for end date for example in laravel

events : [
        @foreach($reservations as $reservation)
           {
            title :'{{ $reservation->name }},
            start :'{{ $reservation->start }}',
            end :  '{{ $reservation->end->addDays() }}',
            allDay:true,
           },
        @endforeach
],

because in Docs fullcalendar

end : As defined above, this is the date when an event finishes. In other words, the event continues up to this cut-off point in time. This value specifies the exclusive end of the event. Since the event is not expected to continue beyond the given end date it may also be described as non-inclusive

Again, if allDay is not explicitly set to true and end is 2018-09-07, internally this is recognised as 2018-09-07T00:00:00. It is that point in time, at the final part of 2018-09-06 and beginning of 2018-09-07. Also, this may be interpreted as 2018-09-06T23:59:59 or 2018-09-07T00:00:00.

Fullcalender Documentation link

fullCalendar not showing the correct end date

7 Answers7

Linked