week view headers misaligned with day columns

Do you want to request a feature or report a bug?

Bug report

What’s the current behavior?

on:

 "react-big-calendar": "^0.20.2"
  "react": "^16.5.2",
 "react-ace": "^5.8.0",

Week view (and day view on narrow screens) has completely misaligned headers with the day columns

What’s the expected behavior?

The headers are aligned like in this sandbox

I looked at the markup differences between the sandbox and my code and here is an image showing it: with the main differences highlighted.

Aside from the rbc-overflowing class being added the to the top level header component there are a number of markup differences in the structure as well.

The code for init is:

<Paper style={{marginTop: 10, height: '85vh'}}>
    <BigCalendar
        drilldownView="agenda"
        // onEventDrop={this.moveEvent}
        events={events || api[showing].data()}
        onSelectEvent={ (event) => api[showing].navigator(push)(event)}
        defaultView='month'
        scrollToTime={moment().toDate()}
        eventPropGetter={(event,start,end,isSelected)=>{
            return {
                style: {
                    backgroundColor:'transparent',
                    color: Colors.primary,
                    borderRadius:0,
                    border: 'none',
                    whiteSpace: 'pre-wrap',
                    overflowY: 'auto'
                }
            }
        }} 
        components={{
            event: this.Event,
            agenda: {
                event: this.EventAgenda
            },
            toolbar: CustomToolbar,
        }}
    />
</Paper>

[TomasHubelbauer]

I managed to run into this by creating a RBC demo in CRA. The reproduction is as follows:

• Create a new CRA app
• Remove all CRA’s styles
• Replace App.tsx with the following code:

import React from 'react';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';

type AppProps = {};

type AppState = {};

type CalendarEvent = {
  start: Date;
  end: Date;
  title: string;
}

export default class App extends React.Component<AppProps, AppState> {
  private static readonly localizer = BigCalendar.momentLocalizer(moment);
  
  render() {
    const start = new Date()
    start.setHours(10);
    const end = new Date();
    end.setHours(22);
    return (
      <BigCalendar<CalendarEvent>
        localizer={App.localizer}
        events={[ { start, end, title: 'An event' } ]}
        defaultView="week"
      />
    );
  }
}

Upon loading the page, the day column headers will be completely off screen. Switching the view to month and back fixes that. This might be a different issue that manifests the same way.

Please reopen this @buddythumbs as in my case this issue doesn’t seem to be fixable by removing the surrounding container (I do need to keep at least one div as React won’t allow me to render to body directly) and it reproduces consistently.

[Virthuss]

I’m still having the issue. As for @TomasHubelbauer I can’t remove the surrounding block and because of this I can’t update my header. Any fix?

EDIT: For anone having this issue and using Material-UI with React. You can configure your calendar container to be astyled component and override the react-big-calendar there:

const Root = styled(Box)({
  '@global': {
    '.rbc-header, .rbc-time-header-gutter': {
      minWidth: '121px !important',  // THIS LINE PREVENTS HEADER CELLS TO BE SMALLER THAN THEIR EVENTS
      border: 'none !important',
      boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.15) !important'
    },
    '.rbc-day-bg': { minWidth: '120px !important' }
  }
})