在Angular ui-calendar中访问fullcalendar对象

时间:2014-12-18 00:41:00

标签: angularjs fullcalendar

我正在尝试访问ui-calendar中的fullcalendar对象。文档说我需要做的就是给日历属性一个名字:

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

然后,您应该可以访问日历:

uiCalendarConfig.calendars.myCalendar

这对我不起作用。我回来的对象总是空的。我试图最终做的是以编程方式切换视图。如果我自己只使用fullcalendar,我就是这样做的:

.fullCalendar( 'changeView', viewName )

如何使用ui-calendar指令执行此操作?

编辑*我的实际配置对象:

$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

    }
};

我的实际日历指令调用:

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

我的控制器:

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

3 个答案:

答案 0 :(得分:6)

在查看他们的网站后:http://angular-ui.github.io/ui-calendar/,我找到了解决方案。

您必须在控制器中添加uiCalendarConfig变量

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

添加日历=&#34; yourCalendarName&#34;

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

之后,您可以开始使用FullCalendar函数,如下所示:

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

答案 1 :(得分:5)

解决方案:

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

这看起来与文档指示我做的完全不同。但它解决了我的问题。

答案 2 :(得分:0)

您使用的是版本0.9.0-beta1的bower吗? 如果是,请查看问题195

正如@jrzeznik建议的那样,快速解决方法是使用github存储库中的最新版本覆盖calendar.js。