在我单击任何操作按钮（月、周、日）之前，完整日历无法正确显示

Question

当我调整 window 大小时，它显示正确，但刷新我的页面时问题又来了，我再次单击按钮以查看正确的日历。

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 1

我将日历移动到另一个空白页面并将其简单地包含在 PHP 文件中，它工作正常，因此只有一个渲染问题。全日历需要专用页面才能正确呈现。

在我单击任何操作按钮（月、周、日）之前，完整日历无法正确显示

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

javascript

html

fullcalendar