react-big-calendar month button click doesn't show all the data ( different in different browser)

Question

I have added all the css class inside main.css file. But when i want to see the month view it doesn't show me data? Though in firefox browser it show day name( sat,sun , mon etc.). Chrome browser doesn't show anything .

//start of file...
import React, { Component } from 'react';

import { Meteor } from 'meteor/meteor';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';
import events from './events.js';

BigCalendar.momentLocalizer(moment); // or globalizeLocalizer


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

export default class CalendarComponent extends Component{
    constructor(props){
        super(props);

        this.state = {
            count: 0,
        }
    }

    componentDidMount(){
        // initiate something
    }




    render(){
        console.log("printing props..." + this.props._id);
        console.log(this.props);
        console.log("Calendar Componenet being rendered");
        // console.log(CouponCollection.find().fetch() + "\n Fetched Data!!");
        return(
            <div>
                    <BigCalendar
                        events={events}
                        views={allViews}

                    />
            </div>

        )
    }
}
// events={events}
//views={allViews}
//defaultDate={new Date(2015, 3, 1)}

//end of file

chrome: mozilla:

Answer 1

Try giving some height and width to parent container:

render(){
    return(
        <div style={{ height: 400, width: 400 }}>
                <BigCalendar
                    events={events}
                    views={allViews}

                />
        </div>

    )
}

Calendar expands depending on the dimensions of the parent container.

Answer 2

This works for me

<BigCalendar
...
style={{ height: '80vh' }}
...