JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='http://arshaw.com//js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css' />
<script type='text/javascript' src='http://arshaw.com//js/fullcalendar-1.5.3/jquery/jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='http://arshaw.com//js/fullcalendar-1.5.3/jquery/jquery-ui-1.8.17.custom.min.js'></script>
<script type='text/javascript' src='http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js'></script>
<script type='text/javascript' src='http://arshaw.com//js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js'></script>
</head>
<body>
<div id='downloadFile' style="display:none;">some text to save as file</div>
<button id="saveEvents">Save</button>
<div id='calendar'></div>
</body>
</html>
CSS
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
JavaScript
(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
editable: false,
events: [
{
"title": "Event 1",
"start": "2012-08-07T08:00",
"end": "2012-08-09T16:00",
},
{
"title": "Event 2",
"start": "2012-08-08T08:00",
"end": "2012-08-10T16:00",
}
],
eventClick: function(event) {
alert("Fetch event data with event id = " + event.id);
if (event.url) {
window.open(event.url);
return false;
}
}
});
var saveEvents = function() {
var myEvents = [];
var mydata = $('#calendar').fullCalendar('clientEvents');
console.log(mydata.length);
$.each(mydata, function(i, v) {
var evt = {};
evt.title = v.title;
evt.start = v.start;
evt.end = v.end;
myEvents.push(evt);
});
var test = [{
"name": "Andrew"},
{
"name": "Dude"}];
console.log(JSON.stringify(test));
console.log(test);
var json1 = JSON.stringify(myEvents);
$("#downloadFile").html(json1).fadeIn();
window.localStorage.setItem('events', json1);
var localData = window.localStorage['events'];
$("#downloadFile").html(localData).fadeIn();
}
$("#saveEvents").bind("click", saveEvents)
})();