AngularJS UI-calendar not updating events on Calendar

Question

I am using Angular UI-Calendar to show some events on the Calendar. The events are showing fine on the Calendar. But when I update any event\'s details, the event\'s detail

Answer 1

Although it's late response but hope it may help some. I am putting it forth step by step.

1. You will need to maintain the same event source as Studio4Development mentioned earlier.

   $scope.events //no need to reinitialize it

2. You will remove the updated event from events array like this (for last event in event array):

   $scope.events.splice($scope.events.length - 1, 1);

For event that may exist anywhere in the events array you'll need to find its index using:

var eventIndex = $scope.events.map(function (x) { return x.Id; }).indexOf(eventId);

and then you'll remove it from events array like this:

$scope.events.splice(eventIndex, 1);

3. Next you'll fetch this event from the API again like this:

   getEvent(data.Id);

4. and in the callback method you'll again add the event in events array:

   var getSingleEventSuccessCallback = function (event) { $scope.events.push(event); };

Answer 2

Try maintaining the same array instance.

Instead of doing:

$scope.events = []

Try:

$scope.events.slice(0, $scope.events.length);

Then when your server request comes back, add each item individually to the existing array:

for(var i = 0; i < newEvents.length; ++i) { $scope.events.push(newEvents[i]); }

The reason I suggest this is because what you're describing sounds like the calendar might be holding onto the old list of events. The calendar might not know to update its reference, so instead, let it keep the same reference but change the contents of the array.

Answer 3

Don't know if you found the solution to your problem, but what worked for me was:

calendar.fullCalendar('refetchEvents');

Answer 4

I found this and it helped me:

$(id_your_div).fullCalendar('removeEvents'); 
$(id_your_div).fullCalendar('refetchEvents');

Answer 5

Was stuck on this for a while. What seems to be working for me turned out to be quite simple

I fetch my calendar from google and run an event formatter function. In this I define a new array and at the end of the function I set my eventSource equal to the new array. Then I call $scope.$apply

    x = []
    for e in events
      x.push(
        title: e.summary
        etc...
      )
    $scope.eventSource = x
    $scope.$apply()