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 is actually modified, but not modified on the Calendar display(eg: start).

Initially, after I modified the event's details, I did a page reload to display modified changes and it worked too.In that method, I had empty $scope.events = []; array, which I filled after retrieving entries from DB.

But now, I want to avoid that page reload. So, once the event's details are modified from modal window, I clear the contents of $scope.events array using $scope.events = []; and then using API call, I fill the new events again in $scope.events array. This is working fine as the List view shows the modified events details. But the Calendar itself shows old entries. e.g if I change start from 11 April to 13 April, the calendar shows event on 11 April whereas List views shows the modified data i.e 13 April. Using Page reload, corrects this i.e event is shown on modified date(13 April).

How can I ensure that the event is modified on Calendar too without a Page reload ?

I tried calendar.fullCalendar('render'); after fetching new entries from DB, but it does not solve the Problem.

Here are some codes :

Initially I did this to send data to DB and then did a page reload to retrieve updated data. $http.put(url,senddata).success(function(data){$window.location.reload();});

Now I want to avoid the page reload, so I did

        $http.put(url,senddata).success(function(data){//$window.location.reload();//sends modified data to server
        $scope.events = [];  //clear events array

   $http.get(url2).success(function(data){  //fetch new events from server, and push in array
  $scope.schedule = data;
          for(var i=0;i<data.length;i++)
          {
            $scope.events.push({
      idx: data[i].idx,
      title: data[i].title,
      description : data[i].description,
      allDay: false,
      start: new Date(data[i].start), 
      end:  new Date(data[i].end),

      });


     calendar.fullCalendar('render'); //Tried even this, didn't work



          }

        });

Above code pushes modified event in event array as visible in List view, but calendar still shows old event until page is reloaded.

Answer 1

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.