Fullcalendar calendar does not initially render using Angular

Question

I'm working on an implementation of the ui-calendar directive for Fullcalendar. It's supposed to show the calendar, whereupon a date could be selected. However, while the tabs of the calendar show up just fine, the calendar itself remains unrendered until one of the tabs is clicked.

At this point, it's possible to select a date which is properly passed back to the parent. However, upon reopening the calendar it is once again unrendered, and once rendered the selection is not highlighted.

At this point, this is the code for the Angular directive containing the calendar configuration:

    angular.module('app.directives')
    .directive('calendar', ['_', function(_) {
        return {
            restrict: 'A',
            scope:
            {
                date: '=',      // Date in any format Moment accepts
                select: '&'
            },
            templateUrl: 'partials/directives/calendar.html',
            controller: ['$scope', '$translate', 'uiCalendarConfig', function($scope, $translate, uiCalendarConfig)
            {
                var dayKeys = ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'];
                var dayNamesShort = [];
                var dayNamesLong = [];
                _.each(dayKeys, function (dayKey){
                    dayNamesShort.push($translate.instant(dayKey + '.short'));
                    dayNamesLong.push($translate.instant(dayKey + '.long'));
                });

                var monthKeys = ['jan', 'feb', 'mar', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'];
                var monthNamesShort = [];
                var monthNamesLong = [];
                _.each(monthKeys, function (monthKey){
                    monthNamesShort.push($translate.instant(monthKey + '.short'));
                    monthNamesLong.push($translate.instant(monthKey + '.long'));
                });


                $scope.events = [];
                $scope.calendarConfig = {
                        header: {
                            left: 'prev title next',
                            center: '',
                            right: 'today'
                        },
                        defaultDate: $scope.date,
                        selectable: true,
                        editable: true,
                        firstDay: 1,
                        monthNames: monthNamesLong,
                        monthNamesShort: monthNamesShort,
                        dayNames: dayNamesLong,
                        dayNamesShort: dayNamesShort,
                        dayClick: function (date)
                        {
                            $scope.select({date: date});
                        }
                };
            }]
        };
    }]);

Here is the HTML containing the directive: - The calendar itself:

    <div ui-calendar="calendarConfig" ng-model="events"></div>

The div containing the calendar:

    <div ng-click="openSidePanel()">
<ng-transclude></ng-transclude>
<div side-panel opened="sidePanelOpen">
    <div header-panel back="back()" done="done()" title-key="{{titleKey}}">
        <div calendar date="initialDate" select="select(date)"></div>
    </div>
</div>

There is another question on here asking about accessing the Fullcalendar object, namely this one: Accessing fullcalendar object in Angular ui-calendar

I have tried doing this in order to call Fullcalendar's 'render' method, but so far both the solution from the docs and from the above question only return undefined.

Can anyone see what is wrong with this code and perhaps explain why the calendar does not initially show up?

For some further information, when I tried using the method suggested in ui-calendar's docs, I changed the directive name from 'calendar' to 'datePicker' to avoid naming conflicts. I reflected this change in the relevant HTML as well. Doing that changed nothing in the behavior of the calendar and any calls to either uiCalendarConfig or $scope.calendar (the name of my calendar attribute) resulted in them being undefined.

EDIT: This user reports a similar problem which can be solved by introducing a timeout. However, in order to do this access to uiCalendarConfig is neccessary and as of yet this object remains undefined in my current setup. If anyone could give me a pointer on how to fix that, I would be very grateful. Thank you!

Answer 1

Further searching revealed that the bower settings on our end were faulty. They were set to 1.0.0, which was supposedly the last version, but setting it to 'latest' downloaded an up-to-date version of the file calendar.js, which resolved the problem with uiCalendarConfig being undefined.

With that solved, I used the timeout solution mentioned in the question itself to render the Calendar properly.