goredwards goredwards - 3 months ago 89
AngularJS Question

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

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

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.

Comments