JSFiddle - React, Tailwind, and code Playground

by adouga

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: [
        {
        "id": "1",
        "title": "Event 1",
        "start": "2012-08-07T08:00",
        "end": "2012-08-09T16:00",
        "url": "",
        "backgroundColor": "red",
        "borderColor": "red",
        "allDay": "FALSE"},
    {
        "id": "2",
        "title": "Event 2",
        "start": "2012-08-08T08:00",
        "end": "2012-08-10T16:00",
        "url": "",
        "className": "pale",
        "allDay": "FALSE"}
    ],
    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 mydata = $('#calendar').fullCalendar('clientEvents');
    console.log(mydata.length);

    var json1 = JSON.stringify(mydata);
    $("#downloadFile").html(json1).fadeIn();


    window.localStorage.setItem('events', json);

    var localData = window.localStorage['events'];
    $("#downloadFile").html(localData).fadeIn();
}

$("#saveEvents").bind("click", saveEvents)
})();