Events not displaying on page load

I'm using Fullcalendar called via json and something really weird is happening and this is killing me! Can't find a workaround for it.

I have my calender under a tab. When I click on that tab, the calendar grid shows up, but with no events. If I hit the calendar Next Month and then back to Previous Month, the events all display properly!

If I navigate to another page and then come back to the calendar page, the s开发者_StackOverflow中文版ame thing happens. Have to go next and previous for the events to load.

This is how I am calling the calendar:

$(document).ready(function() {
    $('#calendar').fullCalendar({
        editable: false,
        events: "../events_calendar.php",
        loading: function(bool) {
            if (bool) $('#loading').show();
            else $('#loading').hide();
        }
    }); });

Any ideas here??

Thanks.

There could be an issue with the calender being hidden when the page loads.

So you can try to rerender the event http://arshaw.com/fullcalendar/docs/event_rendering/rerenderEvents/

.fullCalendar( 'rerenderEvents' )

or

To make certain the events are ok you should wire in a refetchEvent http://arshaw.com/fullcalendar/docs/event_data/refetchEvents/

.fullCalendar( 'refetchEvents' )

Both those events should be called when the calendar shows and is ready for example.. not before as it could have the same problem.

and

I think there was an issue with this somewhere already-- but it could have been solved in the newest version. But i cannot find it now. Try and search the bugs at support

http://code.google.com/p/fullcalendar/issues/list?can=1&q=

Other than that you will have to try and tweak the way the calendar loads etc...

Your problem might be due to the fact that FullCalendar is making Asynchronous requests (which means the calendar might load BEFORE the data has been returned). So, change it to make Synchronous requests.

Instead of this

    $(document).ready(function() {
        $('#calendar').fullCalendar({
            editable: false,
            events: "../events_calendar.php",
            loading: function(bool) {
                if (bool) $('#loading').show();
                else $('#loading').hide();
            }    
    }); });

Use something like this:

$(document).ready(function() {
    $('#calendar').fullCalendar({
        editable: false,
        eventSources: [
        {
            url: '../events_calendar.php',
            async: false // No longer asynchronous
        }
    ],
        loading: function(bool) {
            if (bool) $('#loading').show();
            else $('#loading').hide();
        }
    }); });

Compare to the example found on http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/

I had the same problem (see my comments on the original post), and found out why. my json events was like this and was perfectly redering if not called as ajax (ie the json is the value of the parameters 'events'):

 [{id:2317,title:"test",start:"2011-06-08 09:00:00.0",end:"2011-06-08 11:00:00.0",allDay:false,url:"log/show/2317",backgroundColor: 'green'}]

However it does not work when called via ajaxed. to make it working, put the property names of your json between double quotes "...". Be carefull not to use single quotes, it does not work either. My submentionned json becomes:

[{"id":2317,"title":"test","start":"2011-06-08 09:00:00.0","end":"2011-06-08 11:00:00.0","allDay":false,"url":"log/show/2317","backgroundColor": "green"}]

Hope it helps!