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

• jquery
• fullcalendar

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.

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

How about this?

$("#calendar").fullcalendar('addEventSource', yourEvent); 

The best way i found to refresh without postback is

 $('#calendar').fullCalendar('removeEvents', data[0].id);
 $('#calendar').fullCalendar('addEventSource', data);

Data need to be an ID or a Filter for 'removeEvents' http://fullcalendar.io/docs/event_data/removeEvents/

Data need to be an Array/URL/Function for 'addEventSource' http://fullcalendar.io/docs/event_data/addEventSource/

You don't need to add and remove events to update them. You just need to get the event from calendar and pass it to the updateEvent method:

    function updateCalanderEvent(id, start, end, title, colour)
    {
        var eventObject = $('#calendar').fullCalendar( 'clientEvents', id )

        if (eventObject != null)
        {
            eventObject.title = title;
            eventObject.start = start;
            eventObject.end = end;
            eventObject.color = colour;

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

I was trying to edit an existing event like you, but in my case I need it to use the same id so i couldn't remove the event and create another one because that doesn't work very great...

Following the documentation on http://arshaw.com/fullcalendar/docs/event_data/updateEvent/

I figured it out that the event you need to pass to the sentences: $('#calendar').fullCalendar( 'updateEvent', eventObject ); can't be any object. It should be an event of fullcalendar, that's why it works great for eventClick event but not outside those events.

To use it outside fullCalendar event this is the code it works for me:

function updateEvent(id, title, date) {

    i = id;

    /*This is the id of the event on full calendar,
    in my case i set this id when I create each event*/

    event = $('#calendar').fullCalendar( 'clientEvents', [i] )[0];
    /*This method returns an array of object with id == i
    That's why is necessary to aggregate [0] at the end 
    to get the event object.*/

    if (event != null){
        //make your modifications and update
        event.title = title;
        event.start = date;
        $('#calendar').fullCalendar( 'updateEvent', event );
    }
}

Hope it works for anyone!

for ajax

function DeploySchedule(){
    $.ajax({
        type: "POST"
        , url: "/Services/ScheduleService.svc/DeploySchedule"
        , contentType: "application/json; charset=utf-8"
        , dataType: "json"
        , success: function (result) {
            $('#calendar').fullCalendar('removeEvents');

            result.forEach(function (_row) {
                var event = new Object();
                event.title = _row.TrackingNumber + " (" + _row.Worker + ")";
                event.start = _row.Date;
                event.WorkerGuid = _row.WorkerGuid;
                event.ScheduleGuid = _row.ScheduleGuid;
                event.TrackingNumber = _row.TrackingNumber;
                event.Worker = _row.Worker;
                $('#calendar').fullCalendar('renderEvent', event);
            });
        }
        , error: function (xhr, status, error) { // if error occure
            alert(xhr.responseText);
        }
        , complete: function () {
        }
    });
}