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?

Don't understand why this question was downvoted... I'm doing everything according to the docs and provide a full example with the code — szymix12, Nov 04 '20 at 08:47

score 1 · Answer 1 · answered Mar 29 '21 at 03:29

You can do it like this:

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

export default function MyCalendar() {
  return (
     <Calendar
       localizer={localizer}
       formats={formats}
       ...

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

score 0 · Answer 2 · answered Nov 23 '20 at 14:23

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.

React-big-calendar incorrect time display

2 Answers2