Editing all day fullCalendar event converts it to a non allDay event

4
votes

When I edit an allDay event, fullCalendar (2.0.2) is converting it to a non-all day event. When the event is clicked in the calendar view, I load a modal which allows users to edit the details. Selecting allDay or time is not part of this, but date is. Upon clicking submit I fire an AJAX call which updates the event server-side then returns JSON data containing the event id. I then query fullCalendar to get the correct event. At this point allDay and _allDay are both still true:

theEvent = $('#calendar').fullCalendar('clientEvents', data.id)[0];
> theEvent.allDay
true
> theEvent._allDay
true

I then update fullCalendar with the edited event object:

calendar.fullCalendar('updateEvent', theEvent);

After the edit finishes, the event displays in the calendar with 12a displaying immediately before the event title.

I'm able to track it down to the mutateEvent function in the fullCalendar which appears to override my settings within the following conditional:

// current values are:
// event.allDay: true
// oldAllDay: true
// newStart: Moment object - Mon Jan 19 2015 00:00:00 GMT-0600 (CST)
// newEnd: null

// detect new allDay
if (event.allDay != oldAllDay) { // if value has changed, use it
    newAllDay = event.allDay;
} else { // otherwise, see if any of the new dates are allDay
    newAllDay = !(newStart || newEnd).hasTime();
}

I don't think I'm doing anything wrong, but I can't be sure. Anyone have input on this? Please and thanks. At this time I'm not able to upgrade to a more recent version as this version (2.0.2) appears to be somewhat tied in to the Ace Admin Bootstrap theme selected by my client.

Alternately, I'd love to be able to only allow allDay events so that I don't have to worry about this in the future.

2
fullcalendar
have you tried the latest version? i know you say it maybe tied to your template; but perhaps worth a try to see if its a bug that's been fixed in a new version. you could then decide how to upgrade it and template if it works. – warath-coder

2 Answers

1
votes

While this doesn't truly solve the problem, this answer resolves my issue.

Simply set the fullCalendar timeFormat property to ''. In my case I only ever have all day events, so I'll never need a time.

http://fullcalendar.io/docs/text/timeFormat/

$('#calendar').fullCalendar({
    events: [
        {
            title:  'My Event',
            start:  '2010-01-01T14:30:00',
            allDay: false
        }
        // other events here...
    ],
    timeFormat: ''
});
1
votes

This seems to be a bug that was fixed in a later version. The latest version does it differently.

What's happening is that it sets allDay=false when you change the start or end date and the changed date has a time. Problem reproduced here.

The solution is pretty simple, remove the time part of the start/end when the event is allday. It shouldn't be there anyway.

var fcEvent = $('#calendar').fullCalendar("clientEvents",id)[0]; //get the event

// Change the start date and turn it into a string, stripping off the time.
fcEvent.start = moment().format("YYYY-MM-DD"); 

$('#calendar').fullCalendar("updateEvent",fcEvent);

JSFiddle Demo

Make it conditional, if(fcEvent.allDay), and it should fix the problem without breaking other functionality.