JSFiddle - React, Tailwind, and code Playground

by william

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css">
<script src="http://arshaw.com/js/fullcalendar-1.5.2/fullcalendar/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.5.2/fullcalendar/fullcalendar.css">
<div id='calendar'></div>

CSS

p {
    margin-bottom: 0.5em;
}

JavaScript

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

var eventDialog = $('<div/>').dialog({
    autoOpen: false,
    modal: true,
    width: 500
});

var calendar = $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    eventClick: function(calEvent, jsEvent, view) {
        debugger;
        eventDialog.dialog({
            title: calEvent.title
        }).html('<p>Start: ' + calEvent.start.toLocaleString() + '</p>' +
                '<p>End: ' + calEvent.end.toLocaleString() + '</p>' +
                '<p>This event can be changed by using the '+
                '<a href="http://arshaw.com/fullcalendar/docs/event_data/updateEvent/">updateEvent</a> method. </p>' +
                '<p>Configurable parameters of the ' +
                '<a href="http://arshaw.com/fullcalendar/docs/event_data/Event_Object/">event object</a> ' +
               'include the title, start datetime, end datetime, whethere it\'s a full day event, etc.</p>'
               ).dialog('open');
        //calEvent.start = new Date(2011, 9, 4);
        //$('#calendar').fullCalendar('updateEvent', calEvent);
    },
    selectable: true,
    selectHelper: true,
    select: function(start, end, allDay) {
        var title = prompt('Event Title:');
        if (title) {
            calendar.fullCalendar('renderEvent', {
                title: title,
                start: start,
                end: end,
                allDay: allDay
            }, true // make the event "stick"
            );
        }
        calendar.fullCalendar('unselect');
    },
    editable: true,
    events: [
        {
        title: 'All Day Event',
        start: new Date(y, m, 1)},
    {
        title: 'Long Event',
        start: new Date(y, m, d - 5),
        end: new Date(y, m, d - 2)},
    {
        title: 'Meeting',
        start: new Date(y, m, d, 10, 30),
       ...