Angular ui-calendar change view To change the displayed view on an angular ui-calendar (referencing fullcalendar.js) you need to call the underlying jquery functions changeView and/or gotoDate. This requires a reference to the calendar object. Unless you cached the calendar on render, the best way to get the object is to use the uiCalendarConfig global constant. This is only available on more recent versions of fullCalendar.js. In addition, it will not be available unless you both add a reference to uiCalendarConfig AND actually refer to the uiCalendarConfig object in the js file. (Otherwise the debugger optimizes it to null). In your controller, include: angular.module('app.MyController', ['ui.calendar']) .controller('MyController'', ['$scope', ... 'uiCalendarConfig', function ($scope, ... uiCalendarConfig) { In your HTML, you must include a calendar name as 'calendar': <div class="calendar" ng-model="eventSources" calendar="myCalendar" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div> Now you can access the object (once render is complete, such as after a click event): // to change the display view: uiCalendarConfig.calendars.myCalendar.fullCalendar('changeView', 'basicWeek'); // 'month', 'basicWeek', 'basicDay' // to change the date: uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', '01/01/2015'); You will of course also need to define the calendar configuration like usual: $scope.uiConfig = { calendar: { height: 750, editable: false, header: { left: 'month basicWeek basicDay', // agendaWeek agendaDay center: 'title', right: 'today prev,next' } , eventClick: $scope.eventClick // optional , viewRender: $scope.renderView //optional } };
Created By: amos 8/31/2015 2:42:49 PM Updated: 8/31/2015 2:44:26 PM
|
|