Angular ui-calendar => 如何使用gotoDate？

Question

我想要的是，当我打开日程安排页面时，日历必须根据我提供的日期显示日期，并且视图必须是月视图。所以我使用 fullcalendar 的 gotoDate 函数找到了一个解决方案。但是问题是好像不行。

这是我的代码：

控制器

if($stateParams.displayedDate != '') {
    $('#calendar').fullCalendar('gotoDate', $stateParams.displayedDate);
}

查看

<div id="calendar" ui-calendar="calendarConfig" ng-model="eventSources"></div>

嗯，上面的代码不起作用，所以我尝试了另一种方法。我更改了控制器中的一些代码

if($stateParams.displayedDate != '') {
    $scope.calendar.fullCalendar('gotoDate', $stateParams.displayedDate);
}

但是出现了一个错误 "calling a function from undefined object ...... etc ..."

我正在使用，angularJS 1.2，angular ui-calendar 1.0，fullcalendar 2.3.1

注意： 我以这种格式为 $stateParams 提供日期 "YYYY-MM-DD" 例如。 2015-02-15

编辑更新

我似乎无法访问日历对象。所以按照文档 https://github.com/angular-ui/ui-calendar#accessing-the-calendar-object 我把我的代码结束到这个

控制器

$scope.uiCalendarConfig = {
    calendar: {
        height: 720,
        editable: true,
        forceEventDuration: true,
        header:{
            left: 'title',
            center: '',
            right: 'prevYear prev today next nextYear'
        },
        viewRender: currentCalendarDisplayInfo,
        eventDrop: $scope.saveTrainingSchedule,
        eventResize: $scope.saveTrainingSchedule
    }
};

if($stateParams.displayedDate != '') {
    $scope.uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $stateParams.displayedDate);
// console.log($scope.myCalendar); -> returns undefined
// console.log($scope.uiCalendarConfig); -> there is no "calendars" object
}

查看

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

但是还是不行。有人可以给我一个逐步的过程吗？我真的听不懂文档在说什么。

我尝试 console.log($scope.myCalendar); 但它未定义然后尝试 console.log($ scope.uiCalendarConfig.calendar); 并且其中没有 calendars 对象。

更新 2

我快到了。所以我只需要在我的控制器中注入 uiCalendarConfig 然后它就会可用但我仍然遇到问题。 console.log(uiCalendarConfig.calendars); returns 一个空对象。

控制器

var controllers = {};

controllers.trainingScheduleController = function($scope, $rootScope, $state, $stateParams, $http, uiCalendarConfig, utilityFunctions) {

    if($stateParams.displayedDate != '') {
        console.log(uiCalendarConfig.calendars); // returns Object{}
        uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $stateParams.displayedDate); // error -> calling function from undefined
    }



    $scope.calendarConfig = {
        height: 720,
        editable: true,
        forceEventDuration: true,
        header:{
            left: 'title',
            center: '',
            right: 'prevYear prev today next nextYear'
        },
        viewRender: currentCalendarDisplayInfo,
        eventDrop: $scope.saveTrainingSchedule,
        eventResize: $scope.saveTrainingSchedule
    };


};

manageTrainingsModule.controller(controllers);

查看

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

Answer 1

为什么不在 fullCalendar config

中使用 defaultDate

Answer 2

查看 lib 的源代码似乎无法从视图直接访问实例，因此您必须做两件事：

在你的控制器中注入 "uiCalendarConfig"。该变量将是一个具有 "calendars" 属性的对象。在此属性中，还有另一个带有日历实例的对象。您的实例的名称由视图中的一个属性决定，"calendar".
在视图中添加属性 "calendar" 以命名您的实例。

所以，如果您有这样的代码：

<div ui-calendar="calendarConfig" calendar="myCalendar"/>

在控制器中，日历实例将是：

uiCalendarConfig.calendars.myCalendar;

在源代码中查看更多内容：

https://github.com/angular-ui/ui-calendar/blob/master/src/calendar.js

更新：

你误会了。根据您的更新，您将保持现在的 HTML，但在控制器中您要这样做：

function TheController($scope, uiCalendarConfig) {
  $scope.calendarConfig = {
    height: ...
  };

  console.log(uiCalendarConfig);
}

Answer 3

尝试改变

uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $stateParams.displayedDate);

至

uiCalendarConfig.calendars['myCalendar'].fullCalendar('gotoDate', $stateParams.displayedDate);

这解决了我的问题。

Angular ui-calendar => 如何使用gotoDate？

Angular ui-calendar => How to use gotoDate?

fullcalendar

angularjs

angular-ui-router