jquery Full Calendar: callback 'after' the calendar has loaded completely

Question

Is there a callback in Adam Shaw's jquery full calendar which is called after the calendar has rendered completely?? I want to call the clientEvents function in that call back to get all the events on the client side. I tried doing this in viewDisplay, but it is called before the events are rendered and the clientEvents returns 0 events.

Solution 1

Actually you can add it by yourself. Update the function render in the fullcalendar.js like this

function render(inc) {
    if (!content) {
        initialRender();
        trigger('complete', null, true);
    }else{
        calcSize();
        markSizesDirty();
        markEventsDirty();
        renderView(inc);
        trigger('complete', null, true);
    }
} 

And add to the initial call callback function:

$('#calendar').fullCalendar({
         editable: true,
         complete: function() {alert('complete');}, 

or, as you wanted, you can access all events

    complete: function() {
        var events = $(this).fullCalendar('clientEvents');
        for(var i in events)
        {
            alert(events[i].title);
        }
    },

Solution 2

I know this post is rather old now, but if it's any help, you don't need to modify the original source as suggested by Cheery (although his/her answer does work fine as well).

You can also just use the callback 'loading' which is already in place:

$('#calendar').fullCalendar({
   loading: function(bool) {
      if (bool){
         alert('I am populating the calendar with events');
      }
      else{
         alert('W00t, I have finished!');
         // bind to all your events here
      }
   }
);

Solution 3

This may be WAY old now, but there is currently an official callback function (added in version 1.6): eventAfterAllRender. No source code modification needed.

Comments

[Khizar]

thanx a lot for the reponse, i'll test and post back , but i tihnk this is just what i needed

[Cheery]

@khizar it works for the initial call, but check it for the events update and other actions, because it could be triggered again - I did not look deep into the code.

[Khizar]

ok i am on a very tight deadline and i haven't had time to test your solution, between the time of my post and your answer, i was looking for work arounds and as a completely temporary solution, i got my work done by calling the clientEvents in the loading option for when the events are finished fetching. but i'll still accept your answer coz it looks perfectly fine logically :) and test it completely later.

[AlexeyMK]

Worth noting: loading only works if your events need to be loaded from somewhere (IE, via a function call or URL). If you're just passing your events down as JSON, loading will (at least as of 1.5.5) not fire.

[cbloss793]

I can confirm that @Cheery's solution worked. :) You just have to use the non-minimized version of the plugin.

[cbloss793]

I will also say this: you can't get access to the events using this solution. :) If you need access to events, you'll have to find another way.

[cbloss793]

Using the eventAfterAllRender, it appears to fire on every event load. What if you want just a single fire?

[Cheery]

@BhupendraPandey This is a 3 years old post. Everything can change during such a long period of time, especially within the jquery or script mentioned above.

[Dominique Alexandre]

True, but you can just make a variable check on the first run. Ex: if(hasAlreadyRun) return;

[Blair Connolly]

That's what I did. Just make sure your variable has the proper scope so that it's not just local to the function using it and then gets destroyed before that function runs again.

[low_rents]

with external sources eventAfterAllRender fires once for every source. and i need a callback when all sources have been rendered OR one particular source has finished rendering. i am quite unhappy about this, but i guess i have to use a counter in eventAfterAllRender which counts to the number of my sources, so i know everything has finished rendering.

[Nouphal.M]

Take a look at eventAfterAllRender in v2 and v3

[Mike Upjohn]

Works when you call out to an external URL for data to render on the calendar. I was able to display a loading GIF while retrieving data and make it disappear when bool came back as false after loading. Thanks for this, works very well!