| Issue 1178: | Multiple Calendars Visibility Problem | |
| 1 person starred this issue and may be notified of changes. | Back to list |
I'm using 3 tabbed panels on my page. I have 3 different calendars, each with their own separate google calendar feed. I have put one in each tabbed panel content (6tth grade, 7th grade, 8th grade). I have distinguished each calender:
(#calendar-6thgrade, #calendar-7thgrade, #calendar-8thgrade)
When the page loads, on the default tabbed panel (6th grade), the 6th grade calendar shows. When I click to the other tabbed panels (7th, 8th), those 2 calendars do NOT show, BUT the "Today" and navigation buttons show "<---, --->". The "Today" button is highlighted and if I click it, the calendar suddenly appears. Ultimately, all 3 calendars are working, just two (7th, 8th) aren't visible when page loads. My visitor would have to click the "Today" button in order to show those 2 calendars. Can anyone help me out with this problem? My code is below:
<div class="TabbedPanelsContent">
<h1>6th Grade Calendar</h1>
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar-6thgrade').fullCalendar({
// 6th Grade
events: 'https://www.google.com/calendar/feeds/adamjacobs20%40gmail.com/public/basic',
etc..........
</script>
<div id='loading' style='display:none'>loading...</div>
<div id='calendar-6thgrade'></div>
</div>
<div class="TabbedPanelsContent">
<h1>7th Grade Calendar</h1>
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar-7thgrade').fullCalendar({
// 7th Grade
events: 'https://www.google.com/calendar/feeds/v2o3v9800r2h5coojtj8fq461c%40group.calendar.google.com/public/basic',
etc..........
</script>
<div id='loading' style='display:none'>loading...</div>
<div id='calendar-7thgrade'></div>
</div>
etc......
Aug 14, 2013
see the example here: http://arshaw.com/fullcalendar/docs/display/render/
Status:
WontFix
|
|
| ► Sign in to add a comment |
Hi, You have multiple div with same id 'loading'. Rename your div like : <div id='loading6' <div id='loading7' <div id='loading8' And change javascript: loading: function(bool) { if (bool) $('#loading6').show(); else $('#loading6').hide(); }, etc