var green = KTUtil.getCssVariableValue("--bs-active-success");
var red = KTUtil.getCssVariableValue("--bs-active-danger");
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,
businessHours: true,
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",
color: green
},
{
title: "Conference",
start: "2020-09-18",
end: "2020-09-20"
},
{
title: "Party",
start: "2020-09-29T20:00:00"
},
{
groupId: "availableForMeeting",
start: "2020-09-11",
end: "2020-09-11",
display: "background",
},
{
groupId: "availableForMeeting",
start: "2020-09-13",
end: "2020-09-13",
display: "background",
},
{
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();