angularjsfullcalendarfullcalendar-schedulerui-calendar

Render angular ui calendar from other controller using ng-click


I am using Angularjs Calendar UI for creating events scheduler calendar. Initially Calendar is hidden and on switch toggle it is displayed. But calendar is not rendered until next or prev month button is pressed.

app.controller('toggleController', [ '$scope', function($scope) {
  $scope.toggleSelection = function toggleSelection(event) {
      angular.element(document.querySelectorAll('.calendar-container')).css({display:'block'});
  };
}]);

so i want to call render function from calendar ui controller so that it is rendered on toggling view from above controller

app.controller('CalendarCtrl', ['$scope','$rootScope', function($scope,  $compile, $timeout, uiCalendarConfig) {
    /* Change View */
    $scope.renderCalendar = function(calendar) {
      $timeout(function() {
        if(uiCalendarConfig.calendars[calendar]){
          uiCalendarConfig.calendars[calendar].fullCalendar('render');
        }
      });
    };
}]);

I tried calling renderCalendar function using $rootscope but I get below error

$timeout not defined or uiCalendarConfig not defined etc


Solution

  • dependency declaration and injection has to be same and in-order.

    Do it like :

    app.controller('CalendarCtrl', ['$scope','$compile', '$timeout', 'uiCalendarConfig`, function($scope,  $compile, $timeout, uiCalendarConfig) {\\