Clever Geek Handbook

Add loading indicator to fullcalendar

I am trying to add pickups like this in fullcalendar when I change months. How can i do this?

+3


source to share


3 answers


Fullcalendar V1: you have to use the function loading

triggered when you start / stop retrieving events.

$('#calendar').fullCalendar({
        loading: function( isLoading, view ) {
            if(isLoading) {// isLoading gives boolean value
                //show your loader here 
            } else {
                //hide your loader here
            }
        }
});


Fullcalendar V2: When the scheduler plugin is loaded , this callback is also triggered when resources are fetched .

+14


source


You can easily do this using the fullcalendar methods available.

loading - triggers when events start



eventAfterAllRender - Fired after all events have finished.

 $('#calendar').fullCalendar({
    loading: function (bool) {
       alert('events are being rendered'); // Add your script to show loading
    },
    eventAfterAllRender: function (view) {
        alert('all events are rendered'); // remove your loading 
    }
  });
+4


source


Easy / old hack - set the loader inside the calendar div:

<div id="calendar">
<i class="fa fa-spinner fa-spin" style="font-size:24px"></i> Loading
</div>
0


source






More articles:


All Articles