React-big-calendar: Month View not appearing

[ZacharyLangley]

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

What's the current behavior?

When I go to the month's view on the big calendar component it does not seem to be working or appearing.

Inside my Calendar Component

import React, { Component } from 'react';
import './Calendar.css';
import 'react-big-calendar/lib/css/react-big-calendar.css'
import BigCalendar from 'react-big-calendar'
import events from './events';
import moment from 'moment';

BigCalendar.momentLocalizer(moment);
let allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k])

let Basic = () => (
    <BigCalendar
        events={events}
        views={allViews}
        step={60}
        showMultiDayTimes
        defaultDate={new Date(2018, 3, 1)}
    />
  );

class Calendar extends Component {
    render() {
        return (
            <Basic />
        );
    }

}

export default Calendar;

Calendar Component being called

import React, { Component } from 'react';
import { Route, BrowserRouter } from 'react-router-dom';

// Custom Components
import Calendar from './Calendar-View/Calendar';
import './Body.css';

// TODO: Set up routes for calendar view vs list view

class Body extends Component {
    render() {
        return (
            <BrowserRouter>
                <Route path="/" component={Calendar} />
            </BrowserRouter>
        );
    }

}

export default Body;

Here is a link to a screenshot:
https://imgur.com/a/DM2yY

[jquense]

Set an explicit height on the calendar

[mehmetyilmaz001]

@jquense thanks for the solution

[SudhaparimalaC]

Add height explicitly.

events={eventList}
startAccessor="start"
endAccessor="end"
defaultDate={moment().toDate()}
defaultView="month"
localizer={localizer}
style={{ height: 500,width: '95%' }}
eventPropGetter={event => {
const eventData = eventList.find(ot => ot.id === event.id);
const backgroundColor = eventData && eventData.color;
return { style: { backgroundColor } };
}}
/>