In jquery fullcalendar, can I add a new event without refreshing the whole month?

fullcalendar, jquery

Solution

to add events on the client side into the fullCalendar you can call:

var myCalendar = $('#my-calendar-id'); 
myCalendar.fullCalendar();
var myEvent = {
  title:"my new event",
  allDay: true,
  start: new Date(),
  end: new Date()
};
myCalendar.fullCalendar( 'renderEvent', myEvent );

I haven't test this code, but this should get the job done.

Problem

I am using jquery fullcalendar and it works great. My events come in from an ajax call and get returned as json. I am trying to figure out if there is a way to add events from the client side without refreshing the whole server. I have the ability to add a new event in my code (which adds it to my database) but the only way i know how to refresh the UI to show this new event is to call refetchevents (but this reloads everything for the month back from the server. Is there anyway I can stick in additional events all clientside to avoid a full month event refresh ? I see i can remove events one by one by the removeEvents method (with an id filter) but i don't see the equivalent around adding an event. Update: I have a followup question given the answers below which both worked. (didn't make sense to create another question). I wanted to see the recommended way to "refresh" a single event on the clientside. I tried to simply call 'renderEvent' with an event with the same Id but that creates a new event on the calendar. I see there is the: UpdateEvent method which I would assume would be the answer but it seems like this only works if you are inside an eventClick (you can't just create a new event object, set the Id and change a field and call update. ``` http://arshaw.com/fullcalendar/docs/event_data/updateEvent/ ``` Is there a recommended way of refreshing an event from the client side similar to the "Add Clientside" event logic below? Right now I am just removing and readding in the event like this: ``` $('#calendar').fullCalendar('removeEvents', data.Event.id); $('#calendar').fullCalendar('renderEvent', data.Event, true); ```

Original source