Fullcalendar displays incorrect

Question

Hi I'm using FullCalendar

With bootstrap 5 and 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();
}

I added calendar div to modal form After my modal opened I faced with this:

image

After I was resizing my browser calendar looked well.

Answer 1

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

This helped resolve the issue. But the calendar appears only after opening the modal. What causes changes in height and looks so-so.