ui-calendar display not updating on change of Event Source Object date - dayClick

[gigmaps]

When updating calendar using dayClick function to an Event Source Object the calendar isn't updating - see this SO question http://stackoverflow.com/questions/28100852

This fiddle is with the latest versions and DOES NOT work as expected:

• http://jsfiddle.net/goredwards/y2du0yqw/
• fullcalendar 2.2.6
• ui-calendar 0.9.0

Problem:

• the Event Source Object IS being updated, as you can see from the output below the calendar
• to update the calendar display, switch between tabs (which are set using an ng-if directive).

This fiddle is with older versions and (for this issue) DOES work as expected

• http://jsfiddle.net/goredwards/o08yjk7L/
• fullcalendar 1.6.7
• ui-calendar 0.8.1

(however it's got an $interpolate issue and is missing a bunch of other functionality relating to colours & background events etc)

The only difference between the two fiddles is the fullcalendar and ui-calendar source code.

Does anyone know of a fix or workaround to have calendar display updated on update of an Event Source Object ?

[gigmaps]

I've tried the following :

• http://stackoverflow.com/questions/23006464/angularjs-ui-calendar-not-updating-events-on-calendar
• in html set id="calendar" in theui-calendar` div
• in function that updates the Events Object run $('#calendar').fullCalendar('refetchEvents') (didn't work)

I've also tried the solution proposed here (didn't work):

• https://github.com/angular-ui/ui-calendar/issues/200

and the one proposed here (although 'stick = true' is kinda the opposite of what i want on the event really) - didn't work:

• https://github.com/angular-ui/ui-calendar/issues/99

[papasax]

I think i had the same problem. $('#calendar').fullCalendar('refetchEvents') fixed it for me. But there is a bug in the watcher.

[dmexs]

I solved my trouble by splicing the array down to nothing and then pushing new values to the same array. The trouble seems to be the calendar using the old memory reference to the initial array. If you replace the array for whatever reason the calendar doesn't update it's memory reference.

http://stackoverflow.com/a/28663610/271868

[joshkurz]

yeah something is still wrong here. Looked into it for a bit, but could not figure it out immediately. Thanks for reporting this @gigmaps, will try to figure it out. if anyone wants to try this one out, that would be great. Thanks. :)

[joshkurz]

@gigmaps I think this solves the issue, we just need a PR https://github.com/angular-ui/ui-calendar/issues/167

[laurenmacam]

thanks @dmexs it worked for me!

[baymax-codecare]

Thanks. @dmexs it works fine now. $scope.eventSources[0].splice(0, $scope.eventSources[0].length); $scope.eventSources[0].push({ title : title, start : start, end : end
});

[MariusHerget]

My workaround is working fine but may have problems, if you load lots of events. (newEvents is a filtered version of the original EventSources.)

 angular.element('.calendar').fullCalendar( 'removeEventSources' );
 angular.element('.calendar').fullCalendar( 'removeEvents' );

 for (var sour in newEvents) {
        angular.element('.calendar').fullCalendar( 'addEventSource', newEvents[sour] );
 } 

[wilchemh]

I too had this issue. I traced it down to the following function in dependent js fullCalendar js

The fullCalendar function is looking for the value of id in the event object, which does not exist. With the below change the angular watcher from calendar.js correctly removes and updates items from a $scope Events Array in the calendar.

The reason the remove all work around resolves this issue is because both remove all and add are not dependent upon the legacy filter function below..

function filterLegacyEventInstances(legacyEventInstances, legacyQuery) {

if (legacyQuery == null) {
    return legacyEventInstances;
}
else if ($.isFunction(legacyQuery)) {
    return legacyEventInstances.filter(legacyQuery);
}
else { // an event ID
    legacyQuery += ''; // normalize to string
    return legacyEventInstances.filter(function(legacyEventInstance) {
        // soft comparison because id not be normalized to string
        // console.log(legacyEventInstance.id  + " == " +  legacyQuery);      
        // console.log(legacyEventInstance._id  + " == " +  legacyQuery);
        // updated Below line changed id --> _id as that is what ui.calendar passes as id
        return legacyEventInstance._id == legacyQuery;
    });
}

}

[gabrielgoiscastor]

@dmexs thank you. I'm searching for a solution for this problem for the past 4 hours, finally some insights on it!

[lironbar]

For anyone who runs into it that might help: HTML Example:

<div flex id="calendar" ui-calendar="$ctrl.calendarOptions" ng-model="$ctrl.eventSources" calendar="exampleCalendar"></div>

That what needs to be done:

uiCalendarConfig.calendars.exampleCalendar.fullCalendar('removeEventSources'); uiCalendarConfig.calendars.exampleCalendar.fullCalendar('removeEvents'); ctrl.eventSources.push(ctrl.events);

*Dont forget to inject uiCalendarConfig to the controller

Worked for me :)