So I have the time correctly displaying in 24hr format in the actual events. but when I try to create a new event by dragging on the calendar grid, the dragged slot view is displaying the time period of that slot in 12hr format. when I create an event on that time slot, the event itself again shows in 24hr format. how to manipulate the actual dragged area?

I tried asking from ChatGPT (of course), but all the help it provided was mostly affecting the events themselves, which is not what I'm looking for.

Reproducing steps: put react-big-calendar to use, make it use 24hr clock with localizer prop. The end result is, that events show 24hr clock just fine, but when dragging on the timeline to create a new event, that element is in 12hr time format. The following code snippet is from the official documentation. I only changed the en-US locale to the Finnish variant.

import { Calendar, dateFnsLocalizer } from 'react-big-calendar'
import format from 'date-fns/format'
import parse from 'date-fns/parse'
import startOfWeek from 'date-fns/startOfWeek'
import getDay from 'date-fns/getDay'
import { fi } from 'date-fns/locale';

const locales = {
  'fi-FI': fi,
}

const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales,
})

const MyCalendar = (props) => (
  <div>
    <Calendar
      localizer={localizer}
      events={myEventsList}
      startAccessor="start"
      endAccessor="end"
      style={{ height: 500 }}
    />
  </div>
)