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
// 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();
<!--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-->
2021©
Keenthemes
