// 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();