Programmatically check to see if calendar has been rendered.

Question

This should be simple, but I'm stupid so...

I want to do a simple conditional statement to see if the calendar has already been rendered within a div. Something like this:

if ( $('#calendar').fullCalendar() )
{
  alert("calendar exists!!");
}

I want to do this so that I can remove, then re-init the calendar programatically. Basically, a 'reset' button.

Can someone please let me know the proper syntax to check if a fullCalendar object has been rendered?

Thank you in advance!!

Answer 1

Thanks everyone... I figured it out. jQuery has a .children() selector. I was able to do a conditional statement on the .length property of that selector to see if there was any content in the div.

if ( $('#calendar').children().length > 0 ) { alert("calendar exists!!"); }

An alternate way to do this, without using jQuery syntax (pure Javascript):

getElementById('calendar').hasChildNodes()

Answer 2

This is kind of a hack, but each day cell has a class with the format fc-day-##. The last cell has the number 41 (check it out in firebug). You could try to select td.fc-da-41 and if you get any elements then the calendar is fully loaded.

if ($('td.fc-day-41').size() > 0) {
    //calendar ready
}

Maybe set it to check every couple hundred milliseconds with .setTimeout()

var checkCal = function() {
    if ($('td.fc-day-41').size() > 0) {
        //calendar ready
    } else {
        window.setTimeout(checkCal(), 200);
    }
}