Add loading indicator to fullcalendar

Question

I'm trying to add loading spins like this to fullcalendar, when I'm changing months in it. How can I do that?

Answer 1

FullCalendar Version v4 & v5 has a "Loading" callback here is a basic example:

Here is the link to the documentation: FullCalendar (Loading..)

Styles Example:

     #loading {
        width: 100%;
        height: 100%;
        top: 120px;
        left: 470px;
        position: fixed;
        display: block;
        opacity: 0.7;
        background-color: #fff;
        z-index: 99;
        text-align: center;
    }

    #loading-image {
        position: absolute;
        top: 100px;
        left: 240px;
        z-index: 100;
    } 

HTML Where Calendar Output, Add DIV that will overlay and link to progress gif image of your choice:

<div id="calendar"></div> <div id="loading" style="display:none;">
<img id="loading-image" src="/img/loading.gif" alt="Loading..." /></div>

By default style display:none the loading div will be hidden. By using the callback to trigger the show/hide of this progress bar. So the load start event (true) will show the div layer and when it returns (false) indicating not loading anymore, it will hide the div layer.

 var calendar = new FullCalendar.Calendar(calendarEl, {
  loading: function (isLoading) {
                    if (isLoading) {
                        $('#loading').show();
                    }
                    else {                
                        $('#loading').hide();
                    }
                }
  //add rest of your calendar events/options        
 });

Answer 2

You can easily do this using available fullcalendar methods.

loading - triggers when events fetching starts

eventAfterAllRender - Triggered after all events have finished rendering.

 $('#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 
    }
  });