Full calendar gets rendered in scrambled state inside react-bootstrap

I have following component on my page:

events = [{ title: "today's event", date: new Date() }];
<FullCalendar
                    height="auto"
                    contentHeight="auto"
                    defaultView="dayGridMonth"
                    plugins={[dayGridPlugin]}
                    events={this.events}
                />

When it is inside react-bootstrap accordion, it gets rendered in some scrambled state:

If I click previous / next button, then it gets correctly rendered. Also if I zoom in / zoom out, then also it gets rendered correctly.

I am able to imitate this in this codesandbox:

fullcalendar

Accordion 1 is initially rendered in collapsed state. If you expand it, you will get exact same render as my first screenshot. Also note that if you zoom in or out in codesandbox webpage or click next or previous webpage, it renders correctly!

Why is this so?

PS:

I am using

"bootstrap": "^4.6.0",
"@fullcalendar/daygrid": "^5.11.3",
"@fullcalendar/react": "^5.11.2",
"react": "^17.0.1",
"react-bootstrap": "^1.4.3",

Answer

You can trigger a resize when opening the two accordions to prevent this behavior. you can do it by adding an onClick event :

onClick={() => window.dispatchEvent(new Event("resize"))}

change :

<Accordion.Toggle
            as={Card.Header}
            eventKey="0"
          >

and :

<Accordion.Toggle
            as={Card.Header}
            eventKey="1"
          >

to :

<Accordion.Toggle
            as={Card.Header}
            eventKey="0"
            onClick={() => window.dispatchEvent(new Event("resize"))}
          >

and :

<Accordion.Toggle
            as={Card.Header}
            eventKey="1"
            onClick={() => window.dispatchEvent(new Event("resize"))}
          >

this is a demo in codesandbox

Advertisement

Answer