I can't see month view in basic react-big-calendar

Question

Hi I can't see month view even when it's displayed in react-dev tools. Week view works fine but month view doesn't displays anything. PFA the code below.

Here is the week view image.

Here is the month view image.

import localizer from 'react-big-calendar/lib/localizers/globalize';
import globalize from 'globalize';
import BigCalendar from 'react-big-calendar';
import events from './events';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import './prism.less';

localizer(globalize);

const allViews = Object.keys(BigCalendar.views).map(k => 
BigCalendar.views[k])

export class EventDetailModal extends React.Component { // eslint-
disable-line react/prefer-stateless-function

render() {
return (
<BigCalendar
{...this.props}
events={events}
views={allViews}
defaultDate={new Date(2015, 3, 1)}
/>
);
}
}

export default EventDetailModal;

Answer 1

Need to provide an explicit height to the calendar per the documentation. eg.

.rbc-month-view {
      height: 100vh;
}

or

.rbc-calendar {
    min-height: 580px;
}

Answer 2

Did you set a height value on a parent container? From their docs:

It uses modern flexbox for layout making it super responsive and performant. Leaving most of the layout heavy lifting to the browser. note: The default styles use height: 100% which means your container must set an explicit height (feel free to adjust the styles to suit your specific needs).

(Source)