JSFiddle - React, Tailwind, and code Playground

by scottysmalls

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.css">
<script src="http://fullcalendar.io/js/fullcalendar-2.4.0/lib/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.js"></script>
<body>
<div id="external-employees">
			<h4>Draggable Employees</h4>
			<div class="employeeItem">Marge</div>
			<div class="employeeItem">Homer</div>
			<div class="employeeItem">Bart</div>
			<div class="employeeItem">Lisa</div>
			<div class="employeeItem">Maggie</div>
		</div>
	<div id='calendar'></div>
</body>

CSS

body {
    margin: 40px 10px;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
}

#external-employees{
    float: left;
    width: 150px;
    padding: 0 10px;
    border: 1px solid #ccc;
    background: #eee;
    text-align: left;
}

.employeeItem{
    z-index: 100;
    cursor: pointer;
    position: relative;
    display: block;
    font-size: .85em;
    line-height: 1.3;
    border-radius: 3px;
    border: 1px solid #3a87ad;
    background-color: #3a87ad;
    font-weight: normal;
    margin:10px;
}

#calendar {
    float:left;
    margin: auto 30px;
    width:300px;
}

JavaScript

$(document).ready(function() {  

    $('#calendar').fullCalendar({
    		allDaySlot: false,
        minTime: '03:00:00',
        maxTime: '12:00:00',
        defaultView: 'agendaDay',
        defaultDate: '2016-01-15',
        eventAfterRender: function(event, element){
        	element.data('myId',event.myId);
          $(element).droppable({
      			drop: function( event, ui ) {
              alert($(ui.draggable).html() + " went to " + $(event.target).data('myId'))
      			}
    			});
        },
        height: 'auto',
        events: [
          {
              title: 'Kwik-E-Mart',
              start: '2016-01-15T04:00:00+00:00',
              end: '2016-01-15T06:00:00+00:00',
              myId: 'Kwik-E-Mart'
          },
          {
              title: 'Moes',
              start: '2016-01-15T06:00:00+00:00',
              end: '2016-01-15T08:00:00+00:00',
              myId: 'Moes'
          }
        ]
    });
});

$(document).ready(function() {
	$(".employeeItem").draggable();
});