CODEWITHSUNDEEP
javascriptfullcalendar
Rik
Rik

Reputation: 342

How to set event start and end time dynamically when allDay is set to false with fullCalendar?

I am using a fullcalendar application where upon clicking on an event it opens a modal with event information. In this modal, it is possible to change event data too, think of event.start, event.end, and event.allDay.

When the allDay checkbox is clicked, the event is automatically updated to represent the new state, however, when the event has been a non-allDay event before. The event data contains two extra properties: oldStart and oldEnd. These two properties I want to be used when the event.allDay is set to false; the event.start should then be set to oldStart and event.end should be set to oldEnd.

The problem is that with this method, when updating the start and end time of an event after setting event.allDay to false, the event when updated disappears from the calendar view and is being updated in the back-end to represent the start time as 00:00 and end time as the event start + defaultEventDuration (which in my case is 02:00:00).

My code looks like this:

function changeAllDay(id) { // Function to change allDay property of event that was clicked on

    // Find corresponding event
    var event = findEvent(id);

    event.allDay = !event.allDay; // Change allDay value

    // Set start and end time to midnight if event is allDay
    if (event.allDay) {

        event.oldStart = event.start;
        event.oldEnd = event.end;

        event.start.set('hours', 00);
        event.start.set('minutes', 00);
        event.end.set('hours', 00);
        event.end.set('minutes', 00);

    } else {

        event.start = event.oldStart;
        event.end = event.oldEnd;
    };

    updateEvent(event);
}

The updateEvent() function does an API call to update the event in the back-end, and when succesful the event is updated with

$('#calendar').fullCalendar('updateEvent', event);

Can anybody tell me what I am missing here?

Upvotes: 1

Views: 1663

Answers (1)

Steven Spungin
Steven Spungin

Reputation: 29179

Make a copy of your dates when stashing them. You are calling set right after, and that wipes out your original times.

    event.oldStart = event.start.clone();
    event.oldEnd = event.end.clone();

When you switch back from allDay, your events have no duration.

Upvotes: 2

Related Questions