Fullcalendar is the most popular Javascript Calendar. It's powerful and lightweight and suitable for just about anything. For more info see the official siteand the Github repository.
Drag n Drop Example
Here's an example of draggable events from basic HTML components. For more info, please visit the official documentation.
Draggable Events
Event 1
Event 2
Event 3
Event 4
Event 5
"use strict";
// Class definition
var KTGeneralFullCalendarDragDemos = function () {
// Private functions
var exampleDrag = function () {
// Initialize the external events -- for more info please visit the official site: https://fullcalendar.io/demos
var containerEl = document.getElementById('kt_docs_fullcalendar_events_list');
new FullCalendar.Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
return {
title: eventEl.innerText.trim()
}
}
});
// initialize the calendar -- for more info please visit the official site: https://fullcalendar.io/demos
var calendarEl = document.getElementById('kt_docs_fullcalendar_drag');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function(arg) {
// is the "remove after drop" checkbox checked?
if (document.getElementById('drop-remove').checked) {
// if so, remove the element from the "Draggable Events" list
arg.draggedEl.parentNode.removeChild(arg.draggedEl);
}
}
});
calendar.render();
}
return {
// Public Functions
init: function () {
exampleDrag();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTGeneralFullCalendarDragDemos.init();
});<!--begin::Draggable heading-->
<h4 class="mb-3">Draggable Events</h4>
<!--end::Draggable heading-->
<!--begin::Events listing-->
<div id="external-events-list" class="d-flex flex-wrap">
<div class="fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event badge me-3 my-1">
<div class="fc-event-main">Event 1</div>
</div>
<div class="fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event badge me-3 my-1">
<div class="fc-event-main">Event 2</div>
</div>
<div class="fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event badge me-3 my-1">
<div class="fc-event-main">Event 3</div>
</div>
<div class="fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event badge me-3 my-1">
<div class="fc-event-main">Event 4</div>
</div>
<div class="fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event badge me-3 my-1">
<div class="fc-event-main">Event 5</div>
</div>
</div>
<!--end::Events listing-->
<!--begin::Checkbox-->
<div class="mt-2 my-5">
<div class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="" id="drop-remove" />
<label class="form-check-label" for="drop-remove">
Remove event after drop
</label>
</div>
</div>
<!--end::Checkbox-->
<!--begin::Fullcalendar-->
<div id="kt_docs_fullcalendar_drag"></div>
<!--end::Fullcalendar-->
2024©
Keenthemes
