angular-ui ui-calendar not updating on changes to Event Source Object / ng-model

Question

I'm adding fullcalendar.js to an angular app using angular-ui / ui-calendar.
(angularjs 1.3.10, fullcalendar 2.2.6, ui-calendar 0.9.0-beta.1, jQuery 2.1.3, moment 2.9.0 & angular-moment 0.9.0)

In the calendar I'm using the dayClick as a datepicker type function to:
- write the selected date to scope (for other uses in the app)
- update the Event Source Object events array with the selected date
- display the selected date (ie newly updated event) on the calendar

I have no problems completing the 1st two tasks, but the 3rd is not updating automatically.

From the documentation:
An Event Sources objects needs to be created to pass into ng-model. This object's values will be watched for changes. If a change occurs, then that specific calendar will call the appropriate fullCalendar method.

However it doesn't seem to be updating the calendar this automatically...

Is this a bug in ui-calendar or am I missing something ?

Interestingly if I have the calendar in an ng-if tab, and toggle between the tabs, the calendar updates correctly (after the toggle).

See this jsfiddle and:
- run, then select a date (notice the events array is updated correctly)
- toggle Tab 2 then back to Tab 1 - notice the date now displays correctly...

html looks like:

<div ui-calendar="uiConfig.calendar" ng-model="calendarDate" calendar="myCalendar1"></div>

Controller code looks like

myApp.controller('MainCtrl', function($scope, $filter, moment, uiCalendarConfig){

    $scope.calendarDate = [
        {
            events: [
                {
                    title: 'From',
                    start: '2015-01-31',
                    allDay: true,
                    rendering: 'background',
                    backgroundColor: '#f26522',
                },
            ],
        }
    ];

    $scope.setCalDate = function(date, jsEvent, view) {
            var dateFrom = moment(date).format('YYYY-MM-DD');                   // set dateFrom based on user click on calendar
            $scope.calendarDate[0].events[0].start = dateFrom;              // update Calendar event dateFrom
            $scope.dateFrom = $filter('date')(dateFrom, 'yyyy-MM-dd');;         // update $scope.dateFrom
    };

    $scope.uiConfig = {
        calendarFrom : {
            editable : false,
        aspectRatio: 2,
            header : {
                left : 'title',
                center : '',
                right : 'today prev,next'
            },
            dayClick : $scope.setCalDate,
            background: '#f26522',
        },
    };
});

PS had a look at this question (which is similar) but was asked quite a few versions ago - plus the suggested solution calendar.fullCalendar('refetchEvents'); doesn't work since the calendar object is not defined - unsure what calendar.fullCalendar would be for my code...

Answer 1

That seems to be a problem with ui-calendar. I haven't been able to solve it so far. However, as a workaround, instead of updating the current event, you can create a new one: just replace $scope.calendarDate[0].events[0].start = dateFrom; by $scope.calendarDate[0].events.push({title: 'From', start: selectedDate, allDay: true, rendering: 'background', backgroundColor: '#f26522'});: http://jsfiddle.net/gidoca/kwsrnopz/.

On a side note, to access the calendar object to call the fullCalendar function, you would use $scope.myCalendar1 - ui-calendar adds it the the scope with a variable of the name given as the calendar attribute in the HTML.