logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.3.2
  • Components Overview
  • General
    • Button
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
  • Other
    • Affix
    • App
    • ConfigProvider
    • FloatButton
    • Watermark
When To Use
Examples
Basic
Notice Calendar
Card
Selectable Calendar
Customize Header
API
FAQ
How to use Calendar with customize date library?
How to set locale for date-related components?
Date-related components locale is not working?

Calendar

BadgeCard

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuqueAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTechMore Products

yuqueYuQue-Document Collaboration Platform
AntVAntV-Data Visualization
EggEgg-Enterprise Node.js Framework
kitchenKitchen-Sketch Toolkit
xtechAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

Container for displaying data in calendar form.

When To Use

When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.

Examples

Basic

A basic calendar component with Year/Month switch.

expand codeexpand code
TypeScript
JavaScript
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;
Notice Calendar

This component can be rendered by using dateCellRender and monthCellRender with the data you need.

expand codeexpand code
TypeScript
JavaScript
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;
}
Card

Nested inside a container element for rendering in limited space.

expand codeexpand code
TypeScript
JavaScript
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;
Selectable Calendar

A basic calendar component with Year/Month switch.

expand codeexpand code
TypeScript
JavaScript
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 Header

Customize Calendar header content.

expand codeexpand code
TypeScript
JavaScript
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;

API

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');
<Calendar
dateCellRender={dateCellRender}
monthCellRender={monthCellRender}
onPanelChange={onPanelChange}
onSelect={onSelect}
/>
PropertyDescriptionTypeDefaultVersion
dateCellRenderCustomize the display of the date cell, the returned content will be appended to the cellfunction(date: Dayjs): ReactNode-
dateFullCellRenderCustomize the display of the date cell, the returned content will override the cellfunction(date: Dayjs): ReactNode-
defaultValueThe date selected by defaultdayjs-
disabledDateFunction 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-
fullscreenWhether to display in full-screenbooleantrue
headerRenderRender custom header in panelfunction(object:{value: Dayjs, type: string, onChange: f(), onTypeChange: f()})-
localeThe calendar's localeobject(default)
modeThe display mode of the calendarmonth | yearmonth
monthCellRenderCustomize the display of the month cell, the returned content will be appended to the cellfunction(date: Dayjs): ReactNode-
monthFullCellRenderCustomize the display of the month cell, the returned content will override the cellfunction(date: Dayjs): ReactNode-
validRangeTo set valid range[dayjs, dayjs]-
valueThe current selected datedayjs-
onChangeCallback for when date changesfunction(date: Dayjs)-
onPanelChangeCallback for when panel changesfunction(date: Dayjs, mode: string)-
onSelectCallback for when a date is selectedfunction(date: Dayjs)-

FAQ

How to use Calendar with customize date library?

See Use custom date library

How to set locale for date-related components?

See How to set locale for date-related components

Date-related components locale is not working?

See FAQ Date-related-components-locale-is-not-working?

2023
Mar
SuMoTuWeThFrSa
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
2023
Mar
SuMoTuWeThFrSa
26
    27
      28
        01
          02
            03
              04
                05
                  06
                    07
                      08
                      • This is warning event.
                      • This is usual event.
                      09
                        10
                        • This is warning event.
                        • This is usual event.
                        • This is error event.
                        11
                          12
                            13
                              14
                                15
                                • This is warning event
                                • This is very long usual event。。....
                                • This is error event 1.
                                • This is error event 2.
                                • This is error event 3.
                                • This is error event 4.
                                16
                                  17
                                    18
                                      19
                                        20
                                          21
                                            22
                                              23
                                                24
                                                  25
                                                    26
                                                      27
                                                        28
                                                          29
                                                            30
                                                              31
                                                                01
                                                                  02
                                                                    03
                                                                      04
                                                                        05
                                                                          06
                                                                            07
                                                                              08
                                                                              • This is warning event.
                                                                              • This is usual event.
                                                                              2023
                                                                              Mar
                                                                              SuMoTuWeThFrSa
                                                                              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
                                                                              You selected date: 2017-01-25
                                                                              2017
                                                                              Jan
                                                                              SuMoTuWeThFrSa
                                                                              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

                                                                              Custom header

                                                                              2023
                                                                              Mar
                                                                              SuMoTuWeThFrSa
                                                                              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