FullCalendar - save events in cookie

Question

I'm trying to create a FullCalendar with the external dragging functionality where you can save the events added to the calendar in a cookie (I'd have much prefered to save this on the server, but that's not an option). I'm using jquery cookie plugin to make it easier.

What I've got so far is the save functionality (which I believe is working):

function save() {
    var eventsFromCalendar = $('#calendar').fullCalendar( 'clientEvents');
    $.cookie("DSCalendar", eventsFromCalendar, {expires: 1});
}

...But I can't get the calendar to include this when I next open it. I've tried doing it like this but it doesn't seem to work at all:

$(document).ready(function() {
     ....

        var savedEvents = $.cookie("DSCalendar");
        $('#calendar').fullCalendar({

            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            events: savedEvents,
             ...........

Any chance there's anyone out there who has done this before or have any idea of how I can get the events saved without using a server?

Answer 1

The cookie plugin can't store complex object arrays I think. That's why I suggested using JSON.stringify. However, the Object array returned by .fullCalendar('clientEvents') contains recursive Object references - so even JSON.stringify fails to convert this successfully.

Take a look at this fiddle: http://jsfiddle.net/100thGear/v6tSd/

I created a temp Object array before storing it in the cookie and then JSON.stringify and JSON.parse worked perfectly.

Let me know if this helps.

Answer 2

In FullCalendar v1, the contents of clientEvents includes a key-object pair called "source" for each event, if you are loading your data remotely. That pair has the URL of the remote data in it, which returns the error "Converting circular structure to JSON" if you try to stringify clientEvents in order to save or send it to a location that needs a string, not an array of objects. The work around that I used is to remove the "source" key and object with the following script:

var eventsFromCalendar = $('#calendar').fullCalendar('clientEvents');
for (var i = 0; i < eventsFromCalendar.length; i++) {
    delete eventsFromCalendar[i].source
    }
var jstrng = JSON.stringify(eventsFromCalendar);