Eric Liprandi Eric Liprandi - 7 months ago 70
AngularJS Question

how do I get the calendar object with AngularJS ui-calendar using the "controller as" syntax?

I am using ui-calendar from angular-ui. It's very nice and easy to use.

However, I am unable to get a hold of calendar object to call

and execute certain functions on the calendar.

The documentation only gives examples using the
approach, but I am using the
controller as vm
approach recommended by John Papa and others. I have tried using it this way:

<div data-ng-controller="races as vm">
<div ui-calendar="vm.calendarConfig" calendar="vm.calendar"></div>

in the races controller I have the following:

vm = this;
vm.calendarConfig = { header: {...} };
vm.calendar = {};

// somewhere else in a separate click event
vm.calendar.fullCalendar('prev'); // ---> exception

That last line throws an exception
Object has no method 'fullCalendar'

Just wondering what I am missing and if anyone had an example of using
with a
controller as vm

Here is the plunker:


Thanks Josh Kurz for your help. Here is what I ended up doing: I used a hybrid of the $scope and controller as approach. Basically, I added a dependency on $scope to my controller. When I need access to the actual calendar control, I use $scope.calendar.fullCalendar('...'). The plunker has been updated, but here is core of it in the script file:

angular.module('app').controller(controllerId, ['$scope', races];
function races($scope) {
    var vm = this;
    function next() {

and in the html:

<div ui-calendar ng-model="vm.eventSources" calendar="calendar"></div>

Not as clean as I would like it, but it still seems clean enough for my purpose.