angularjs - Angular ui-calendar => How to use gotoDate? -
what want is, when open scheduling page, calendar must show date based on date supplied , view must in month view. came solution using fullcalendar's gotodate function. problem doesn't seem work.
here code:
controller
if($stateparams.displayeddate != '') { $('#calendar').fullcalendar('gotodate', $stateparams.displayeddate); }
view
<div id="calendar" ui-calendar="calendarconfig" ng-model="eventsources"></div>
well, code above didn't work tried approach. changed codes in controller
if($stateparams.displayeddate != '') { $scope.calendar.fullcalendar('gotodate', $stateparams.displayeddate); }
but error occured saying "calling function undefined object ...... etc ..."
i'm using, angularjs 1.2, angular ui-calendar 1.0, fullcalendar 2.3.1
note: supply $stateparams date in format "yyyy-mm-dd" eg. 2015-02-15
edit update
it seems can't access calendar object. following documentation https://github.com/angular-ui/ui-calendar#accessing-the-calendar-object ended code 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 no "calendars" object }
view
<div ui-calendar="uicalendarconfig.calendar" ng-model="eventsources" calendar="mycalendar"></div>
but still didn't work. can give me step step process? can't follow docs saying.
i tried console.log($scope.mycalendar); undefined tried console.log($scope.uicalendarconfig.calendar); , there no calendars object in it.
update 2
i'm getting close. have inject uicalendarconfig in controller , avaialble still got problem. console.log(uicalendarconfig.calendars); returns 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 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>
looking @ lib's source code seems won't have direct access instance view, have 2 things:
inject "uicalendarconfig" in controller. variable object "calendars" attribute. in attribute there's object calendar instances. name of instance determined attribute in view, "calendar".
add attribute "calendar" in view name instance.
so, if have code this:
<div ui-calendar="calendarconfig" calendar="mycalendar"/>
in controller calendar instance be:
uicalendarconfig.calendars.mycalendar;
see more in source:
https://github.com/angular-ui/ui-calendar/blob/master/src/calendar.js
update:
you getting wrong. based on updated, keep html now, in controller want this:
function thecontroller($scope, uicalendarconfig) { $scope.calendarconfig = { height: ... }; console.log(uicalendarconfig); }
Comments
Post a Comment