JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css">
    <div class="container">
      <div class="row">
        <div class="col-md-3">
          <div id='external-events'>
            <h4>Scénarios</h4>
            <div class="single-scenario external-event"><div class='fleft name'>Scénario 1</div><div class="edit fright"><a href="#">Modifier</a></div><div class="clearer"></div></div>
          </div>
        </div>
        <div class="col-md-9">
          <div id='calendar'></div>
        </div>  
      </div>
    </div>

CSS

.container {
	margin-top: 30px;
}

.external-event {
	background: silver;
	color: #fff;
	cursor: pointer;
	padding: 2px 5px;
}

.fleft {
	float: left;
}

.fright {
	float: right;
}

.clearer {
	clear: both;
}

.single-scenario {
	margin-bottom: 10px;
	text-align: center;
}

JavaScript

$(document).ready(function() {


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

	$('#external-events div.external-event').each(function() {
	
		var eventSources = [{
			title		: 'event1',
			start		: '8:00:00',
			allDay 		: false
		},{
			title		: 'event2',
			start		: '10:00:00',
			allDay		: false
		}];
		
		$(this).data('eventObject', eventSources);
		
		$(this).draggable({
			zIndex: 999,
			revert: true,      
			revertDuration: 0, 
			start: function(event, ui) {
				$(this).children('.edit').hide();
				$(this).css('background-color', 'red' );
			},
			stop: function(event, ui) {
				$(this).children('.edit').show();
				$(this).css('background-color', '' );
			}			

		});
		
	});


	/* initialize the calendar
	-----------------------------------------------------------------*/
	
	$('#calendar').fullCalendar({
		header: {
			left: 'prev,next today',
			center: 'title',
			right: 'month,agendaWeek,agendaDay'
		},
		editable: false,
		selectable: false,
		droppable: true,
		drop: function(date, allDay) { 

			var month = date.getMonth() + 1;
			var day = date.getDate();
			var year = date.getFullYear();
			newdate = year + "-" + month + "-" + day;
		
			var originalEventObject = $(this).data('eventObject');
			var copiedEventObject = $.merge([], originalEventObject);

			for (var i = 0; i < copiedEventObject.length; i++) {
				copiedEventObject[i].start = newdate + ' ' + originalEventObject[i].start;
				console.log(copiedEventObject[i].start);
			}
			
			$('#calendar').fullCalendar('addEventSource', copiedEventObject, true);	
		}
	});
	
});