JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dl.dropbox.com/u/1510510/temp/demo/fullcalendar.css">
<script src="http://dl.dropbox.com/u/1510510/temp/demo/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
        <title>mydrag</title>
    </head>
    <body>
        <div id="container">
            <div id="mydrag" >My Drag</div>
            <div id="calendar"></div>
        </div>
    </body>
</html>

CSS

#container {
    width: 600px;
    height: 500px;
}
#mydrag {
    width: 75px;
    height: 30px;
    background-color: red;
}

JavaScript

function onExternalEventDrop(date, allDay) {
    alert("Dropped on " + date + " with allDay=" + allDay);
}

$('#mydrag').each(function() {

    // create an Event Object
    // (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
    // it doesn't need to have a start or end
    var eventObject = {
        title: 'MyDrag Title'
    };

    // store the Event Object in DOM element
    // so we can get to it later
    $(this).data('eventObject', eventObject);

    // make the event draggable using jQuery UI
    $(this).draggable({
        containment: '#container',
        helper: 'clone',
        // revert: 'invalid',
        revert: function(droppableObj) {
            //if false then no socket object drop occurred.
            if(droppableObj === false) {
                // revert the object by returning true
                alert('Not a droppable object');
                return true;
            }
            else {
                alert('yes - its true now I am in droppable');
                // droppableObj was returned,
                // We can perform additional checks here
                // return false so object does not revert
                return false;
            }
         },
        revertDuration: 500,
        start: function(e, ui) {
            $(ui.helper).css('width', $(this).css('width'));
        }
    });

});

$('#calendar').fullCalendar({
    aspectRatio: 2.25,
    header: {
        left: '',
        center: 'title',
        right: 'prev,next'
    },
    columnFormat: {
        month: 'dddd'
    },
    droppable: true,
    drop: onExternalEventDrop
});
$('#calendar').droppable();