React-big-calendar: Monthly View not working in IE11 browser (using latest 0.22.1v)

Created on 26 Sep 2019 · 4Comments · Source: jquense/react-big-calendar

Do you want to request a _feature_ or report a _bug_?

bug

What's the current behavior?

Monthly view not working in IE11 showing blank calendar

My Code:
localizer={localizer}
onView={onView}
onNavigate={onNavigate}
events={calEvents}
startAccessor={'start'}
endAccessor={'end'}
defaultView={DEFAULT_VIEW}
/>

What's the expected behavior?

it should show monthly events with days. I'm using latest 0.22.1

Source

narechowdary

Most helpful comment

I figured out the issue. Issue with styles, flex is not setting correctly in IE. i have applied below styles and it's working fine.

.rbc-calendar .rbc-month-view .rbc-month-row,
.rbc-calendar .rbc-month-view .rbc-month-row .rbc-row-content,
.rbc-calendar .rbc-month-view .rbc-month-row .rbc-row-content .rbc-date-cell
{
flex: 1;
}

narechowdary on 1 Oct 2019

👍2

All 4 comments

Set a min-height solved to me:
.rbc-calendar { min-height: 500px; }

rafaelcorradini on 27 Sep 2019

👍1

Still i don't see any changes after setting min-height like above..:(

narechowdary on 30 Sep 2019

I figured out the issue. Issue with styles, flex is not setting correctly in IE. i have applied below styles and it's working fine.

.rbc-calendar .rbc-month-view .rbc-month-row,
.rbc-calendar .rbc-month-view .rbc-month-row .rbc-row-content,
.rbc-calendar .rbc-month-view .rbc-month-row .rbc-row-content .rbc-date-cell
{
flex: 1;
}

narechowdary on 1 Oct 2019

👍2

I figured out the issue. Issue with styles, flex is not setting correctly in IE. i have applied below styles and it's working fine.

.rbc-calendar .rbc-month-view .rbc-month-row,
.rbc-calendar .rbc-month-view .rbc-month-row .rbc-row-content,
.rbc-calendar .rbc-month-view .rbc-month-row .rbc-row-content .rbc-date-cell
{
flex: 1;
}

This code safe my day Thank !