Data Browser - Viewing Site  Sector 23 Code Bank Logged in as:  Guest  


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

 > Guest 2/12/2016 3:26:57 PM
Thanks. You really rescue me..
 > Guest 12/22/2016 2:10:35 PM
Very well explained, this help me a lot. Thank you