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

Question

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);

Answer 1

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.

Answer 2

Here is the code that I use:

function addCalanderEvent(id, start, end, title, colour)
{
    var eventObject = {
    title: title,
    start: start,
    end: end,
    id: id,
    color: colour
    };

    $('#calendar').fullCalendar('renderEvent', eventObject, true);
    return eventObject;
}