Container for displaying data in calendar form.
When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.
A basic calendar component with Year/Month switch.
import React from 'react';
import { Calendar } from 'antd';
import type { Dayjs } from 'dayjs';
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
const App: React.FC = () => {
const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
console.log(value.format('YYYY-MM-DD'), mode);
};
return <Calendar onPanelChange={onPanelChange} />;
};
export default App;
This component can be rendered by using dateCellRender and monthCellRender with the data you need.
import React from 'react';
import type { BadgeProps } from 'antd';
import { Badge, Calendar } from 'antd';
import type { Dayjs } from 'dayjs';
const getListData = (value: Dayjs) => {
let listData;
switch (value.date()) {
case 8:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
];
break;
case 10:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
{ type: 'error', content: 'This is error event.' },
];
break;
case 15:
listData = [
{ type: 'warning', content: 'This is warning event' },
{ type: 'success', content: 'This is very long usual event。。....' },
{ type: 'error', content: 'This is error event 1.' },
{ type: 'error', content: 'This is error event 2.' },
{ type: 'error', content: 'This is error event 3.' },
{ type: 'error', content: 'This is error event 4.' },
];
break;
default:
}
return listData || [];
};
const getMonthData = (value: Dayjs) => {
if (value.month() === 8) {
return 1394;
}
};
const App: React.FC = () => {
const monthCellRender = (value: Dayjs) => {
const num = getMonthData(value);
return num ? (
<div className="notes-month">
<section>{num}</section>
<span>Backlog number</span>
</div>
) : null;
};
const dateCellRender = (value: Dayjs) => {
const listData = getListData(value);
return (
<ul className="events">
{listData.map((item) => (
<li key={item.content}>
<Badge status={item.type as BadgeProps['status']} text={item.content} />
</li>
))}
</ul>
);
};
return <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />;
};
export default App;
.events {
margin: 0;
padding: 0;
list-style: none;
}
.events .ant-badge-status {
width: 100%;
overflow: hidden;
font-size: 12px;
white-space: nowrap;
text-overflow: ellipsis;
}
.notes-month {
font-size: 28px;
text-align: center;
}
.notes-month section {
font-size: 28px;
}Nested inside a container element for rendering in limited space.
import { Calendar, theme } from 'antd';
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
import type { Dayjs } from 'dayjs';
import React from 'react';
const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
console.log(value.format('YYYY-MM-DD'), mode);
};
const App: React.FC = () => {
const { token } = theme.useToken();
const wrapperStyle: React.CSSProperties = {
width: 300,
border: `1px solid ${token.colorBorderSecondary}`,
borderRadius: token.borderRadiusLG,
};
return (
<div style={wrapperStyle}>
<Calendar fullscreen={false} onPanelChange={onPanelChange} />
</div>
);
};
export default App;
A basic calendar component with Year/Month switch.
import React, { useState } from 'react';
import { Alert, Calendar } from 'antd';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
const App: React.FC = () => {
const [value, setValue] = useState(() => dayjs('2017-01-25'));
const [selectedValue, setSelectedValue] = useState(() => dayjs('2017-01-25'));
const onSelect = (newValue: Dayjs) => {
setValue(newValue);
setSelectedValue(newValue);
};
const onPanelChange = (newValue: Dayjs) => {
setValue(newValue);
};
return (
<>
<Alert message={`You selected date: ${selectedValue?.format('YYYY-MM-DD')}`} />
<Calendar value={value} onSelect={onSelect} onPanelChange={onPanelChange} />
</>
);
};
export default App;
Customize Calendar header content.
import React from 'react';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import type { Dayjs } from 'dayjs';
import dayLocaleData from 'dayjs/plugin/localeData';
import { Calendar, Col, Radio, Row, Select, Typography, theme } from 'antd';
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
dayjs.extend(dayLocaleData);
const App: React.FC = () => {
const { token } = theme.useToken();
const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
console.log(value.format('YYYY-MM-DD'), mode);
};
const wrapperStyle = {
width: 300,
border: `1px solid ${token.colorBorderSecondary}`,
borderRadius: token.borderRadiusLG,
};
return (
<div style={wrapperStyle}>
<Calendar
fullscreen={false}
headerRender={({ value, type, onChange, onTypeChange }) => {
const start = 0;
const end = 12;
const monthOptions = [];
let current = value.clone();
const localeData = value.localeData();
const months = [];
for (let i = 0; i < 12; i++) {
current = current.month(i);
months.push(localeData.monthsShort(current));
}
for (let i = start; i < end; i++) {
monthOptions.push(
<Select.Option key={i} value={i} className="month-item">
{months[i]}
</Select.Option>,
);
}
const year = value.year();
const month = value.month();
const options = [];
for (let i = year - 10; i < year + 10; i += 1) {
options.push(
<Select.Option key={i} value={i} className="year-item">
{i}
</Select.Option>,
);
}
return (
<div style={{ padding: 8 }}>
<Typography.Title level={4}>Custom header</Typography.Title>
<Row gutter={8}>
<Col>
<Radio.Group
size="small"
onChange={(e) => onTypeChange(e.target.value)}
value={type}
>
<Radio.Button value="month">Month</Radio.Button>
<Radio.Button value="year">Year</Radio.Button>
</Radio.Group>
</Col>
<Col>
<Select
size="small"
dropdownMatchSelectWidth={false}
className="my-year-select"
value={year}
onChange={(newYear) => {
const now = value.clone().year(newYear);
onChange(now);
}}
>
{options}
</Select>
</Col>
<Col>
<Select
size="small"
dropdownMatchSelectWidth={false}
value={month}
onChange={(newMonth) => {
const now = value.clone().month(newMonth);
onChange(now);
}}
>
{monthOptions}
</Select>
</Col>
</Row>
</div>
);
}}
onPanelChange={onPanelChange}
/>
</div>
);
};
export default App;
Note: Part of the Calendar's locale is read from value. So, please set the locale of dayjs correctly.
// The default locale is en-US, if you want to use other locale, just set locale in entry file globally.// import dayjs from 'dayjs';// import 'dayjs/locale/zh-cn';// dayjs.locale('zh-cn');<CalendardateCellRender={dateCellRender}monthCellRender={monthCellRender}onPanelChange={onPanelChange}onSelect={onSelect}/>
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: Dayjs): ReactNode | - | |
| dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: Dayjs): ReactNode | - | |
| defaultValue | The date selected by default | dayjs | - | |
| disabledDate | Function that specifies the dates that cannot be selected, currentDate is same dayjs object as value prop which you shouldn't mutate it](https://github.com/ant-design/ant-design/issues/30987) | (currentDate: Dayjs) => boolean | - | |
| fullscreen | Whether to display in full-screen | boolean | true | |
| headerRender | Render custom header in panel | function(object:{value: Dayjs, type: string, onChange: f(), onTypeChange: f()}) | - | |
| locale | The calendar's locale | object | (default) | |
| mode | The display mode of the calendar | month | year | month | |
| monthCellRender | Customize the display of the month cell, the returned content will be appended to the cell | function(date: Dayjs): ReactNode | - | |
| monthFullCellRender | Customize the display of the month cell, the returned content will override the cell | function(date: Dayjs): ReactNode | - | |
| validRange | To set valid range | [dayjs, dayjs] | - | |
| value | The current selected date | dayjs | - | |
| onChange | Callback for when date changes | function(date: Dayjs) | - | |
| onPanelChange | Callback for when panel changes | function(date: Dayjs, mode: string) | - | |
| onSelect | Callback for when a date is selected | function(date: Dayjs） | - |
See How to set locale for date-related components
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 01 | 02 | 03 | 04 |
05 | 06 | 07 | 08 | 09 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 01 |
02 | 03 | 04 | 05 | 06 | 07 | 08 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 01 | 02 | 03 | 04 |
05 | 06 | 07 | 08
| 09 | 10
| 11 |
12 | 13 | 14 | 15
| 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 01 |
02 | 03 | 04 | 05 | 06 | 07 | 08
|
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 01 | 02 | 03 | 04 |
05 | 06 | 07 | 08 | 09 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 01 |
02 | 03 | 04 | 05 | 06 | 07 | 08 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
01 | 02 | 03 | 04 | 05 | 06 | 07 |
08 | 09 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 01 | 02 | 03 | 04 |
05 | 06 | 07 | 08 | 09 | 10 | 11 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 01 | 02 | 03 | 04 |
05 | 06 | 07 | 08 | 09 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 01 |
02 | 03 | 04 | 05 | 06 | 07 | 08 |