Initial rendering incomplete inside of bootstrap tabs

[michael34]

See this plunk: http://plnkr.co/edit/GeCcqmmuZC1fjCycdfS0?p=preview It doesn't render the calendar when inside of a tab until i click today. Workaround would be if you wrap the initialization in a $timeout

scope.init = function () { $timeout(function() { calendar.fullCalendar(options); }); if (attrs.calendar) { uiCalendarConfig.calendars[attrs.calendar] = calendar; } };

Not sure if this is a good solution...

[mattoliver]

this is actually a "feature" of fullcalendar: http://fullcalendar.io/docs/display/render/ "Notice that this example calls render whenever any tab is shown, not just the tab that the calendar is within. This is okay, because FullCalendar is smart enough to only render calendars that are visible to the user."

so if your calendar is created before your tab is visible then it won't render the events. I had to use a similar timeout function when I switched tabs because I was updating my events on a different tab.

[michael34]

Oh Okay. Thanks.