Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Accessing fullcalendar object in Angular ui-calendar

I am trying to access the fullcalendar object in ui-calendar. The docs say that all I need to do is give the calendar attribute a name:

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

Then, you should be able to access the calendar as such:

uiCalendarConfig.calendars.myCalendar

This is not working for me. The object I get back is always empty. What Im trying to ultimately do is programatically switch the view. If I was using just fullcalendar by itself, this is how I would do it:

.fullCalendar( 'changeView', viewName )

How do I do this using the ui-calendar directive?

Edit* My actual config object:

$scope.uiConfig = {
    calendar:{
        height: 700, 
        editable: true,
        timezone:'America/Los Angeles',
        ignoreTimezone:false,
        header:{
          left: 'month basicWeek basicDay agendaWeek agendaDay',
          center: 'title',
          right: 'today prev,next'
        },
        eventDrop:  $scope.onEventDrop,
        eventClick : $scope.onEventClick,
        eventResize : $scope.onEventResize,
        viewDisplay : $scope.onViewDisplay

    }
};

My actual calendar directive call:

<div ui-calendar="uiConfig.calendar" ng-model="events" calendar="myCalendar"></div> 

My controller:

app.controller('CalendarCtrl', function($scope, $http, $rootScope, uiCalendarConfig){
    // bunch of methods plus $scope.uiConfig as shown above
    // console.log(uiCalendarConfig) outputs {} 
});
like image 434
Rigil Avatar asked Dec 18 '14 00:12

Rigil


1 Answers

After looking to their site: http://angular-ui.github.io/ui-calendar/ , I found a solution.

You have to add uiCalendarConfig variable in your controller

angular.module('clientApp').controller('ControllerCtrl', function ($scope, uiCalendarConfig) { ... }

Add the calendar="yourCalendarName"

<div ui-calendar="uiConfig.calendar" ng-model="eventSources" class="calendar" calendar="yourCalendarName">

After that you can start using FullCalendar functions like this:

uiCalendarConfig.calendars.yourCalendarName.fullCalendar('unselect');
like image 62
Yuri Olive Avatar answered Nov 15 '22 06:11

Yuri Olive