week view headers misaligned with day columns

[m-o-leary]

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>

[jjnesbitt]

I have this same bug and haven't found an answer anywhere. Did you end up finding a solution?

[m-o-leary]

No solution found - any luck on your side??

[jjnesbitt]

No solution found - any luck on your side??

Yes, I did manage to fix it. The issue I had was some rouge css that was setting a min-width on the rbc-time-header-gutter, which was shifting the header to the right. I realize this is different from the issue you're referring to, which I did also encounter, but I'm not sure exactly how I fixed it. I believe it was also some rouge css.

[m-o-leary]

If you could dig up whatever you used to fix it that would be great!

[fh-jashmore]

I had an issue with this. I had my calendar in another component. The styles in that component were doing transform: scale and or rotate. I removed those and it seemed to fix the headers for me. Also, if the calendar is being rendered offscreen then it seems to break headers as well.

[m-o-leary]

I've checked the container styles and can't see where it could be changing but I can revisit that for sure if it helped you. The rendering off screen is an interesting one actually - maybe if I control render to happen on componentDidMount earliest that might help

[m-o-leary]

I removed a surrounding div and got this to work so closing - be careful what you surround this in!!

[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.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[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' }
  }
})

[fadhliasyraf]

Hi,

for anyone having this issue, not sure if its considered a fix. but based on the rouge css hint by someone earlier, I've commented flex-basis:auto !important on class .rbc-header on _calendar.scss. hope this helps someone. now my header is aligned with day.