Question

I assume I am missing something trivial, but I cannot get jQuery tabs to work with multiple fullCalendar implementations. ALL calendars are rendered instantly and show one above the next.

Here is the most simplified JSFiddle I could come up with to show the issue:

JSFiddle

I saw a similar question posted, but the solution to add $(“..”).fullCalendar(“render”) to the .tabs({show: …}) seems based on an earlier version of fullCalendar and in any case did not work.

Anyone know what I am doing wrong?

Answer 1

This works: http://jsfiddle.net/L4kqC/30/

Move the calendar elements inside the element on which you are calling tabs() (as per the jQuery UI doc: http://jqueryui.com/tabs/ )

And call tabs() after fullcalendar() (probably because fullcalendar doesn’t like to be instantiated on hidden elements).