I am trying to show FulleCalendar inside a modal dialogue. The full calendar can be viewed inside a div element. But I want to show it inside a modal dialogue. 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}