How can I show fullcalendar in a modal dialog

I am trying to show FullCalendar inside a modal dialog. The full calendar can be viewed inside a div element. But I want to show it inside a modal dialog.

Here is the code:

<button type="button" class="btn btn-primary"  onclick="getCalendarEvents()">Depot Calendar</button>
<div class="row">
    <div class="att-area" id="empcalendar">
    </div>
</div>
<script>
   var empevents = [];
   function getCalendarEvents(empevents) {   
      
        $('#empcalendar').fullCalendar('destroy');
        $('#empcalendar').fullCalendar({
            defaultView: 'month',  
            handleWindowResize: true, 
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay,agenda'
            },
            eventLimit: true,
            events: empevents          
            
        });
    }
</script>

empevents array shows the data is as given below

{empid: 159, title: 'XXXXX - UnPaid', start: Tue Jan 02 2024 00:00:00 GMT+0000 (Greenwich Mean Time), end: Tue Jan 02 2024 00:00:00 GMT+0000 (Greenwich Mean Time), allDay: true}
{empid: 9, title: 'YYY - UnPaid', start: Tue Jan 02 2024 00:00:00 GMT+0000 (Greenwich Mean Time), end: Tue Jan 02 2024 00:00:00 GMT+0000 (Greenwich Mean Time), allDay: true}

For how to show fullcalendar in a modal dialog, a working demo you could follow:

<button type="button" class="btn btn-primary" onclick="showCalendarModal()">Depot Calendar</button>

<!-- Modal Structure -->
<div class="modal fade" id="calendarModal" tabindex="-1" role="dialog" aria-labelledby="calendarModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="calendarModalLabel">Depot Calendar</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="empcalendar"></div> <!-- Calendar container -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
<script>
    // Array of events to be displayed in the calendar
    var empevents = [
        { empid: 159, title: 'XXXXX - UnPaid', start: '2024-01-02', end: '2024-01-02', allDay: true },
        { empid: 9, title: 'YYY - UnPaid', start: '2024-01-02', end: '2024-01-02', allDay: true }
    ];

    // Function to show the modal and initialize FullCalendar
    function showCalendarModal() {
        $('#calendarModal').modal('show'); // Show the modal
    }

    // When the modal is shown, initialize or refresh the FullCalendar
    $('#calendarModal').on('shown.bs.modal', function () {
        initializeCalendar(empevents);
    });

    // Function to initialize or refresh FullCalendar
    function initializeCalendar(events) {
        $('#empcalendar').fullCalendar('destroy'); // Destroy any existing calendar instance
        $('#empcalendar').fullCalendar({
            defaultView: 'month',
            handleWindowResize: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            eventLimit: true,
            events: events // Pass the events data to the calendar
        });
    }

    // Function to dynamically update the calendar events if you need
    function getCalendarEvents(newEvents) {
        empevents = newEvents; 
        initializeCalendar(empevents); 
    }


</script>