JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css">
<script src="http://www.arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"></script>
<script src="http://arshaw.com/js/fullcalendar-1.5.4/fullcalendar/gcal.js"></script>
<div id="external-events">
    
<h4>Draggable Events</h4>

    <div class="external-event ui-draggable" style="position: relative;">My Event 1</div>
    <div class="external-event ui-draggable" style="position: relative;">My Event 2</div>
    <div class="external-event ui-draggable" style="position: relative;">My Event 3</div>
    <div class="external-event ui-draggable" style="position: relative;">My Event 4</div>
    <div class="external-event ui-draggable" style="position: relative;">My Event 5</div>
    <p>
        <input type="checkbox" id="drop-remove">
        <label for="drop-remove">remove after drop</label>
    </p>
</div>
<div id="calendar"></div>

CSS

body {
     margin-top: 40px;
     text-align: center;
     font-size: 14px;
     font-family:"Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
 }
 #wrap {
     width: 1100px;
     margin: 0 auto;
 }
 #external-events {
     float: left;
     width: 150px;
     padding: 0 10px;
     border: 1px solid #ccc;
     background: #eee;
     text-align: left;
 }
 #external-events h4 {
     font-size: 16px;
     margin-top: 0;
     padding-top: 1em;
 }
 .external-event {
     /* try to mimick the look of a real event */
     margin: 10px 0;
     padding: 2px 4px;
     background: #3366CC;
     color: #fff;
     font-size: .85em;
     cursor: pointer;
 }
 #external-events p {
     margin: 1.5em 0;
     font-size: 11px;
     color: #666;
 }
 #external-events p input {
     margin: 0;
     vertical-align: middle;
 }
 #calendar {
     float: right;
     width: 900px;
 }

JavaScript

$(document).ready(function () {
    /* initialize the external events
-----------------------------------------------------------------*/
    $('#external-events div.external-event').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: $.trim($(this).text()) // use the element's text as the event title
        };
        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);
        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true, // will cause the event to go back to its
            revertDuration: 0 // original position after the drag
        });
    });
    /* initialize the calendar
-----------------------------------------------------------------*/
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar !!!
        drop: function (date, allDay) { // this function is called when something is dropped
            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');
           
            //create 2 day block
            var threeDayBlock = new Date(date.getTime());
threeDayBlock.setDate(threeDayBlock.getDate() + 2);

            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);
            // assign it the date that was reported
            copiedEventObject.start = date;
            copiedEventObject.end = threeDayBlock;
            copiedEventObject.allDay = allDay;
   ...