AngularUI A calendar event source that calls a function on each view switch

Question

To demonstrate the problem, I will explain what I am trying to achieve. I create a booking system using the AngularUI calendar, and the problem is that the calendar performance starts to decline very quickly and noticeably when the number of events increases (100+ events, and it takes minutes for the calendar to bind data). Because of this, I am trying to extract data from the back-end when the view changes, sending an AJAX request every time the user changes the view (week, month, day, previous, next ... etc.). This is when I start to have problems.

As suggested on the AngularUI Calendar website, I can use this function: $scope.eventsF = function (start, end, timezone, callback) {...} and add it to $scope.eventSources , and it will be called on each review switch. I added $scope.eventsF to my $scope.eventSources , but it has never been updated.

Here is an example (sampling all the data and their work):

 $scope.mainEvents = []; //To initiate the event source Event.getEvents().then(function (events) { // Event is a factory if (events) { //Checking if I have events // If I try: $scope.mainEvents = events; the $scope.eventSources won't update angular.forEach(events, function(value) { this.push(value); }, $scope.mainEvents); } else { // Tell the user no events to render... } }, function (error) { console.log(error); }); $scope.eventSources = [$scope.mainEvents, $scope.draftEvents]; 

Now I changed Event.getEvents() to take two parameters as the start and end dates of the date, send them to the end and get the data as json again (worked fine, I console this).

Here is the code (I tried two ways): Events is a rendering, but $scope.eventSources not updated in both of them.

At first:

 $scope.mainEvents = function (start, end, timezone, callback) { var s = start.format('YYYY-MM-DD'), e = end.format('YYYY-MM-DD'); Event.getEvents(s, e).then(function (events) { $scope.mainEvents = []; //even tried $scope.eventSources.mainEvents if (events) { angular.forEach(events, function (value) { this.push(value); }, $scope.mainEvents); //event tried $scope.eventSources.mainEvents callback($scope.mainEvents); } }, function (error) { console.log(error); }); }; $scope.eventSources = [$scope.mainEvents, $scope.draftEvents]; 

Second:

 $scope.eventsF = function (start, end, timezone, callback) { var s = start.format('YYYY-MM-DD'), e = end.format('YYYY-MM-DD'); Event.getEvents(s, e).then(function (events) { $scope.mainEvents = []; if (events) { angular.forEach(events, function (value) { this.push(value); }, $scope.mainEvents); callback($scope.mainEvents); } }, function (error) { console.log(error); }); }; $scope.eventSources = [$scope.mainEvents, $scope.draftEvents, $scope.eventsF]; 

Hope this is clear enough.

Answer 1

I found a solution to the problem. I did not quite understand why I should do this, but I managed to get it to work. I removed the events from the $scope.mainEvents one by one (I think they use $watch for each individual event in the AngularUI calendar), and then add new events from the promise in $scope.mainEvents and one by one. DO NOT use , use the callback() function when $scope is updated ( $watch will take care of rendering), so callback() will display the event again so that you end with each event being displayed twice. Here is the final code:

 $scope.mainEvents = []; $scope.eventsF = function (start, end, timezone, callback) { //moment.js objects var s = start.format('YYYY-MM-DD'), e = end.format('YYYY-MM-DD'); Event.getEvents(s, e).then(function (events) { //emptying the array $scope.mainEvents.splice(0, $scope.mainEvents.length); //add the retrieved events angular.forEach(events, function (value) { this.push(value); }, $scope.mainEvents); }, function (error) { //promise error logic console.log(error); }); }; 

Answer 2

The easiest way I can think of is to redirect event sources to $scope.eventSources at the end of $scope.eventsF . The code below is based on your second option. Greetings.

 $scope.mainEvents = []; $scope.draftEvents = []; $scope.eventsF = function (start, end, timezone, callback) { var s = start.format('YYYY-MM-DD'), e = end.format('YYYY-MM-DD'); Event.getEvents(s, e).then(function (events) { $scope.mainEvents = []; if (events) { angular.forEach(events, function (value) { this.push(value); }, $scope.mainEvents); // Re-assign event sources $scope.eventSources = [$scope.mainEvents, $scope.draftEvents, $scope.eventsF]; // Assume that 'events' is an array with 5 elements. // console.log($scope.eventSources) will produce : // Array [ Array[5], Array[0], app</$scope.eventsF() ] callback($scope.mainEvents); } }, function (error) { console.log(error); }); }; $scope.eventSources = [$scope.mainEvents, $scope.draftEvents, $scope.eventsF]; // console.log($scope.eventSources) will produce : // Array [ Array[0], Array[0], app</$scope.eventsF() ] 

Edit

I updated the code above to show in which part I tested $scope.eventSources . Can you show in which part of the code you would like $scope.eventSources updated?

Answer 3

I assume this is caused by the scope of Javascript variables. You referenced $scope.eventSources to different limits than the $scope.eventSources in your controller. Maybe $scope.eventSources copy somewhere in the AngularUI calendar .

You can access $scope.eventSources in your controller by simply creating a variable containing a reference to the variable.

 // Create a variable that holds reference to controller $scope var ctrlScope = $scope; $scope.mainEvents = []; $scope.draftEvents = []; $scope.eventsF = function (start, end, timezone, callback) { var s = start.format('YYYY-MM-DD'), e = end.format('YYYY-MM-DD'); Event.getEvents(s, e).then(function (events) { if (events) { angular.forEach(events, function (value) { this.push(value); }, $scope.mainEvents); // Test console.log(ctrlScope.eventSources); callback($scope.mainEvents); } }, function (error) { console.log(error); }); }; $scope.eventSources = [$scope.mainEvents, $scope.draftEvents, $scope.eventsF];