CODEWITHSUNDEEP
fullcalendar
Zoredache
Zoredache

Reputation: 39583

Fullcalendar clientEvents has zero length

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;

Upvotes: 2

Views: 3695

Answers (2)

igo
igo

Reputation: 1777

I tried Zoredache's snippet, but found that it doesn't cover situation when loading is still going. In this case it looks to be better to make function to check if the loading finished already:

function onCalLoad(el, isLoading, view){
  if (isLoading){
     setTimeout(onCalLoad, 300);
  } else {
     if (el.fullCalendar('clientEvents').length==0){
         some ops..
     };
   }
}
$('#calendar').fullCalendar({ 
  loading:function(isLoading,view){
    onCalLoad($(this), isLoading, view);
  },
  ...
});

Upvotes: 2

Zoredache
Zoredache

Reputation: 39583

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);
    }
  },
  ...
});

Upvotes: 6

Related Questions