How do you get the visible date range in angular-ui-calendar

Question

Using this calendar control http://angular-ui.github.io/ui-calendar/ I want to watch the visible date range displayed.

I've read the docs, even gone into the source of the full calendar control, the only place the visible date range appears to be available is in a ViewObject callback or in a local closure variable on the control code itself. (Not available via this).

Surely I'm missing something simple. I'm wanting to $watch the visible dates so I can fetch schedule data that needs to be added to the list of events.

I've got a caching backend that arFullCalendar won't hit when it makes ajax requests for more event data, so I'm trying to keep the event list internal and do all the fetching with angular.

I am using version 1.3 of arFullCalendar, not the 2.0 Beta.

---

Update: Based on @Thara's suggestion below, I did manage to find the viewRender callback, then I just had to wire that up and now I can tell when the view changes.

   $scope.calendarConfig = {
        calendar:{
            height: "100%",
            ...
            viewRender: function(view, element) {
                $log.debug("View Changed: ", view.visStart, view.visEnd, view.start, view.end);
            }
        }
    };

My problem was I was stuck trying to $watch the date changes, and that isn't possible with the jQuery based control.

Answer 1

You need to use getView() function exposed in the arshaw's full calendar as follows,

$scope.getView = function() {
        var view = $scope.myCalendar.fullCalendar('getView');
        console.log(view);
        console.log(view.start);
        console.log(view.end);
        console.log(view.visStart);
        console.log(view.visEnd);
    };

<div class="calendar" ng-model="eventSources" data-calendar="myCalendar" data-config="uiConfig.calendar" data-ui-calendar="uiConfig.calendar"></div>

getView function essentially exposes View Object that contains information of the current view.