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);
}

但是发生了一个错误，例如“从未定义的对象调用函数......等等......”

我正在使用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）; 并在那里其中没有日历对象。

更新2

我越来越近了。所以我只需要在我的控制器中注入 uiCalendarConfig ，然后它将是可用的，但我仍然遇到问题。的console.log（uiCalendarConfig.calendars）;返回一个emptyObject。

控制器

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

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

注入＆＃34; uiCalendarConfig＆＃34;在你的控制器中。这个变量将是一个带有＆＃34;日历＆＃34;的对象。属性。在此属性中，还有另一个包含日历实例的对象。您的实例名称由视图中的属性确定，＆＃34;日历＆＃34;。
添加属性＆＃34;日历＆＃34;在视图中命名您的实例。

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

<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 2

为什么不在fullCalendar config

中使用defaultDate

Answer 3

尝试更改

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

到

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

这解决了我的问题。

角度ui-calendar =＆gt;如何使用gotoDate？

3 个答案: