I’m using the AntdCalendar component from Ant Design and I need to customize the month dropdown to display full month names instead of the abbreviated versions. Currently, the dropdown shows months as “Jan”, “Feb”, etc., but I would like it to display as “January”, “February”, and so on.
import { Badge, Calendar as AntdCalendar, Alert } from 'antd'
<AntdCalendar
locale={{ lang: { locale: 'en' } }}
fullscreen
mode="month"
dateCellRender={dateCellRender}
onSelect={onSelect}
value={selectedDate}
defaultValue={moment()}
/>
I’ve tried adjusting the locale settings, but I haven’t been able to achieve the desired result. Does anyone know how I can configure the AntdCalendar to show the full month names in the dropdown? Any guidance or examples would be greatly appreciated!
You can customize the locale.shortMonths by the locale prop of <Calendar/>.
e.g.(antd 5.20.5)
import React from 'react';
import './index.css';
import { Calendar } from 'antd';
import locale from 'antd/es/calendar/locale/en_US';
import type { CalendarProps } from 'antd';
import type { Dayjs } from 'dayjs';
console.log('Calendar locale: ', locale);
const App: React.FC = () => {
const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {
console.log(value.format('YYYY-MM-DD'), mode);
};
return (
<Calendar
locale={{
...locale,
lang: {
...locale.lang,
shortMonths: [
'January',
'February',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
},
}}
onPanelChange={onPanelChange}
/>
);
};
export default App;
And adjust the min-width of the month select component.
:where(.css-dev-only-do-not-override-14i19y2).ant-picker-calendar
.ant-picker-calendar-header
.ant-picker-calendar-month-select {
min-width: 120px;
}
stackblitz
0