full calendar is not showing properly untill i click on any action button like(Month,week,day)

When i resize my window it showing properly, but on refresh of my page issue is come again and I click again on button to see proper calendar.

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

    initialView: 'dayGridMonth',
    height: 650,
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    navLinks: true,
    nowIndicator: true,
    selectable: true,
    dayMaxEvents: true,
    events: [
        {title: 'Frank',
        start: '2021-09-17',
        end: '2021-09-21',
      },
    ]
  });
  calendar.render()
});

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css">
<div id='leave_calendar' class="leave-calendar"></div>

Answer

I moved the calendar to another empty page and simply include it in the PHP file its working properly, so there is only a render issue. Fullcalendar required dedicated page to render properly.