如何更新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.