JSFiddle - React, Tailwind, and code Playground

by Carl Angelo Nievarez

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" data-color="orange">Orange</div>
			<div class='fc-event red' id="2" data-color="red">Red</div>
			<div class='fc-event purple' id="3" data-color="purple">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'),
                color: $(this).data('color')
			});
            
            console.log('min', $(this))

			// 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);
				
				//alert(event.title + " was dropped on " + event.start.format());
					
			},
			eventResize: function(event, delta, revertFunc) {
				console.log(event.id);
				console.log("Start time: "+event.start.format()+"end time: "+event.end.format());
				
			},
			 timeFormat: 'H(:mm)',
			
			editable: true,
			defaultView: 'agendaWeek',
			droppable: true, // this allows things to be dropped onto the calendar
			drop: function(date) {
				
				//Call when you drop any red/green/blue class to the week table.....first time runs...