JSFiddle - React, Tailwind, and code Playground

by pratik24

HTML

<link rel="stylesheet" href="http://www.kula.org.uk/publicscripts/fullcalendar/fullcalendar.css">
<script src="http://arshaw.com/js/fullcalendar-1.5.4/fullcalendar/fullcalendar.js"></script>
<div id="demo-calendar">Calendar</div>

JavaScript

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
    }
];

$("#demo-calendar").fullCalendar({
    header: {
        left: "prev,next today",
        center: "title",
        right: "month,agendaWeek,agendaDay"
    },
    events: JSON
});




JSON={
        "id": "3", // Optional
        "title": "display me", // Required
        "start": "2013-08-29 10:20:00", // Required
        "end": "2013-08-29 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
   ...