I implemented fullcalendar.js into my 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)
Within the calendar, I utilize the dayClick function as a datepicker to:
- assign the selected date to scope (for other application purposes)
- update the Event Source Object events array with the chosen date
- showcase the recently updated selected date (newly updated event) on the calendar
While I can successfully accomplish the first two tasks, the third one does not update automatically.
According to 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 appears that the calendar is not updating automatically in this scenario...
Is this a flaw within ui-calendar or am I overlooking something?
Interestingly, when the calendar is inside an ng-if tab and I switch between tabs, the calendar updates correctly (after switching).
View this jsfiddle and observe:
- run, select a date (note the updated events array)
- toggle Tab 2 then back to Tab 1 - notice the correct display of the date now...
The HTML code snippet looks like:
<div ui-calendar="uiConfig.calendar" ng-model="calendarDate" calendar="myCalendar1"></div>
The controller code resembles:
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');
$scope.calendarDate[0].events[0].start = dateFrom;
$scope.dateFrom = $filter('date')(dateFrom, 'yyyy-MM-dd');;
};
$scope.uiConfig = {
calendarFrom : {
editable : false,
aspectRatio: 2,
header : {
left : 'title',
center : '',
right : 'today prev,next'
},
dayClick : $scope.setCalDate,
background: '#f26522',
},
};
});
PS took a glance at this question (similar issue), however, it was asked several versions ago - also, the suggested solution
calendar.fullCalendar('refetchEvents');calendar object - uncertain about what calendar.fullCalendar would entail in my code...