React-big-calendar: Month view displays collapsed unless an explicit height is set

[jforaker]

Month view displays collapsed unless position: absolute

Before:

I added position: absolute here:

.rbc-calendar {
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
}

After:

[jquense]

what browser are you viewing it in?

setting position: absolute isn't really the right fix I don't think, that would mess with a bunch of stuff...

[jforaker]

Chrome

[jquense]

more context would be helpful...the docs work jsut fine in Chrome for me (and others)

[jforaker]

I just have it on a plain page with no styling (bootstrap css loaded), inside one div that is:

    height: 400px;
    width: 50%;
    margin: 0 auto;
    outline: 1px solid gray;

And it renders like this without absolute pos on the .rbc-calendar element:

[jquense]

Sorry, I tried to recreate your example and everything works fine for me.

The calendar is styled to height: 100% so it's parent need an explicit height. You just want to set the height of the Calendar, then go ahead and adjust the rbc-calendar to be whatever your app needs.

position: 'absolute' is definitely not the right approach tho because that is just causing hte calendar to overflow and expand to the height of the entire window, but it will overflow everything around it.

In general you may want to use flexbox since it makes styling and 100% heights much more intuitive than plain ol css

[nottombrown]

I had this same issue. Using current Chrome. Works with the fix at the top.

[nickfrez]

I just ran into this too. Setting a fixed height on the parent works. Perhaps this is something that should be pointed out in the example/readme/docs?

[okcompute]

I faced the same issue (Chrome). @jquense is right, by setting the _height_ it fixes the issue. I used the style component props to set it up:

  <BigCalendar
    events={events}
    defaultDate={new Date(2015, 3, 1)}
    style={{height: 800}}
  />

[RejinR]

@okcompute Thanks a lot.. This fixed the problem for me as well.. Only the month tab was not displaying

[eseakin]

Wow this took me hours to solve. I kept seeing 'need to set an explicit height' but didn't understand that I needed to add a parent div with a height. The examples don't show this at all. Didn't know I could pass a style prop, tried to pass a height prop, didn't want to tweak the css in the node modules. It's so obvious in hindsight... 20/20 right?

Works perfectly now!