Question

While trying to get my highlight a particular event after the page and calendar was loaded based on information from the URL I learned that I had get the event object to use updateEvent. I also learned that that using clientEvents is the way you are supposed to do this. As I try to use clientEvents I am simply getting an empty array back. The documentation and source seem to agree, that if I don’t provide an optional paramater, then I should get back an array of everything currently on my calendar.

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {

  $('#calendar').fullCalendar({
    defaultView: 'agendaWeek',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay',
    },
  });

  $('#calendar').fullCalendar('addEventSource',
    { url: 'https://www.example.org/combinedcalendar/feed/json.php',
      dataType: 'jsonp'});

  console.log($('#calendar').fullCalendar('clientEvents').length);

});
</script>
<div id='calendar'></div>

The value logged in the javascript console is 0;

Answer 1

As I was composing this question and testing things out I realized what should have been obvious in the first place. The $('#calendar').fullCalendar('addEventSource',...); call which is using ajax is asynchronous. So the logging of clientEvents to the console happend before the event data was actually downloaded and added to the calendar.

I moved my logging into the fullCalendar loading function which triggers when a loading is started or completes.

$('#calendar').fullCalendar({ 
  loading:function(isLoading,view){
    if (!isLoading)
    {
      console.log($('#calendar').fullCalendar('clientEvents').length);
    }
  },
  ...
});