how to update an event in fullCalendar?

Question

I want to update my json in fullcalendar, Here is what I am exactly trying to do. I have a JSON string which I am directly trying to feed in to the event objects in the full calendar.

-->

var JSON[
    {
        "id": "1", // Optional
        "title": "Demo event", // Required
        "start": "2013-08-28 10:20:00", // Required
        "end": "2013-08-28 11:00:00", // Optional
        "allDay": false, // Optional
        "url": "http://google.com", // Optional, will not open because of browser-iframe security issues
        "className": "test-class", // Optional
        "editable": true, // Optional
        "color": "yellow", // Optional
        "borderColor": "red", // Optional
        "backgroundColor": "yellow", // Optional
        "textColor": "green" // Optional
    },
    {
        "id": "2", // Optional
        "title": "Demo event 2", // Required
        "start": "2013-08-27 10:20:00", // Required
        "end": "2013-08-27 11:00:00", // Optional
        "allDay": false, // Optional
        "url": "http://google.com", // Optional, will not open because of browser-iframe security issues
        "className": "test-class", // Optional
        "editable": true, // Optional
        "color": "yellow", // Optional
        "borderColor": "red", // Optional
        "backgroundColor": "yellow", // Optional
        "textColor": "green" // Optional
    }
];

,

Then I want to modify the JSON on some drop down event (not shown in the fiddle) to a new string and try to get the new event on the calendar.

The fullCalendar does not take effect.

http://jsfiddle.net/pratik24/u8Ksw/28/

Thanks for the help. appreciate it.

Answer 1

You aren't calling the correct fullCalendar method to render the new events.

This will not work because it is only meant to render the events the first time around:

   $("#demo-calendar").fullCalendar('renderEvents', JSON);

Instead you need to remove the events on the calendar and refresh them:

   $("#demo-calendar").fullCalendar('removeEvents'); 
   $("#demo-calendar").fullCalendar('addEventSource', JSON); 

Check the Fiddle: http://jsfiddle.net/shaunp/u8Ksw/29/

NOTE that there is a fullCalendar method called refetchEvents, but that it does NOT work on an array of events such as what you have created, so you must manually take the events off and re-add the event source again.

Answer 2

You need to add the following lines:

$("#demo-calendar").fullCalendar('removeEvents'); 
$("#demo-calendar").fullCalendar('addEventSource', JSON, true); 

When adding new events to the calendar they can disappear when switching months. To solve this add stick: true to the event object being added to the scope.