fullCalendar + Turblolinks

[zedtux]

The calendar is working fine within my Rails 4 application until the user click an event and then the back button from the web browser.

In this case, the calendar is duplicated on the page.

How to make it working so that the user doesn't see multiple times the calendar when using the back button?

[zedtux]

I was able to fix this issue by moving the JavaScript initialisation of the fullcalendar out of the HTML view within a .js.erb file. The HTML file is loaded first, showing a "Loading" spinner, then a JS call to the same action is done so that the .js.erb file is executed and ran.

Using the back button doesn't fires it again and the existing JavaScript code in the cache is still running so that the calendar is still working.

[davidwessman]

You have to load your calendars in a good manner, with Turbolinks 5 you need to remove Fullcalendar from a before_cache tag.

Example:

function eventCalendar() {
  return $('#event_calendar').fullCalendar({ ***config***});
};
function clearCalendar() {
  $('#event_calendar').fullCalendar('delete'); // In case delete doesn't work.
  $('#event_calendar').html('');
};
$(document).on('turbolinks:load', eventCalendar);
$(document).on('turbolinks:before-cache', clearCalendar)

Link to Turbolinks regarding idempotent scripts: https://github.com/turbolinks/turbolinks#making-transformations-idempotent

[zedtux]

Thank you @davidwessman for your reply 👍