Search code examples
reactjsreact-reduxreact-boilerplatereact-big-calendar

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


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.

week view works fine

Here is the month view image.

Month view doesn't displays in DOM

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;

Solution

  • 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)