document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        events: '/calendar/events', // URL to fetch events from the backend
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        eventClick: function(info) {
            alert('Event: ' + info.event.title + '\n' +
                  'Start: ' + info.event.start + '\n' +
                  'End: ' + info.event.end + '\n' +
                  'Description: ' + info.event.extendedProps.description);
        }
    });

    calendar.render();
});