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

Here is how I fixed a similar problem on my page.

view (simplified, note using jade)

div#calendarNugget(ng-show="activeCalendar == 'Nugget'" ui-calendar="uiConfig.calendarNugget" ng-model="eventSources")
div#calendarWillow(ng-show="activeCalendar == 'Willow'" ui-calendar="uiConfig.calendarWillow" ng-model="eventSources2")

controller:

As per ui-calendar docs, I start with an empty array for my event sources. Ignore that I should probably rename these eventSources to something about the shop names (willow, nugget)

$scope.eventSources = [];
$scope.eventSources2 = [];

I then call a factory function that makes an http request and pulls a series of events from the DB. The events all have "title", "start", "end" properties (make sure your Date format is correct). They also have a "shop" property, which tells me which calendar to add the event to.

So after receiving the data I make two local arrays, loop through the received http data, and assign the events to those local arrays by shop. Finally, I can re-render the calendars with the proper event data by calling addEventSource, which automatically re-renders as per the fullCalendar docs

It looks something along the lines of this iirc:

function splitShiftsByShop(shifts) {

  var nuggetShifts = [];
  var willowShifts = [];

  for (var i=0; i<shifts.length; i++) {
      if (shifts[i].shop === "Nugget") {

          var nshift = {
            title : shifts[i].employee,
            start : new Date(shifts[i].start),
            end : new Date(shifts[i].end),
            allDay: false
          }

          nuggetShifts.push(nshift);

      } else if (shifts[i].shop === "Willow") {

          var wshift = {
            title : shifts[i].employee,
            start : new Date(shifts[i].start),
            end : new Date(shifts[i].end),
            allDay: false
          }

          willowShifts.push(wshift);
      }
  }

  /*render the calendars again*/
    $('#calendarNugget').fullCalendar('addEventSource', nuggetShifts);
    $('#calendarWillow').fullCalendar('addEventSource', willowShifts);

}

Answer 2

Just a quick correction to Studio4Development's answer. You should use "splice" not "slice". Slice returns the trimmed array. What we want to do is actually alter the original array. So you can use:

$scope.events.splice(0, $scope.events.length)

and to add new events:

$scope.events.push(newEvent)

Answer 3

I was having some similar issues where events weren't being refetched after emptying my "eventSource" array ($scope.eventSources = [$scope.completedEvents]) and repopulating it with new events. I was able to overcome this at first by calling 'removeEvents',

uiCalendarConfig.calendars.calendar.fullcalendar('removeEvents')

This is hackish, so after further tinkering I found that events were refetched when my child array is modified,

$scope.completedEvents.splice(0, $scope.completedEvents.length)

After reviewing the source, I can see that the eventSource array is being watched, but the 'refetch' is never occurring. furthermore, I was never able to get the following to work,

uiCalendarConfig.calendars.calendar.fullcalendar('refetchEvents')

Answer 4

Try this. It worked for me.

function flushEvents()
{
    $scope.events.splice(0,$scope.events.length);

    for(var i=0; i<$scope.events.length; i++)
    {
        $scope.events.splice(i,1);
    }

}

Answer 5

As you already know Full Calendar is dependant on JQuery. Therefore, all you need to do is put an ID on your calendar like this:

<div id="calendar" ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="eventSources"></div>

and then when ever you want to update the calendar just call:

$('#calendar').fullCalendar('refetchEvents')

I struggled with this for some time as well and this fixed all my problems. I hope this will help you too!

Goodluck!

Answer 6

According to ui-calendar code, it does actually watch eventSources but never the actual individual sources. So doing a push to, let's say $scope.events ($scope.eventSources = [$scope.events]), will never trigger anything.

So push events to $scope.eventSources[0]

$scope.eventSources[0].splice(0, $scope.eventSources[0].length);
$scope.eventSources[0].push({
 title : title,
 start : start,
 end : end                    
});