2

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.

Before "Next" Button Clicked After "Next" Button Clicked

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
slink
  • 211
  • 3
  • 15
  • I'd provide an image that demonstrates the problem you describe. Linking to an external site might help right now, but doesn't provide a good long term question since it may go offline or change. – Sam Storie May 11 '15 at 21:42
  • @SamStorie - Added two images showing the page as it initially displays, and the page after the next/previous buttons are clicked. – slink May 12 '15 at 12:26
  • @slink, it would be a lot easier to debug if you didn't link to the minified version of your JS files. – Brandon May 12 '15 at 15:16
  • @Brandon - Sorry. Fixed that - it's linked to the unminified JS related to FullCalendar now. – slink May 12 '15 at 15:19

1 Answers1

1

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.

Brandon
  • 68,708
  • 30
  • 194
  • 223
  • Aye, it's not supposed to be a button on the whole modal window - it was a naming error with the modal window and another button on the site. Ironically, the offending code was going to be removed shortly anyway. Corrected the duplicate names, and now it's working perfectly. Thanks. – slink May 12 '15 at 15:34