I'm trying to switch to Spanish but it shows me the entire days instead of the first 3 letters.

[lucaspieran]

As the title says, I only want to show the first 3 letters of the day as it is by default but it shows me the entire word, I am using dateFnsLocalizer. I already looked everywhere and read the issues and didn't find anything. Does anyone know how to solve it?

import { Calendar, dateFnsLocalizer } from 'react-big-calendar'

import React from 'react'
import 'react-big-calendar/lib/css/react-big-calendar.css'
import classNames from '@/utils/functionUtils'
import './calendar.css'

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 { es } from 'date-fns/locale'

const locales = {
  es,
}

const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek: () => startOfWeek(new Date(), { weekStartsOn: 0 }),
  getDay,
  locales,
})

const eventos = [
  {
    start: new Date(2023, 11, 5),
    end: new Date(2023, 11, 5),
    tooltip: '1200',
    type: 'unisex',
  },
  {
    start: new Date(2023, 11, 8),
    end: new Date(2023, 11, 8),
    tooltip: '123',
    type: 'total',
  },
]

const CalendarChart = () => (
  <div className="flex h-[480px] items-center justify-center">
    <Calendar
      toolbar={false}
      localizer={localizer}
      events={eventos}
      startAccessor="start"
      culture="es"
      endAccessor="end"
      style={{ margin: '50px', width: '500px' }}
      components={{
        // eslint-disable-next-line react/no-unstable-nested-components
        eventWrapper: ({ event, children }: any) => (
          <div
            className={classNames(
              'custom relative top-[-21px] ml-auto h-5 w-5 cursor-pointer rounded-full !bg-red shadow-2xl',
              event.type === 'total' ? '!h-10 !w-10' : '',
            )}
          >
            {children}
          </div>
        ),
      }}
    />
  </div>
)
export default CalendarChart

[cutterbl]

Not entirely sure how dayJs handles date formatting, but you can provide override formats to Big Calendar using the various formats props