FullCalendar Not Rendering in Tabs

Question

I have some basic custom tabs setup that function using click events that show/hide DIVs.

FullCalendar isn't showing up on one of those tabs despite using the render function (docs).

$(".tabs .tab").click (e) ->
  ...
  $("#calendar").fullCalendar "render"

The #calendar DIV is initially hidden, but from my understanding, the render function should force the calendar to render with each click. All of the other tabs work properly, so I know that it's not a problem with the show/hide functionality at all.

Does anyone know what might be going wrong here?

Answer 1

The problem ended up being related to the way I was showing/hiding DIVs-

The CSS selector that I was using to hide DIVs was too broad and ended up assigning display: none; to the calendar DIV (which was a child of the tab content DIVs).

The solution was to change:

$("#tab-contents div").hide()

To:

$("#tab-contents").children().hide

In the HTML the calendar was shown like this (in HAML):

#tab-contents
  #tab-calendar
    #calendar
  #tab-other
    ...

Thanks for the help and suggestions, and I should have posted more code in the beginning.

Answer 2

There usually are problems with some scripts no being able to work correctly on hidden DIV's.

I usually load page with everything visible, and after about 200ms I hide everything, that needs to be hidden.

For bootstrap tabs, I set every tab container "active" class and for tabs menu, I use this trigger script.

setTimeout(function() {
    $('.my-tabs-control a').first().click();
}, 200);

You could try this solution for your own script.