Fullcalendar end date wrong by one day

Question

I am making a fullCalendar backed car reservation functionality. This is the coffescript file.

    updateEvent = (event, delta, revertFunc) ->
      $.ajax
        type: "PUT"
        dataType: "json"
        success: (data) ->
            alert "Success"
        error: (data) ->
            revertFunc()
            errors = data.responseJSON.reservations[0][1]
            for message of errors
                alert errors[message]
        url: event.updateUrl
        data:
          reservation:
            reservation_start: event.start.format('DD-MM-YYYY')
            reservation_end: event.end.format('DD-MM-YYYY')
            transport_id: event.transport_id
            user_id: event.user_id

$(document).ready ->
  $(".calendar").fullCalendar
    events: gon.path
    eventDrop: updateEvent
    eventResize: updateEvent

And this is JSON feed with the events.

[{"start":"2014-12-17T00:00:00.000Z","end":"2014-12-21T00:00:00.000Z","title":"Cassio Godinho","url":"/reservas/44/edit","allDay":true,"editable":true,"updateUrl":"/reservation/44","transport_id":1,"user_id":1}]

The end date is 2014-12-21 but this is what I have on the calendar enter image description here

The documentation says something about this (I think):

endParam
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!

But im not quite sure what to do with this information...

score 15 · Accepted Answer · answered Dec 10 '14 at 17:28

15

I think the key word in the directions is exclusive so whatever time you specify will not be included in the date range.

So in your case "2014-12-21T00:00:00.000Z" would mean that the event would no longer exists at the very beginning of 12-21. If you want the event to go through 12-21 you'd want to set the end time to "2014-12-22T00:00:00.000" (first possible time in 12-22).

answered Dec 10 '14 at 17:28

Shaded

17,276
8
37
62

1

This is not good for someone using multiple day all day events, as adding a time prevents one from resizing events in the month view. It would be great if there were a shim that just forced multiple day all day events to render to the end date. Also a fix would be needed for resizing these events since the end date is always set to one day longer than visually displayed. – JerryA Feb 11 '16 at 16:14
5

So that mean, i increment the date. Thats fine, isnt there any fix that fullcalendar has provided yet? Is there a way to include the end day too ? – Rudresh Ajgaonkar Jun 30 '16 at 21:43
2

Nice explanation, but in no way helps people with this issue on how to resolve it. Could you reference some documentation and perhaps construct a solution? – karns Oct 11 '19 at 15:30
Furthermore, it seems to me that the best solution for people is to update their view logic (or other logic) to handle the end date which appears to be +1 day. See https://github.com/fullcalendar/fullcalendar/issues/3679 for elaboration. – karns Oct 11 '19 at 16:08

score 9 · Answer 2 · answered Jan 03 '17 at 07:22

9

I had the same issue and i finally figured out.

I was using full day TRUE, as per the documentation if you use full day true it will behave in time.

so first, I changed full day to FALSE, then

in my end day I added $endDate."T23:59:00";

This worked for me.

answered Jan 03 '17 at 07:22

user3440787

193
3
11

1

DON'T DO THIS. I was thinking of doing the same thing, but with some research realize why you shouldn't. Good discussion: https://github.com/fullcalendar/fullcalendar/issues/3679 – karns Oct 11 '19 at 16:05

score 5 · Answer 3 · answered Sep 13 '18 at 22:42

5

You need to set nextDayThreshold: '00:00' and it will show the last day!

answered Sep 13 '18 at 22:42

Sam Pritchard

51
1
1

2

It is important to stress that this nextDayThreshold option, set on the Calendar itself, is ignored when allDay is true. https://fullcalendar.io/docs/nextDayThreshold – Chris Chalmers Jan 27 '20 at 17:07

score 3 · Answer 4 · answered Jun 30 '16 at 20:27

3

The best part is append 20:00:00 to the end date as follow:

var ed = $("endDate").val();
newVar = ed+" 20:00:00";

Thats all you need.

answered Jun 30 '16 at 20:27

Rudresh Ajgaonkar

779
1
10
27

1

It works for me this way and we can add a day to it as well. – Umar Niazi Feb 22 '23 at 10:04

score 1 · Answer 5 · answered Dec 27 '14 at 00:16

1

I had the same problem, but i experimented with the time and that was the resolution :)

2014-12-21T00:00:00 => 2014-12-21T23:59:00 this will solve your problem.

answered Dec 27 '14 at 00:16

Elvis Hajdar

19
2

This is almost, but not quite, correct: the docs indicate that `endParam` is the moment "immediately *after*" the end, so you're excluding an extra minute or so. – Nathan Tuggy Dec 27 '14 at 00:31
I added times to the end date, but then the events were no longer adjustable in the month view. – JerryA Feb 11 '16 at 15:01

score 0 · Answer 6 · answered Dec 10 '14 at 17:42

If you are setting your end date for 0 hours, min, sec, etc of 12-21-2014 there is no time in that day for an event to show.

You may need to advance your end date to 0 hours of the next day since you have the event setup as an all day event, however uou may also be fine just advancing the time any amount (such as an hour) so that the event falls inside of the desired end date, then being an all day event it should render.

It would be nice if their event object included a duration parameter you could set, at least I didn't see one in their documentation.

I was trying the aproach of adding some amount of time to the event but it didnt went so well (when I drag an event it would add another day to it). Anyway it doesnt seem right to me, since the event already have the `allDay: true` — Cássio Godinho, Dec 10 '14 at 17:45

score 0 · Answer 7 · answered Apr 13 '17 at 10:14

0

I dont know if its still usefull, but you can use this method, add a day to your end date using :

$date = new DateTime('2000-01-01');
$date->add(new DateInterval('P0Y0M1DT0H0M0S'));

this will increment your end date by one day.

answered Apr 13 '17 at 10:14

Hamza

37
1
1
8

2

Wouldn't `$date = new DateTime('2000-01-01'); $date->modify('+1 day');` be more readable? – Felipe Francisco Nov 22 '17 at 11:05

Anand · Answer 8 · 2019-05-03T08:44:12.547

In Angular Change end date time with current time, when end date time greator than 23:59:59 `

this.calendarOptions = {
  editable: false,
  eventLimit: false,
  validRange: {
    start: '',
    end: new Date(new Date().getUTCFullYear(), new Date().getUTCMonth())
  },
  header: {
    left: '',
    center: 'title',
    right: 'prev,next'
  },
  eventSources: [

    // your event source
    {
      events: (start, end, timezone, callback) => {

        var data = [];


        data.push(new Date("2019-04-11T00:19:02"))
        data.push(new Date("2019-04-12T00:19:02"))
        data.push(new Date("2019-04-13T00:19:02"))

        var eventData = [];

        var calendarEvents: CalendarEvents = new CalendarEvents();
        calendarEvents.start = data[0];

        //Change end time, because of when end date time is greator than 23:59:59 then end date not marked
        var m = moment(data[data.length - 1], 'ddd MMM D YYYY HH:mm:ss ZZ');
        m.set({ h: new Date().getHours() });
        calendarEvents.end = m.toDate();

        calendarEvents.allDay = false;
        eventData.push(calendarEvents);

        callback(eventData);
      },
      color: '#f99500',   // an option!
      textColor: 'black', // an option!
      // displayEventTime: false,
    }
    // any other sources...

  ],
  timeFormat: 'HH:mm'
};

`

score 0 · Answer 9 · answered Aug 18 '21 at 20:08

Problem

Full calendar processes all day events ending with 00:00:00 as complete before the expected result. In my case the client wanted everything to display as all day events and no times shown.

Solution

First, I added the nextDayThreshold: '00:00' option as suggested above. Reading up on this, allDay events ignore this variable.
Next I did a check to see if an event spanned multiple days and if it did, I set allDay: false for that.
Finally I added displayEventTime: false to the calendar.

This appears to be a complete solution without modifying the original date data.

    $string .= "{ 
        id: ".$event['ID'].", 
        title: '".str_replace('\'', '&quot;', $event['Name'])."', 
        start: new Date('".(substr($event['Start_Date'], 0, 4) != '0000' ? date('Y-m-d\TH:i:s', strtotime($event['Start_Date'])) : date('Y-m-d', strtotime('- 1 year')))."'), 
        allDay:".(date('Y-m-d', strtotime($event['Start_Date'])) == date('Y-m-d', strtotime($event['End_Date'])) ? 'true' : 'false').", 
        end: new Date('".(substr($event['End_Date'], 0, 4) != '0000' ? date('Y-m-d\TH:i:s', strtotime($event['End_Date'])) : date('Y-m-d', strtotime('- 1 year')))."'), 
        className: '$class' 
    },";

Emin Doğu · Answer 10 · 2022-06-13T13:42:25.650

0

I'm using Laravel 8. I changed the timezone according to my country. I started getting this "fullcalendar end date wrong by one day" error. So I rollback timezone to UTC in my app.php, that's work for me!

config->app.php:

'timezone' => 'UTC',

or try:

 var calendar = $('#calendar').fullCalendar({
 timeZone: 'UTC',
 ...

edited Jun 13 '22 at 13:42

answered Jun 04 '22 at 12:48

Emin Doğu

1
2

1

This is a great comment, but not really enough information to warrant an answer. Consider adding some example code, more instructions etc. – Zach Jensz Jun 04 '22 at 13:21

score 0 · Answer 11 · answered Dec 31 '22 at 03:03

I had the same problem I resolved by doing the following :

Set the field on the migration and the database as dateTime.
When inputing the date on the database input with the format including hours and/or minutes (ex.: YYYY-MM-DD hh:mm).
On the Calendar set allDay as false.

score -1 · Answer 12 · edited Mar 31 '18 at 19:50

-1

I was also facing the same and resolved it by adding "T23:59:00" to the end date i.e "end" => $end_date."T23:59:00",

edited Mar 31 '18 at 19:50

progmatico

4,714
1
16
27

answered Mar 31 '18 at 16:12

Shafiq

963
8
4

but when it is appended the event is not resizable. – Rishi Apr 10 '19 at 05:51

score -3 · Answer 13 · answered Jan 15 '15 at 10:58

-3

"Fixed" the issue by setting start and end times to the events.

answered Jan 15 '15 at 10:58

Cássio Godinho

596
1
7
21

ah? can you explain what exactly you did? – Alex Coroza May 19 '15 at 06:14
Yes, please elaborate - I'm currently setting start and end and have this problem. – ejntaylor Oct 04 '16 at 14:46
Can you still resize the event in Month View? – JerryA Oct 13 '16 at 01:06

Fullcalendar end date wrong by one day

13 Answers13

Linked