javascriptangularjsui-calendar

uiCalendar does not refresh when adding or removing events

I can't get uiCalendar to update after changing the elements in the event source.

The calendar is defined in the template as:

<div ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="EC.calendarEvents" calendar="eventsCalendar"></div>

When I add or remove elements from EC.calendarEvents the calendar doesn't update.

I've tried all of the following statements to try to get the calendar to refresh after modifying EC.calendarEvents:

uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('render');
uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('rerenderEvents');
uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('refetchEvents');

I've also tried removing and re-adding the source:

uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('removeEvents');
uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('addEventSource', $scope.EC.calendarEvents);

But this just causes the following error to show up in the console:

TypeError: Cannot read property 'hasTime' of undefined

The error is occurring in fullcalendar.js in the normalizeEventTimes function on line 12272.

The error line is:

eventProps.allDay = !(eventProps.start.hasTime() || (eventProps.end && eventProps.end.hasTime()));

In this post they suggest maintaining the same reference to the array and pushing/splicing events in and out: AngularJS UI-calendar not updating events on Calendar

I tried this as well but it didn't make any difference.

Solution

  • The problem turned out to be an inconsistency in the format that ui-calendar expects to receive it's events in.

    When the controller loads and I populate EC.calendarEvents, ui-calendar expects to receive an array of arrays. So the assignment looks like this:

    $scope.EC.calendarEvents = [createCalendarEventsFromCoreEvents(coreEvents)];

    However, whenever I want to alter EC.calendarEvents, it has to be an array only, not an array of arrays.

    So subsequent updates to EC.calendarEvents look like this:

    $scope.EC.calendarEvents = createCalendarEventsFromCoreEvents(filterEvents());
uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('removeEvents');
uiCalendarConfig.calendars['eventsCalendar'].fullCalendar('addEventSource', $scope.EC.calendarEvents);

    Note the lack of brackets [] around createCalendarEventsFromCoreEvents.