javascript - 全日历显示不正确

Question

您好，我正在使用 FullCalendar

使用 bootstrap 5 和 Stimulus JS

connect() {
        this.calendar = new Calendar(this.calendarTarget, {
            plugins: [ dayGridPlugin, timeGridPlugin, listPlugin, bootstrap5Plugin],
            themeSystem: 'bootstrap5',
            height: 650,
            width: 650,
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
            },
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            initialDate: '2018-01-12',
            events: [
                {
                    start: '2018-01-10T10:00:00',
                    end: '2018-01-12T16:00:00',
                    display: 'background'
                },
            ]
        });
        this.calendar.render();
}

我将日历 div 添加到模态形式在我的模态打开后，我遇到了这个:

image

在我调整浏览器日历的大小后看起来不错。

Answer 1

myModal.addEventListener('shown.bs.modal', function() {
    controller.calendar.render();
});

这有助于解决问题。但是日历只有在打开模式后才会出现。是什么导致了高度的变化，看起来一般般。