<!doctype html>
<html lang="en">

<head>
    <meta charset="utf8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet'>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css' rel='stylesheet'>
</head>

<body>

    <div class="container py-5">
        <div id='calendar'></div>
    </div>

</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.9/index.global.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@6.1.9/index.global.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.9/index.global.min.js'></script>


<script>
    var newEvent = {
        title: 'New Event',
        start: '2023-10-15T14:00:00',
        end: '2023-10-15T16:00:00',
    };
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        themeSystem: 'bootstrap5',
        initialView: 'dayGridMonth',
        initialDate: new Date(),

        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth'
        },
        weekNumbers: true,
        weekText: 'W ',
        selectable: true,
        dayMaxEvents: true,
        dayMaxEventRows: 1,
        events: [{
                id: 'event1',
                title: 'Event 1',
                start: '2023-10-15T10:00:00',
                end: '2023-10-15T12:00:00',
                color: 'white', 
                backgroundColor: 'black',
                borderColor: 'green',
                description: 'This is a crucial meeting to discuss project progress.',
                allDay: true,
                // editable: true,
                extendedProps: {
                    customProperty: 'Custom Value',
                    anotherProperty: 'Another Value'
                },
                // url: 'https://example.com/event-details'
            },{
                id: 'event2',
                title: 'Event 2',
                start: '2023-10-15T10:00:00',
                end: '2023-10-15T12:00:00',
                color: 'white', 
                backgroundColor: 'black',
                borderColor: 'green',
                description: 'This is a crucial meeting to discuss project progress.',
                allDay: true,
                // editable: true,
                extendedProps: {
                    customProperty: 'Custom Value',
                    anotherProperty: 'Another Value'
                },
                // url: 'https://example.com/event-details'
            },
        ],

    });
    calendar.render();

    // ################################ handlers
    // calendar.on('dateClick', function(info) {
    //     console.log('dateClick on ' + info);
    // });
    // calendar.on('eventClick', function(info) {
    //     console.log('eventClick on ' + info);
    // });
    // calendar.on('eventRender', function(info) {
    //     console.log('eventRender on ' + info);
    // });
    // calendar.on('eventDrop', function(info) {
    //     console.log('eventDrop on ' + info);
    // });
    // calendar.on('eventResize', function(info) {
    //     console.log('eventResize on ' + info);
    // });
    // ################################ handlers

    // ################################ methods
    // calendar.addEvent(newEvent);
    // calendar.removeEvent(eventToRemove);
    // var event = calendar.getEventById('yourEventId');
    // calendar.refetchEvents();
    // calendar.next(); // Move to the next period
    // calendar.prev(); // Move to the previous period
    // calendar.prevYear()
    // calendar.nextYear()
    // calendar.incrementDate( duration )
    // calendar.changeView('timeGridWeek', '2023-10-15');
    // calendar.gotoDate('2023-10-15');
    // calendar.today();
    // var currentDate = calendar.getDate();
    // calendar.getDate() -> Date
    // calendar.render();
    // calendar.destroy()
    // ################################ methods

    // ################################ get/set option
    // calendar.getOption('locale');
    // calendar.setOption('locale', 'fr');
    // ################################ get/set option
</script>

</html>