Accessing fullcalendar object in Angular ui-calendar

问题

I am trying to access the fullcalendar object in ui-calendar. The docs say that all I need to do is give the calendar attribute a name:

<div ui-calendar="calendarOptions" ng-model="eventSources" calendar="myCalendar">

Then, you should be able to access the calendar as such:

uiCalendarConfig.calendars.myCalendar

This is not working for me. The object I get back is always empty. What Im trying to ultimately do is programatically switch the view. If I was using just fullcalendar by itself, this is how I would do it:

.fullCalendar( 'changeView', viewName )

How do I do this using the ui-calendar directive?

Edit* My actual config object:

$scope.uiConfig = {
    calendar:{
        height: 700, 
        editable: true,
        timezone:'America/Los Angeles',
        ignoreTimezone:false,
        header:{
          left: 'month basicWeek basicDay agendaWeek agendaDay',
          center: 'title',
          right: 'today prev,next'
        },
        eventDrop:  $scope.onEventDrop,
        eventClick : $scope.onEventClick,
        eventResize : $scope.onEventResize,
        viewDisplay : $scope.onViewDisplay

    }
};

My actual calendar directive call:

<div ui-calendar="uiConfig.calendar" ng-model="events" calendar="myCalendar"></div>

My controller:

app.controller('CalendarCtrl', function($scope, $http, $rootScope, uiCalendarConfig){
    // bunch of methods plus $scope.uiConfig as shown above
    // console.log(uiCalendarConfig) outputs {} 
});

回答1:

After looking to their site: http://angular-ui.github.io/ui-calendar/ , I found a solution.

You have to add uiCalendarConfig variable in your controller

angular.module('clientApp').controller('ControllerCtrl', function ($scope, uiCalendarConfig) { ... }

Add the calendar="yourCalendarName"

<div ui-calendar="uiConfig.calendar" ng-model="eventSources" class="calendar" calendar="yourCalendarName">

After that you can start using FullCalendar functions like this:

uiCalendarConfig.calendars.yourCalendarName.fullCalendar('unselect');

回答2:

Solution:

$scope.myCalendar.fullCalendar('changeView', 'agendaDay' );

This looks nothing like what the documentation is instructing me to do. It does however solve my problem.

回答3:

Are you using bower with version 0.9.0-beta1 ? If you are, look at the issue 195.

As @jrzeznik suggested, a quick fix would be to overwrite the calendar.js with the latest one from the github repository.

来源：https://stackoverflow.com/questions/27537407/accessing-fullcalendar-object-in-angular-ui-calendar

标签

angularjs

fullcalendar