Display/Visibilty Problem

[Dave White]

This issue is pretty specific to this website, and not so much an issue with the plugin. I have two tabs setup to toggle back and forth between an event search and a calendar view. At first I had the page load with the calendar (which is preferred actually) but a search would reload the page and the user sees the calendar again.

So I switched it to the search view first but then the calendar view just says loading unless you click day, week or month.

Any idea of an easy way to get the calendar to load even if it’s not the starting view? I figure that’s more likely possible than getting the calendar view showing first to work.

I understand if this is beyond the scope of the support offered for the plugin. Just thought I’d try.

This is the code to switch tabs:

jQuery(document).ready(function(){

jQuery('#toggle-cal').hide();
jQuery('.toggle_tabs li.search').addClass('active');
active_tab = "search active";

jQuery('.toggle_tabs li').click(function(){
    jQuery('.tab_content').hide();
    jQuery('#' + jQuery(this).attr('tab') + '').show();
    jQuery('.toggle_tabs li').removeClass('active');
    jQuery(this).addClass('active');
    active_tab = jQuery(this).attr("class");
});

});

Thanks,
Dave

[Dave White]

http://211nevadacounty.org/events/

[Dave White]

I tried changing it to run on (window).load figuring that might give the calendar enough time to finish. Using that the calendar shows but there are no events showing.

[Stephen Harris]

Hi Dave,

This a known issue with the calendar (a third-party library) – it occurs because the calendar needs to be visible in order to be rendered (so that it can correctly calculate positions). Since it’s only (by default) rendered on page load, and the calendar is not at that time visible as it is on a hidden tab, the calendar doesn’t load.

There is this page that demonstrates how to work around this: http://fullcalendar.io/docs/display/render/

Note that the ID of the calendar is not reliable, you’d be much better off using the selector .eo-fullcalendar.

[Dave White]

Thank you very much. That worked, appreciate the help.

[Author]

Posts