Fullcalendar for HTML5 LocalStorage

Question

I am using the Full Calender jQuery plugin.

I wanted to store the events and retrieve thru LocalStorage HTML5.

And I have achieved storing part using JSON and got back the item from localstorage item by JSON Parse.

nw when I loop through the JSON value (for more then 50 values) and assign the same to the events object its not working correctly.

Here is my loop ( Sample )

var vEvents = '[';
    
for(i=1; i<=1; i++)
{
    vEvents += '{ "title": "new appointment", "start": "12-MAR-2012 14:00"  }';
}

vEvents += ']';

and it Assignin like this

events: vEvents,

Here is the console log o/p :-

[{ "title": "new appointment", "start": "12-MAR-2012 14:00"  }]

The fullcalender is not fetching the correct o/p , whereas if i put it like below ( static ) its working correctly.

var vEvents = [{ "title": "new appointment", "start": "12-MAR-2012 14:00"  }];

Kindly help me on the same please.

Answer 1

In the first case, you are merely appending a string, whereas fullcalendar expects an object (that is why the second case works). Before storing the data in the localStorage, simply convert it to JSON string.

localStorage.eventsList = JSON.stringify(vEvents);

And convert it back to an object when retrieving from the store

var events = JSON.parse(localStorage.eventsList);

Answer 2

Thanks for your effort. This is how I store:

calendar.fullCalendar('renderEvent',{title: title,start: start,
                            end: end,
                            allDay: allDay,
                            description :'test',
                            save : localStorage.setItem("iCals"+eventIdLocal, JSON.stringify({"title": title, "start": start,"end" : end , "allDay" : allDay }))

                        } 

and this is how I retrieve back:

var eventIdLocal = localStorage.getItem("getiCalsEventIdiCals");

        var title;

        valeventsiCals = '[';  

        for(i=1; i<=eventIdLocal; i++)
        {
            var numval = JSON.parse(localStorage.getItem("iCals"+i));

            valeventsiCals += '{"id" :"'+i+'"',
            valeventsiCals += ',"title" :"'+numval.title+'"',
            valeventsiCals += ',"start" :"'+numval.start+'"';

            if(i<eventIdLocal)
            valeventsiCals += "},";  
        }   

        valeventsiCals +='}]';