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

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...

Answer 1

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).

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

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.

Answer 7

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.

Answer 8

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

`

Answer 9

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",

Answer 10

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