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
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?