FullCalendar eventResize() returns date + 1?

Question

This is essentially the same question as here, but there isn't an answer there. I am being a bit more specific: it's returning endDate + 1 (it seems). When using the FullCalendar.eventResize function and displaying the event.end.format() result, it reports the End date as a day later than what is visually shown on the calendar, at least as we humans would read it.

This is for full day events. The event is editable, displayed in Month-view. If you have an event that spans a day - say 2015/4/08 - it fills the whole square. If you then drag the end point of that event to visually cover two days instead of one, so should be 2015/4/08-2015/4/09 inclusive, the event.end.format() function returns the value '2015-04-10' as the new end date.

Now maybe it is telling me that it ends on 00:00:00 of 2015/4/10, but that's not really what I am looking for. I want it to end at 23:59:59 on 2015/4/09; that is what the visual indication is showing. If I report back to a database that the new end date is 2015/4/10, that would be the wrong date from the user's point of view. Also, this is relatively easily handled in the DB itself by subtracting one from the date, but I was just wondering if there was an official reason for this, if it is a bug, is my code wrong, etc.

I created a JSFiddle to demonstrate all this. Just drag the end-point of an event around to get the pop-up showing the new end date. Here's the code used in the JSFiddle:

    $(document).ready(function () {
    var httpXHR, fmpurl;
    currDate = "2015/7/01";

    $("#calendar").fullCalendar({
        defaultDate: currDate,
        editable: true,
        allDayDefault: true,
        eventStartEditable: true,
        eventDurationEditable: true,
        dayClick: function () {
            alert("a day has been clicked!");
        },

        eventDrop: function (event, delta, revertFunc) {
            if (!confirm(event.title + " was dropped on " + event.start.format() + ".\nAre you sure about this change?")) {
                revertFunc();
            }
        },

        eventResize: function (event, delta, revertFunc) {
            if (!confirm(event.title + " end is now " + (event.end.format()) + ".\n\nIs this okay?")) {
                revertFunc();
            } else {
                alert("Date was changed to: " + event.end.format());
            }
        },

        events: [{
            id: 1,
            title: "Project 1",
            start: "7/1/2015",
            end: "7/3/2015"
        }, {
            id: 2,
            title: "Project 2",
            start: "7/3/2015",
            end: "7/7/2015"
        }, {
            id: 3,
            title: "Project 3",
            start: "7/7/2015",
            end: "7/7/2015"
        }, {
            id: 4,
            title: "Project 4",
            start: "7/7/2015",
            end: "7/11/2015"
        }, {
            id: 5,
            title: "Project 5",
            start: "7/14/2015",
            end: "7/16/2015"
        }, {
            id: 6,
            title: "Project 6",
            start: "6/18/2015",
            end: "7/3/2015"
        }, {
            id: 7,
            title: "Project 7",
            start: "7/30/2015",
            end: "8/15/2015"
        }, {
            id: 15,
            title: "Project 15",
            start: "6/08/2015",
            end: "6/19/2015"
        }]
    });

});

-- Justin

DanielST DanielST · Accepted Answer · 2015-04-10T20:56:48

This is some slightly unintuitive behaviour.

Forget the dragging and resizing, they have nothing to do with it. Just look at Project 1. It is two days long on the calendar but it's specified date is

{start: "7/1/2015",
 end: "7/3/2015"}

The docs mention this in the Event Object section under end:

The exclusive date/time an event ends. Optional.

A Moment-ish input, like an ISO8601 string. Throughout the API this will become a real Moment object.

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!

Since the end date has no time, the time is "00:00:00". And this time is immediately after the event.

FullCalendar eventResize() returns date + 1?

1 Answers