JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.js"></script>
<div id='wrap'>
    <div id='external-events'>
        	<h4>Draggable Events</h4>

        <div class='fc-event orange' id="1">Orange</div>
        <div class='fc-event red' id="2">Red</div>
        <div class='fc-event purple' id="3">Purple</div>
        <p>
            <input type='checkbox' id='drop-remove' />
            <label for='drop-remove'>remove after drop</label>
        </p>
    </div>
    <div id='calendar'></div>
    <div style='clear:both'></div>
</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-events .fc-event {
	    margin: 10px 0;
	    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;
	}
	.orange {
	    background-color: orange;
	}
	.red {
	    background-color: red;
	}
	.purple {
	    background-color: purple;
	}

JavaScript

$(document).ready(function () {


	    /* initialize the external events
		-----------------------------------------------------------------*/

	    $('#external-events .fc-event').each(function () {

	        // store data so the calendar knows to render an event upon drop
	        $(this).data('event', {
	            title: $.trim($(this).text()), // use the element's text as the event title
	            stick: true, // maintain when user navigates (see docs on the renderEvent method)
	            id: $(this).attr('id')
	        });

	        // 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: 'today',
	            center: 'title',
	            right: 'agendaWeek'
	        },
	        allDaySlot: false,
	        slotEventOverlap: false,
	        eventOverlap: function (stillEvent, movingEvent) {
	            return stillEvent.allDay && movingEvent.allDay;
	        },
	        columnFormat: {
	            week: 'dddd'
	        },
	        titleFormat: 'dddd',
	        eventDrop: function (event, delta, revertFunc) {
	            //inner column movement drop so get start and call the ajax function......
	            console.log(event.start.format());
	            console.log(event.id);
	            var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration'));
	            var end = event.end || event.start.clone().add(defaultDuration);
	            console.log('end is ' + end.format());

	            //alert(event.title + " was dropped on " + event.start.format());

	        },
	        eventResize: function (event, delta, revertFunc) {
	   ...