Calendar

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

2022
Sep
SuMoTuWeThFrSa
28
29
30
31
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
01
02
03
04
05
06
07
08

A basic calendar component with Year/Month switch.

expand codeexpand code
import { Calendar } from 'antd';
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
import type { Moment } from 'moment';
import React from 'react';

const App: React.FC = () => {
  const onPanelChange = (value: Moment, mode: CalendarMode) => {
    console.log(value.format('YYYY-MM-DD'), mode);
  };

  return <Calendar onPanelChange={onPanelChange} />;
};

export default App;
2022
Sep
SuMoTuWeThFrSa
28
    29
      30
        31
          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
                                                                01
                                                                  02
                                                                    03
                                                                      04
                                                                        05
                                                                          06
                                                                            07
                                                                              08
                                                                              • This is warning event.
                                                                              • This is usual event.

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

                                                                              expand codeexpand code
                                                                              import type { BadgeProps } from 'antd';
                                                                              import { Badge, Calendar } from 'antd';
                                                                              import type { Moment } from 'moment';
                                                                              import React from 'react';
                                                                              
                                                                              const getListData = (value: Moment) => {
                                                                                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: Moment) => {
                                                                                if (value.month() === 8) {
                                                                                  return 1394;
                                                                                }
                                                                              };
                                                                              
                                                                              const App: React.FC = () => {
                                                                                const monthCellRender = (value: Moment) => {
                                                                                  const num = getMonthData(value);
                                                                                  return num ? (
                                                                                    <div className="notes-month">
                                                                                      <section>{num}</section>
                                                                                      <span>Backlog number</span>
                                                                                    </div>
                                                                                  ) : null;
                                                                                };
                                                                              
                                                                                const dateCellRender = (value: Moment) => {
                                                                                  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;
                                                                              }
                                                                              2022
                                                                              Sep
                                                                              SuMoTuWeThFrSa
                                                                              28
                                                                              29
                                                                              30
                                                                              31
                                                                              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
                                                                              01
                                                                              02
                                                                              03
                                                                              04
                                                                              05
                                                                              06
                                                                              07
                                                                              08

                                                                              Nested inside a container element for rendering in limited space.

                                                                              expand codeexpand code
                                                                              import { Calendar } from 'antd';
                                                                              import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
                                                                              import type { Moment } from 'moment';
                                                                              import React from 'react';
                                                                              
                                                                              const App: React.FC = () => {
                                                                                const onPanelChange = (value: Moment, mode: CalendarMode) => {
                                                                                  console.log(value.format('YYYY-MM-DD'), mode);
                                                                                };
                                                                              
                                                                                return (
                                                                                  <div className="site-calendar-demo-card">
                                                                                    <Calendar fullscreen={false} onPanelChange={onPanelChange} />
                                                                                  </div>
                                                                                );
                                                                              };
                                                                              
                                                                              export default App;
                                                                              .site-calendar-demo-card {
                                                                                width: 300px;
                                                                                border: 1px solid #f0f0f0;
                                                                                border-radius: 2px;
                                                                              }
                                                                              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

                                                                              A basic calendar component with Year/Month switch.

                                                                              expand codeexpand code
                                                                              import { Alert, Calendar } from 'antd';
                                                                              import type { Moment } from 'moment';
                                                                              import moment from 'moment';
                                                                              import React, { useState } from 'react';
                                                                              
                                                                              const App: React.FC = () => {
                                                                                const [value, setValue] = useState(moment('2017-01-25'));
                                                                                const [selectedValue, setSelectedValue] = useState(moment('2017-01-25'));
                                                                              
                                                                                const onSelect = (newValue: Moment) => {
                                                                                  setValue(newValue);
                                                                                  setSelectedValue(newValue);
                                                                                };
                                                                              
                                                                                const onPanelChange = (newValue: Moment) => {
                                                                                  setValue(newValue);
                                                                                };
                                                                              
                                                                                return (
                                                                                  <>
                                                                                    <Alert message={`You selected date: ${selectedValue?.format('YYYY-MM-DD')}`} />
                                                                                    <Calendar value={value} onSelect={onSelect} onPanelChange={onPanelChange} />
                                                                                  </>
                                                                                );
                                                                              };
                                                                              
                                                                              export default App;

                                                                              Custom header

                                                                              2022
                                                                              9月
                                                                              SuMoTuWeThFrSa
                                                                              28
                                                                              29
                                                                              30
                                                                              31
                                                                              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
                                                                              01
                                                                              02
                                                                              03
                                                                              04
                                                                              05
                                                                              06
                                                                              07
                                                                              08

                                                                              Customize Calendar header content.

                                                                              expand codeexpand code
                                                                              import { Calendar, Col, Radio, Row, Select, Typography } from 'antd';
                                                                              import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
                                                                              import type { Moment } from 'moment';
                                                                              import React from 'react';
                                                                              
                                                                              const App: React.FC = () => {
                                                                                const onPanelChange = (value: Moment, mode: CalendarMode) => {
                                                                                  console.log(value.format('YYYY-MM-DD'), mode);
                                                                                };
                                                                              
                                                                                return (
                                                                                  <div className="site-calendar-customize-header-wrapper">
                                                                                    <Calendar
                                                                                      fullscreen={false}
                                                                                      headerRender={({ value, type, onChange, onTypeChange }) => {
                                                                                        const start = 0;
                                                                                        const end = 12;
                                                                                        const monthOptions = [];
                                                                              
                                                                                        const current = value.clone();
                                                                                        const localeData = value.localeData();
                                                                                        const months = [];
                                                                                        for (let i = 0; i < 12; i++) {
                                                                                          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;
                                                                              .site-calendar-customize-header-wrapper {
                                                                                width: 300px;
                                                                                border: 1px solid #f0f0f0;
                                                                                border-radius: 2px;
                                                                              }

                                                                              API#

                                                                              <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: Moment): ReactNode-
                                                                              dateFullCellRenderCustomize the display of the date cell, the returned content will override the cellfunction(date: Moment): ReactNode-
                                                                              defaultValueThe date selected by defaultmoment-
                                                                              disabledDateFunction that specifies the dates that cannot be selected, currentDate is same moment object as value prop which you shouldn't mutate it](https://github.com/ant-design/ant-design/issues/30987)(currentDate: Moment) => boolean-
                                                                              fullscreenWhether to display in full-screenbooleantrue
                                                                              headerRenderRender custom header in panelfunction(object:{value: Moment, 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: Moment): ReactNode-
                                                                              monthFullCellRenderCustomize the display of the month cell, the returned content will override the cellfunction(date: Moment): ReactNode-
                                                                              validRangeTo set valid range[moment, moment]-
                                                                              valueThe current selected datemoment-
                                                                              onChangeCallback for when date changesfunction(date: Moment)-
                                                                              onPanelChangeCallback for when panel changesfunction(date: Moment, mode: string)-
                                                                              onSelectCallback for when a date is selectedfunction(date: Moment)-

                                                                              FAQ#

                                                                              How to use Calendar with customize date library like dayjs?#

                                                                              See How to use Calendar with customize date library like dayjs

                                                                              See How to set locale for date-related components

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