Turbolink - Fullcalendar only showing on reload - ruby-on-rails

Question

I have fullcalendar calendar that does not show unless I use turbolinks. But I would like not to use turbolink. Is there another way of loading the calendar.
My calendar.js looks like:
var initialize_calendar;
initialize_calendar = function() {
$('.calendar').each(function(){
var calendar = $(this);
calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
lang: "en",
selectable: true,
selectHelper: true,
editable: true,
eventLimit: true,
events: '/events.json',
select: function(start, end) {
$.getScript('/events/new', function() {
$('#event_date_range').val(moment(start).format("MM/DD/YYYY HH:mm") + ' - ' + moment(end).format("MM/DD/YYYY HH:mm"));
date_range_picker();
$('.start_hidden').val(moment(start).format('YYYY-MM-DD HH:mm'));
$('.end_hidden').val(moment(end).format('YYYY-MM-DD HH:mm'));
});
calendar.fullCalendar('unselect');
},
eventDrop: function(event, delta, revertFunc) {
event_data = {
event: {
id: event.id,
start: event.start.format(),
end: event.end.format()
}
};
// noinspection Annotator
$.ajax({
url: event.update_url,
data: event_data,
type: 'PATCH'
});
},
eventClick: function(event, jsEvent, view) {
// noinspection Annotator
$.getScript(event.show_url, function() {
$('#event_date_range').val(moment(event.start).format("MM/DD/YYYY HH:mm") + ' - ' + moment(event.end).format("MM/DD/YYYY HH:mm"));
date_range_picker();
$('.start_hidden').val(moment(event.start).format('YYYY-MM-DD HH:mm'));
$('.end_hidden').val(moment(event.end).format('YYYY-MM-DD HH:mm'));
});
}
});
})
};
(I remove the following at the bottom because i am removing turbolinks from the app: $(document).on('turbolinks:load', initialize_calendar);
)
In my index.html.erb, i have :
<div class="homepage_box_top_dashboard">
<div class='calendar' id="calendar"></div>
</div>
Any help please?

Answer 1

You still need to have something trigger your initialize_calendar() function to fire.
This was getting triggered by TurboLinks. Now you need something else to trigger it.
In plain speak:
$(document).on('turbolinks:load', initialize_calendar);
means: "when the turbolinks:load event fires, call initialize_calendar"
Right now you are just telling the browser that initialize_calendar exists, but you're never turning it on.
You should be able to use this:
// Jquery
$(document).on('ready', initialize_calendar());
-or-
// JQuery shorthand
$(document).ready(initialize_calendar());
which means "when the document:ready event fires, call initialize_calendar"
-or-
// pure Javascript
document.addEventListener('DOMContentLoaded', function() {
initialize_calendar();
});
which means "when the DOMContentLoaded event fires, call initialize_calendar"
You always have to tell JavaScript when to do something. It doesn't have to be when the page loads.
For example, you could assign this action to a button:
$('#initialize_calendar_button').on('click', initialize_calendar);
Hope that helps.