boi_echos boi_echos - 6 months ago 239
AngularJS Question

Angular ui-calendar => How to use gotoDate?

What I want is, when I open the scheduling page, the calendar must show the date based on the date I supplied and the view must be in month view. So I came into a solution using fullcalendar's gotoDate function. But the problem is it doesn't seem to work.

Here is my code:

controller

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


view

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


Well, the code above didn't work so I tried another approach. I changed some codes in my controller

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


but an error occured saying something like "calling a function from undefined object ...... etc ..."

I'm using, angularJS 1.2, angular ui-calendar 1.0, fullcalendar 2.3.1

Note: I supply $stateParams with date in this format "YYYY-MM-DD" eg. 2015-02-15

EDIT UPDATE

It seems that I can't access the calendar object. So following the documentation https://github.com/angular-ui/ui-calendar#accessing-the-calendar-object I ended my code into this

controller

$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
}


view

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


But still didn't work. Can somebody give me a step by step process? I can't really follow what the docs is saying.

I tried to console.log($scope.myCalendar); but it is undefined then tried console.log($scope.uiCalendarConfig.calendar); and there is no calendars object in it.

UPDATE 2

I'm getting close. So I just have to inject uiCalendarConfig in my controller and then it will be avaialble but I still got a problem. console.log(uiCalendarConfig.calendars); returns an emptyObject.

controller

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


view

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

Answer

Looking at the lib's source code seems like you won't have direct access to the instance from the view, so you have to do two things:

  • inject "uiCalendarConfig" in your controller. This variable will be an object with the "calendars" attribute. In this attribute there's another object with the calendar instances. The name of your instance is determined by an attribute in the view, "calendar".

  • add an attribute "calendar" in the view to name your instance.

So, if you have a code like this:

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

In the controller the calendar instance will be:

uiCalendarConfig.calendars.myCalendar;

See more in the source:

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

UPDATE:

You are getting it wrong. Based on your updated, you will keep the HTML as it is now, but in the controller you want to do like this:

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

  console.log(uiCalendarConfig);
}
Comments