-- required js/ css
            <link href="asset/plugin/fullcalendar/lib/main.min.css"  rel="stylesheet" type="text/css" />
            <script src="asset/plugin/fullcalendar/lib/main.min.js"></script>

            -- html

            <div class="row">
            <div class="col-lg-3">
            	<!--begin::Card-->
            	<div class="card card-custom card-stretch">
            		<div class="card-body">
            			<h3 class="mb-4">External Draggable Events</h3>
            			<div id='external-events'>
            				<!-- -->
            				<div class='fc-event   p-2 mb-2'>
            					<div class='fc-event-main'>My Event 1</div>
            				</div>
            				<div class='fc-event   p-2 mb-2'>
            					<div class='fc-event-main'>My Event 2</div>
            				</div>
            				<div class='fc-event   p-2 mb-2'>
            					<div class='fc-event-main'>My Event 3</div>
            				</div>				
            				<p>
            					<input type='checkbox' id='drop-remove' />
            					<label for='drop-remove'>remove after drop</label>
            				</p>
            			</div>
            		</div> <!-- end card-body-->
            	</div> <!-- end card-->
            </div><!-- end class-->
            <div class="col-lg-9">
            	<div class="card card-custom card-stretch">
            		<div class="card-header">
            			<div class="card-title">
            				<h3 class="mb-4">Full Calendar <small> full-sized, drag & drop event calendar in JavaScript</small></h3>
            			</div>
            			<div class="card-toolbar">
            				<a href="#" class="btn btn-light-primary font-weight-bold">
            					<i data-feather="plus"></i>Add Event
            				</a>
            			</div>
            		</div>
            		<div class="card-body">
            			<div id='calendar-container'>
            				<div id='calendar'></div>
            			</div>
            		</div>  <!-- end card-->
            	</div>  <!--end::Card-->
            </div>
            </div>

            -- JS code
            <script type="text/javascript">

            	document.addEventListener('DOMContentLoaded', function () {
            		var Calendar = FullCalendar.Calendar;
            		var Draggable = FullCalendar.Draggable;

            		var containerEl = document.getElementById('external-events');
            		var calendarEl = document.getElementById('calendar');
            		var checkbox = document.getElementById('drop-remove');

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

            		new Draggable(containerEl, {
            			itemSelector: '.fc-event',
            			eventData: function (eventEl) {

            				return {
            					title: eventEl.innerText

            				};
            			}
            		});

            		// initialize the calendar
            		// -----------------------------------------------------------------

            		var calendar = new Calendar(calendarEl, {
            			headerToolbar: {
            				left: 'prev,next today',
            				center: 'title',
            				right: 'dayGridMonth,timeGridWeek,timeGridDay'
            			},
            			editable: true,
            			droppable: true, // this allows things to be dropped onto the calendar
            			drop: function (info) {
            				// is the "remove after drop" checkbox checked?
            				if (checkbox.checked) {
            					// if so, remove the element from the "Draggable Events" list
            					info.draggedEl.parentNode.removeChild(info.draggedEl);
            				}
            			}
            		});
            		calendar.render();
            	});

            </script>