angularjs ui-calendar Cannot read property 'calendars' of undefined

Question

I followed the instruction here: http://angular-ui.github.io/ui-calendar/ to create calendar in angularjs. However, when I tried uiCalendarConfig.calendars[calendar].fullCalendar('render'); it cause an error TypeError: Cannot read property 'calendars' of undefined.

I did add ui-calendar as dependency in my controller and uiCalendarConfig in my function's parameter. A ll latest version of the javascript:

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="resources/js/calendar.js"></script>
<script src="resources/js/fullcalendar.js"></script>

My HTML looks like this:

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

Anyone figure out what I missed that causes the error?

Thanks

Answer 1

Its a known issue in angular ui-calendar

please check the issue and it's solution here

Answer 2

I figured out the problem, I need to use uiCalendarConfig.calendars.calendar.fullCalendar('render'); instead of uiCalendarConfig.calendars[calendar].fullCalendar('render');