I've created a Bootstrap modal to display an event calendar for a work location using FullCalendar. 90% of the time, it works, but for one location it creates an "OFF" message that occupies the entire screen.
The offending page is live here:
http://gchrl.org/test.php?q=locations/columbia-county-library
The code from one branch to another is identical, so I'm at a loss as to why this branch does not function like the others.
The images below show the behavior; the modal displayed properly, and the resulting display from pressing either the "next" or "previous" trigger.
This is the code responsible for what you're seeing, in custom.js
$('#evansCal').click(function() {
if ($(this).text() == 'OFF')
{
$('#eventCal').fullCalendar('addEventSource',evansGCal);
$('#eventCal').fullCalendar('addEventSource',evansGKidsCal);
$('#eventCal').fullCalendar('addEventSource',teenGCal);
$(this).text('ON');
$(this).removeClass('btn-default');
$(this).addClass('btn-info');
}
else
{
$('#eventCal').fullCalendar('removeEventSource',evansGCal.googleCalendarId);
$('#eventCal').fullCalendar('removeEventSource',evansGKidsCal.googleCalendarId);
$('#eventCal').fullCalendar('removeEventSource',teenGCal.googleCalendarId);
$(this).text('OFF');
$(this).removeClass('btn-info');
$(this).addClass('btn-default');
}
});
evansCal
refers to the entire modal window, which includes the background.
It's not that clicking on the next/previous arrow is causing the issue, it's clicking anywhere. The text of your calendar is not OFF, so the else
gets hit, your calendar gets the event sources removed, and the entire contents of the modal window is replaced with the word "OFF".
Try it for yourself, when you launch the modal, click on the background, then relaunch the modal. You'll see the OFF text.
I don't follow what you're trying to do by turning your entire modal window into a button, but your debugging should start with this block of code. You probably want to be hooking up that click handler to something other than the entire window.