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.
Background Events Example
Display background events. Also, control where events are allowed to go:
- Green areas are allowed for every event
- Red areas are not allowed for every event
- Meeting event is only allowed on green areas
"use strict";
// Class definition
var KTGeneralFullCalendarEventsDemos = function() {
// Private functions
var exampleBackgroundEvents = function() {
// Define colors
var green = KTUtil.getCssVariableValue('--bs-active-success');
var red = KTUtil.getCssVariableValue('--bs-active-danger');
// Initialize Fullcalendar -- for more info please visit the official site: https://fullcalendar.io/demos
var calendarEl = document.getElementById('kt_docs_fullcalendar_background_events');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
initialDate: '2020-09-12',
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: true,
selectable: true,
events: [{
title: 'Business Lunch',
start: '2020-09-03T13:00:00',
constraint: 'businessHours'
},
{
title: 'Meeting',
start: '2020-09-13T11:00:00',
constraint: 'availableForMeeting', // defined below
color: green
},
{
title: 'Conference',
start: '2020-09-18',
end: '2020-09-20'
},
{
title: 'Party',
start: '2020-09-29T20:00:00'
},
// areas where "Meeting" must be dropped
{
groupId: 'availableForMeeting',
start: '2020-09-11',
end: '2020-09-11',
display: 'background',
},
{
groupId: 'availableForMeeting',
start: '2020-09-13',
end: '2020-09-13',
display: 'background',
},
// red areas where no events can be dropped
{
start: '2020-09-24',
end: '2020-09-28',
overlap: false,
display: 'background',
color: red
},
{
start: '2020-09-06',
end: '2020-09-08',
overlap: false,
display: 'background',
color: red
}
]
});
calendar.render();
}
return {
// Public Functions
init: function() {
exampleBackgroundEvents();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTGeneralFullCalendarEventsDemos.init();
});<div id="kt_docs_fullcalendar_background_events"></div>
2024©
Keenthemes
