React-big-calendar incorrect time display

Question

I'm trying to display events using React-big-calendar. I have a problem with a time format. The data I'm using when passing events to the calendar is as follows:

{
    end: Tue Nov 03 2020 21:42:16 GMT+0100 (Central European Standard Time)
    start: Tue Nov 03 2020 20:42:06 GMT+0100 (Central European Standard Time)
}

The result is quite unexpected. The library is treating my time format as if were 12h format:

I also noticed that current time inside calendar has wrong value. I use date-fns as localizer with polish locale. I'm also using culture prop for the calendar component. Here is my component - https://github.com/sSwiergosz/fitness-platform/blob/develop/frontend/components/Calendar.js

I'm out of ideas... Can somebody help me?

user_13570122 · Answer

I don't have a full solution but identified the area of concern. Altered the height property in the calender's style object and the misalignment changes. So it seems to be an issue with how events are being rendered on the timeline at different scales.

user_4885772 · Answer

You can do it like this:

let formats = {
  timeGutterFormat: 'HH:mm',
}

export default function MyCalendar() {
  return (


The API documentation is incomplete, but still helpful: http://jquense.github.io/react-big-calendar/examples/index.html#api

React-big-calendar incorrect time display

2 Answers