Cannot read property 'fullCalendar' of undefined

[figo2264]

I'm trying to dynamically filter ui-calendar eventSource, but somehow I faceed an error.

Cannot read property 'fullCalendar' of undefined

Below is my code.

var loadEventSource = function(operator){

            if(esUtil.isEmpty(operator)){
                $scope.eventSources = [{url:'/dashboard/groupCalendar/all'}];
            }else{
                console.debug(operator);
                $scope.eventSources = [{url:'/dashboard/groupCalendar/'+operator}];
            }
        };

        $scope.filterCalendarByOperator = function(){
            loadEventSource($scope.operator);
            $log.debug("Filter By Operator : "+$scope.operator);
            $scope.calendar.fullCalendar('refetchEvents');
        };

        /* config object */
        $scope.uiConfig = {
            calendar:{
                height:780,
                editable: false,
                header:{
                    left: 'month basicWeek',
                    center: 'title',
                    right: 'prev,next'
                },
                customButtons: {
                    myCustomButton: {
                        text: 'All User',
                        click: function() {
                            alert('clicked the custom button!');
                        }
                    }
                },
                eventLimit:true,
                views:{
                    agenda:{
                        eventLimit:6
                    }
                },
                eventClick:openGroup,
                //dayClick: $scope.alertEventOnClick,
                //eventDrop: $scope.alertOnDrop,
                //eventResize: $scope.alertOnResize
                dayRender:changeDayColor,
            }
        };

        loadEventSource();

And Below is script loading part.

  <script type="text/javascript" src="${contextPath}/dist/components/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="${contextPath}/dist/components/jquery-ui/jquery-ui.min.js"></script>

  <%--<script type="text/javascript" src="${contextPath}/dist/components/jquery-bootstrap/jquery-bootstrap.concat.js"></script>--%>
  <script type="text/javascript" src="${contextPath}/dist/components/angular/angular.concat.js"></script>
  <script type="text/javascript" src="${contextPath}/dist/components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
  <script type="text/javascript" src="${contextPath}/dist/components/bootstrap/js/bootstrap.min.js"></script>

  <script type="text/javascript" src="${contextPath}/dist/components/moment/moment.min.js"></script>
  <script type="text/javascript" src="${contextPath}/dist/components/fullcalendar/fullcalendar.min.js"></script>
  <script type="text/javascript" src="${contextPath}/dist/components/fullcalendar/gcal.js"></script>
  <script type="text/javascript" src="${contextPath}/dist/components/oclazyload/ocLazyLoad.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>

Is there anything I missed??

[flick36]

you have to inject the uiCalendarConfig to the controller and then just use it like:

uiCalendarConfig.calendars.mycalendar.fullCalendar('refetchEvents')

[tsuz]

@flick36 I have the same problem and uiCalendarConfig.calendars is returning an empty object {}

[tsuz]

This seems to be another related issue and I've found a temporary work-around here: https://github.com/angular-ui/ui-calendar/issues/418