fullCalendar not rendering new events dynamically

Question

I have the following code in a page on which I am using fullCalendar. I am able to add events in my page, however the calendar does not display this dynamically. I have to move to another month (and then back to the current month), before the dates I added are displayed.

Is there a way to dynamically refresh/render the calendar as dates are programatically added to it?

Here is a snippet of my code so far:

## the code for generating the calendar

<script>

$(document).ready(function() {



 $('#calendar').fullCalendar({

  editable: false,

  events: 'http://example.com/getevents.php',

 });

});

</script> 

<h1>Calendar Test</h1>

<div id='calendar'></div>





## the code for updating it

$('#calendar').fullCalendar( 'refetchEvents' );

Answer 1

First,

events: 'htpp://example.com/getevents.php',

Is this a typo - it should be http

What I use in my code is the $('#calendar').fullCalendar('renderEvent', calEvent) method, where calEvent is the json representation of a calendar method. This way, whenever you add a calendar event on the server-side it gets added to the calendar instantly without requiring a call to the server again.

Otherwise I would try checking your server-side settings. Maybe you are querying your calendar events before the new one is saved.

Answer 2

kyle is using something like $calendar=$('#some_div').fullCalendar(...) in order to minimize the number of DOM parsings performed by jQuery for finding the div. This is a common jQuery optimization.