15

I have a working fullcalendar on my site, however, the actual calendar table doesn't show until you change the month/year or select "today".

If I look at the rendered source, I see that the div around the table is empty until I press a button.

<div style="position: absolute; -moz-user-select: none;" class="fc-view fc-view-month fc-grid" unselectable="on"></div>

Does anyone have a clue why this is happening?

ksumarine
  • 782
  • 2
  • 12
  • 33

1 Answers1

35

Do you have this calendar in a tab or a dialog, which is hidden from view at first?

If so, you need to explicitly render the fullCalendar when that control is active.

Let's say you are using the jQuery UI Tabs widget and have the FullCalendar in the 2nd tab (which is hidden from view till the 2nd tab is selected). In this case, you could do something like this:

$('#tabs').tabs({
    show: function(event, ui) {
        $('#calendar').fullCalendar('render');
    }
});

This makes sure that the calendar is rendered when the tab is shown. Hope this helps!

ganeshk
  • 5,583
  • 3
  • 27
  • 31
  • Bingo, that worked. I don't have it in the UI tabs, but it is in custom tabs that I made. I was trying to render it but I guess I wasn't putting that code in the right spot. Thank you! – ksumarine Apr 27 '12 at 13:31
  • That's great! Would you mind accepting this as your answer then? – ganeshk Apr 27 '12 at 14:35
  • 3
    @Corey don't forget to accept an answer when it solves your problem. Otherwise, people will not answer you anymore... – Juan Gonzales Apr 27 '12 at 18:14
  • Just a quick note (perfect answer by the way). Does anyone know why it won't render a view that is hidden at first? For me I have to render after my modal comes in and it flicks into action in a weird way... It doesn't really matter because I'm just going to cover it and fade it in (because I'm a smooth operator)... But I'd still like to know the reason behind the decision not to render if hidden! :) – lol Nov 14 '15 at 22:16
  • 1
    @lol FC (as well a lot of other JS libraries) compute the dimensions and positioning of the elements to be rendered based on where they are placed. With hidden elements these calculations will be invalid as soon as the parent element (like a tab or modal) becomes visible. Hence, we force FC to compute on show of the parent element. – ganeshk Dec 04 '15 at 18:35
  • Perfect! That makes sense. So the optimal solution is to fade it in right? – lol Dec 06 '15 at 02:12