Loader is not working in FullCalendar plugin

Issue

I am using FullCalendar(http://fullcalendar.io/) plugin with AngularJs I need to show a loader when data is loading to calendar. I am using loading trigger to show loader

$scope.uiConfig = {loading: $scope.loading}
$scope.loading = function( isLoading, view ) {
          if(isLoading) {// isLoading gives boolean value
              $('#loading').show();
          } else {
              $('#loading').hide();
          }
        }

Explain how it works

Solution

The loading callback of fullcalendar is triggered when events fetching starts/stops.

function( isLoading, view ){} //isLoading is true when events fetching //is started else false when done

JS CODE:

$('#calendar').fullCalendar({
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  },
  year: 2010,
  month: 0, // January
  editable: true,
  events: '/gh/gist/response.json/6218404/',
  loading: function( isLoading, view ) {
      if(isLoading) {// isLoading gives boolean value
          $('#wait').show();
      } else {
          $('#wait').hide();
      }
  }
});

Working demo @ JSFiddle

References:

• loading: callback

Answered By - dreamweiver