logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • 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
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Calendar

A container that displays data in calendar form.
Importimport { Calendar } from "antd";
Sourcecomponents/calendar
Docs
Edit this pageChangelog

Resources

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

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

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

API

Common props ref:Common props

Note: Part of the Calendar's locale is read from value. So, please set the locale of dayjs correctly.

jsx
// 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 cellRender={cellRender} onPanelChange={onPanelChange} onSelect={onSelect} />
PropertyDescriptionTypeDefaultVersion
cellRenderCustomize cell contentfunction(current: dayjs, info: { prefixCls: string, originNode: React.ReactElement, today: dayjs, range?: 'start' | 'end', type: PanelMode, locale?: Locale, subType?: 'hour' | 'minute' | 'second' | 'meridiem' }) => React.ReactNode-5.4.0
dateFullCellRenderCustomize the display of the date cell, the returned content will override the cellfunction(date: Dayjs): ReactNode-
fullCellRenderCustomize cell contentfunction(current: dayjs, info: { prefixCls: string, originNode: React.ReactElement, today: dayjs, range?: 'start' | 'end', type: PanelMode, locale?: Locale, subType?: 'hour' | 'minute' | 'second' | 'meridiem' }) => React.ReactNode-5.4.0
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
showWeekWhether to display week numberbooleanfalse5.23.0
headerRenderRender custom header in panelfunction(object:{value: Dayjs, type: 'year' | 'month', onChange: f(), onTypeChange: f()})-
localeThe calendar's localeobject(default)
modeThe display mode of the calendarmonth | yearmonth
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 selected, include source infofunction(date: Dayjs, info: { source: 'year' | 'month' | 'date' | 'customize' })-info: 5.6.0

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
fullBgBackground color of full calendarstring#ffffff
fullPanelBgBackground color of full calendar panelstring#ffffff
itemActiveBgBackground color of selected date itemstring#e6f4ff
miniContentHeightHeight of mini calendar contentstring | number256
monthControlWidthWidth of month selectstring | number70
yearControlWidthWidth of year selectstring | number80
Global TokenHow to use?

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?

How to get date from panel click?

onSelect provide info.source to help on this:

tsx
<Calendar
onSelect={(date, { source }) => {
if (source === 'date') {
console.log('Panel Select:', source);
}
}}
/>
Basic

A basic calendar component with Year/Month switch.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Notice Calendar

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Card

Nested inside a container element for rendering in limited space.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Selectable Calendar

A basic calendar component with Year/Month switch.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Lunar Calendar

Display lunar calendar, solar terms and other information.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Show Week

Show week number in fullscreen calendar by setting showWeek prop to true.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.23.0
Customize Header

Customize Calendar header content.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
2025
May
SuMoTuWeThFrSa
27
28
29
30
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
2025
May
SuMoTuWeThFrSa
27
    28
      29
        30
          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
                                                                                2025
                                                                                May
                                                                                SuMoTuWeThFrSa
                                                                                27
                                                                                28
                                                                                29
                                                                                30
                                                                                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
                                                                                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
                                                                                二〇二五年(乙巳蛇年)
                                                                                5月(四月)
                                                                                SuMoTuWeThFrSa
                                                                                27
                                                                                三十
                                                                                28
                                                                                初一
                                                                                29
                                                                                初二
                                                                                30
                                                                                初三
                                                                                1
                                                                                劳动节
                                                                                2
                                                                                初五
                                                                                3
                                                                                初六
                                                                                4
                                                                                初七
                                                                                5
                                                                                立夏
                                                                                6
                                                                                初九
                                                                                7
                                                                                初十
                                                                                8
                                                                                十一
                                                                                9
                                                                                十二
                                                                                10
                                                                                十三
                                                                                11
                                                                                十四
                                                                                12
                                                                                十五
                                                                                13
                                                                                十六
                                                                                14
                                                                                十七
                                                                                15
                                                                                十八
                                                                                16
                                                                                十九
                                                                                17
                                                                                二十
                                                                                18
                                                                                廿一
                                                                                19
                                                                                廿二
                                                                                20
                                                                                廿三
                                                                                21
                                                                                小满
                                                                                22
                                                                                廿五
                                                                                23
                                                                                廿六
                                                                                24
                                                                                廿七
                                                                                25
                                                                                廿八
                                                                                26
                                                                                廿九
                                                                                27
                                                                                初一
                                                                                28
                                                                                初二
                                                                                29
                                                                                初三
                                                                                30
                                                                                初四
                                                                                31
                                                                                端午节
                                                                                1
                                                                                初六
                                                                                2
                                                                                初七
                                                                                3
                                                                                初八
                                                                                4
                                                                                初九
                                                                                5
                                                                                芒种
                                                                                6
                                                                                十一
                                                                                7
                                                                                十二
                                                                                2025
                                                                                May
                                                                                WeekSuMoTuWeThFrSa
                                                                                18
                                                                                27
                                                                                28
                                                                                29
                                                                                30
                                                                                01
                                                                                02
                                                                                03
                                                                                19
                                                                                04
                                                                                05
                                                                                06
                                                                                07
                                                                                08
                                                                                09
                                                                                10
                                                                                20
                                                                                11
                                                                                12
                                                                                13
                                                                                14
                                                                                15
                                                                                16
                                                                                17
                                                                                21
                                                                                18
                                                                                19
                                                                                20
                                                                                21
                                                                                22
                                                                                23
                                                                                24
                                                                                22
                                                                                25
                                                                                26
                                                                                27
                                                                                28
                                                                                29
                                                                                30
                                                                                31
                                                                                23
                                                                                01
                                                                                02
                                                                                03
                                                                                04
                                                                                05
                                                                                06
                                                                                07

                                                                                2025
                                                                                May
                                                                                WeekSuMoTuWeThFrSa
                                                                                18
                                                                                27
                                                                                28
                                                                                29
                                                                                30
                                                                                01
                                                                                02
                                                                                03
                                                                                19
                                                                                04
                                                                                05
                                                                                06
                                                                                07
                                                                                08
                                                                                09
                                                                                10
                                                                                20
                                                                                11
                                                                                12
                                                                                13
                                                                                14
                                                                                15
                                                                                16
                                                                                17
                                                                                21
                                                                                18
                                                                                19
                                                                                20
                                                                                21
                                                                                22
                                                                                23
                                                                                24
                                                                                22
                                                                                25
                                                                                26
                                                                                27
                                                                                28
                                                                                29
                                                                                30
                                                                                31
                                                                                23
                                                                                01
                                                                                02
                                                                                03
                                                                                04
                                                                                05
                                                                                06
                                                                                07

                                                                                Custom header

                                                                                2025
                                                                                May
                                                                                SuMoTuWeThFrSa
                                                                                27
                                                                                28
                                                                                29
                                                                                30
                                                                                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