Calendar & Board Shortcode Embed Hangs on Load

[MaxOnTheHill]

Have tried both calendar and Board shortcode embed on a page, but the scripts won’t execute fully on the site.

For the calendar it just hangs when the page loads – the little loading icon stays there forever.

For the Event Board it won’t finish executing the “Masonry/Isotope” responsive script to layout the items based on screen dimensions … they stay as single centred column overlaying each other.

Have jetpack installed and running on a thrive themes content builder page.

Can’t see any JS errors occurring … so not sure of the actual problem – thoughts?

[Stephen Harris]

Hi Max,

The calendar issue sounds like a JavaScript issue (Ie. Error on the page)

Regarding the event board, if the items are rendering but not stacking it could be a CSS conflict.

Are you able to link to the site/pages in question?

[MaxOnTheHill]

Yep – http://yvchog.com.au/events/ … on the “club rides and events” tab

… don’t think it’s css, as the responsive layout is usually js driven … which is why I think it must be JS conflict/issue.

Thanks for looking, Max

[Stephen Harris]

Hi Max,

I’ve just tested on an android tablet and the calendar worked – could this be a browser specific issue? I will test on more devices when I get the chance.

[Stephen Harris]

Ah, so it appears, the ‘loading’ will ‘hang’ until the window is resized. (I must have turned the tablet on it’s side).

I think this page will fix the issue for you: http://stackoverflow.com/questions/11299195/fullcalendar-rending-inside-of-a-tab-not-ui-tabs

[MaxOnTheHill]

Thanks Stephen.

Have tried numerous iterations from above and does not help …. possibly I don’t know the correct ID/references for your calendar, as opposed to the examples.

Wondering if you have a proposed correct script from the referenced?

[Stephen Harris]

The ID is eo_fullcalendar_5 is but that may vary. You may want to call:

$('.tve_scTC2 .eo_fullcalendar').fullCalendar('render');

whenever the calendar tab is selected. How best to call that snippet when the tab is selected is not clear as it will depend on the theme. Though you could listen for an on-click event on the tab.

[Stephen Harris]

I should add that’s important that the above line is called after the event’s container is revealed.

[MaxOnTheHill]

no … I simply can’t get that to work …. and it’s not just the calendar, it’s also the event board grid that has the same issues if used in tabs – or anything that doesn’t have it execute/display on initial page load.

I have just made the tab the calendar is on display on page load and it then works as expected – but isn’t really the tab I want showing on page load; however, with how the widget loads it is the only option currently to get it to work properly.

Thank you for your assistance in attempting to debug – perhaps the triggers for the event display (calendar, board, etc) could have an update to render on display, rather than on PAGE load/ready … as I’m sure it would help reduce future support/issues burden by doing it this way as well 😉

Thanks, Max

[Stephen Harris]

Hi Max,

I’m glad you’ve found a suitable workaround. Unfortunately there’s no native JavaScript event for ‘on display’.

[Author]

Posts