React-big-calendar: Calendar not displaying properly

[alexanderwhatley]

The calendar is not displaying properly for me. I have the following code:

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

const events = [
    {
        'title': 'All Day Event',
        'allDay': true,
        'start': new Date(2015, 3, 0),
        'end': new Date(2015, 3, 0)
    },
    {
        'title': 'Long Event',
        'start': new Date(2015, 3, 7),
        'end': new Date(2015, 3, 10)
    }
]

BigCalendar.momentLocalizer(moment);

export default class Calendar extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            events: {}
        };
    }

    /*componentDidMount(){
        firebase.auth().onAuthStateChanged((user) => {
            if(user){
                var promotionsRef = firebase.database().ref('users/' + user.uid + '/promotions');
                console.log(promotionsRef);
            }
        })
    }*/

    render(){
        return (
            <div>
                <BigCalendar
                    timeslots = {8}
                    events = {events}
                    defaultDate={new Date(2015, 3, 1)}
                />
         </div>
        )
    }
}

My webpage looks like this:

Any ideas on what could be happening? I almost exactly copy and pasted code from the example...

[jquense]

you didnt include the css

[alexanderwhatley]

Sorry, could you be a bit more specific? I imported the css from the package on the 4th line of the code above. Furthermore, I don't see in your example (https://github.com/intljusticemission/react-big-calendar/blob/master/examples/demos/timeslots.js) the css being imported, nor it being used anywhere either. Thanks for your help.

[jquense]

your screenshot has no styling. the css isn't being included on your page it may be an issue with your build step or how you are importing it. but its not being loaded.

[alexanderwhatley]

Very strange. Is the issue perhaps the webpack configuration I'm using? Here is my webpack.config.js:

module.exports = {
    entry: "./js/app.js",
    output: {
        filename: "static/bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['react']
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader',
            },
            {
                test: /\.css$/,
                loader: 'css-loader',
                query: {
                    modules: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                }
            }
        ]
    }
};

The webpack examples folder does not appear to use the npm css-loader or style-loader packages. Is this what is maybe causing the problem?

[Beardo04]

I have the same issue and I'm using webpack as well... @alexanderwhatley did you found a way to fix it? I have something close to the same set up as you on webpack and I'm including the .css in my project but it still doesn't load it

[Beardo04]

fyi.... if you are using webpack and you get this error simply put the link for the css inside you index.html and drop a copy of the css inside the bin/debug folder.

[NeverMore93]

just
import style from 'react-big-calendar/lib/css/react-big-calendar.css';
and style={style} in props

[Paelsis]

I have tried all the example above.
When I use style={style} according to above still nothing comes out but
the top line with today back next .... month, weeks, day, agenda

[jquense]

you need an explicit height per the documentation

[NeverMore93]

try this
import BigCalendar from 'react-big-calendar';
import 'react-big-calendar/lib/css/react-big-calendar.css';
BigCalendar.setLocalizer(
BigCalendar.momentLocalizer(moment)
);

[BixbyRamone]

If anyone sees this comment going on a year of the initial post, I've come across the same issue. I was wondering if it was ever resolved.

[chenkie]

I had the same issue of the days not showing up and it turns out I needed to add a CSS rule https://stackoverflow.com/a/50016438/1971171