ui-calendar not working inside Tabset

[psramkumar]

ui calendar is not working inside angular ui Tabset ->tab tried the below code snippet

    <tabset justified="true">
        <tab heading="Calendar View">
            <div class="btn-toolbar ng-scope">
                <p class="pull-right lead">Calendar One View Options</p>
                <div class="btn-group">
                    <button class="btn btn-success" ng-click="changeView('agendaDay', myCalendar1)">AgendaDay</button>
                    <button class="btn btn-success" ng-click="changeView('agendaWeek', myCalendar1)">AgendaWeek</button>
                    <button class="btn btn-success" ng-click="changeView('month', myCalendar1)">Month</button>
                </div>
            </div>
            <div class="calendar"
                 ng-model="eventSources"
                 calendar="myCalendar1"
                 config="uiConfig.calendar"
                 ui-calendar="uiConfig.calendar">
            </div>
        </tab>
        <tab heading="Map View">

        </tab>
    </tabset>

[thelittlebug]

i have exactly the same problem but only if i have the developertools (google chrome) open. exaclty the same happens in firefox.

[mdarveau]

You have to render the calendar when the tab is selected. In Jade/coffeescript: tab(heading="#{__('Schedule')}", select="renderCalendar()")

  $scope.renderCalendar = () ->
    # FIXME Not sure why setTimeout is required...
    setTimeout ()->
      $('#scheduleCalendar').fullCalendar('render')
    , 1
    # Explicit return void otherwise it would return a DOM element which is prohibited in angular (https://docs.angularjs.org/error/$parse/isecdom)
    return

This is fairly well documented but the setTimeout requirement still puzzle me.

[MattCowski]

This works

$scope.renderCalendar = () ->
    $scope.myCalendar.fullCalendar('render')

#make sure to add the extra "calendar" attribute in the the html:
<div ui-calendar select="renderCalendar()" calendar="myCalendar" ... >

[poliveira89]

I have this problem as well.

And the solution of @MattCowski, sadly, did not worked for me.

@thelittlebug my problem has similar behaviour as yours with or without Developer Tools enabled on Chrome. After I open my page the calendar is not rendered. Apparently it's rendered only after some interaction on page. Ex: If I close developer tools (if it is opened) or if I change month, the my calendar is rendered, as expected.

This is the error I get:

TypeError: Cannot read property 'getDay' of undefined
    at dayOffsetToCellOffset (fullcalendar.js:4986)
    at rangeToSegments (fullcalendar.js:5032)
    at buildSegmentsForEvent (fullcalendar.js:5265)
    at buildSegments (fullcalendar.js:5252)
    at _renderDayEvents (fullcalendar.js:5195)
    at MonthView.renderDayEvents (fullcalendar.js:5132)
    at MonthView.renderEvents (fullcalendar.js:2643)
    at renderEvents (fullcalendar.js:498)
    at reportEvents (fullcalendar.js:531)
    at fullcalendar.js:978
    ...

[joshkurz]

This pr might solve this issue. https://github.com/angular-ui/ui-calendar/pull/104

[rkurbatov]

The same problem. @joshkurz, this patch isn't working. When calendar is in angular-ui tab it doesn't render.

Worked solution similair to @mdarveau :

$scope.renderCalendar = function() {
       $timeout(function(){
            $('#calendar').fullCalendar('render');
            $('#calendar').fullCalendar('rerenderEvents');
        }, 0);
};

with tab select=renderCalendar() attribute in html

Seems like original calendar can't render it on element with display:none rule set which is actual for hidden tab. And 'render' event just renders calendar itself and not render its events.

[daric81]

Same issue here. @rkurbatov , I found $('#calendar').fullCalendar('rerenderEvents'); slow to redraw with many events and a custom event template.

For me $(window).resize(); inside the $timeout is much quicker at rendering.

[manojsanjeewa]

@rkurbatov solution work for me.

[martijnAenova]

Using a timeout seems a bit hacky. Only increasing the timeout to an arbitrary number of 100 worked for me.

[rafaeltscs]

@rkurbatov solution work for me.