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
Feb
SuMoTuWeThFrSa
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
01
02
03
04
05
06
07
08
09
10
11
12

A basic calendar component with Year/Month switch.

expand codeexpand code
import { Calendar } from 'antd';

function onPanelChange(value, mode) {
  console.log(value.format('YYYY-MM-DD'), mode);
}

ReactDOM.render(<Calendar onPanelChange={onPanelChange} />, mountNode);
2022
Feb
SuMoTuWeThFrSa
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
                                                        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

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

                                                                            expand codeexpand code
                                                                            import { Calendar, Badge } from 'antd';
                                                                            
                                                                            function getListData(value) {
                                                                              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 || [];
                                                                            }
                                                                            
                                                                            function dateCellRender(value) {
                                                                              const listData = getListData(value);
                                                                              return (
                                                                                <ul className="events">
                                                                                  {listData.map(item => (
                                                                                    <li key={item.content}>
                                                                                      <Badge status={item.type} text={item.content} />
                                                                                    </li>
                                                                                  ))}
                                                                                </ul>
                                                                              );
                                                                            }
                                                                            
                                                                            function getMonthData(value) {
                                                                              if (value.month() === 8) {
                                                                                return 1394;
                                                                              }
                                                                            }
                                                                            
                                                                            function monthCellRender(value) {
                                                                              const num = getMonthData(value);
                                                                              return num ? (
                                                                                <div className="notes-month">
                                                                                  <section>{num}</section>
                                                                                  <span>Backlog number</span>
                                                                                </div>
                                                                              ) : null;
                                                                            }
                                                                            
                                                                            ReactDOM.render(
                                                                              <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />,
                                                                              mountNode,
                                                                            );
                                                                            .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
                                                                            Feb
                                                                            SuMoTuWeThFrSa
                                                                            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
                                                                            01
                                                                            02
                                                                            03
                                                                            04
                                                                            05
                                                                            06
                                                                            07
                                                                            08
                                                                            09
                                                                            10
                                                                            11
                                                                            12

                                                                            Nested inside a container element for rendering in limited space.

                                                                            expand codeexpand code
                                                                            import { Calendar } from 'antd';
                                                                            
                                                                            function onPanelChange(value, mode) {
                                                                              console.log(value, mode);
                                                                            }
                                                                            
                                                                            ReactDOM.render(
                                                                              <div className="site-calendar-demo-card">
                                                                                <Calendar fullscreen={false} onPanelChange={onPanelChange} />
                                                                              </div>,
                                                                              mountNode,
                                                                            );
                                                                            .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 { Calendar, Alert } from 'antd';
                                                                            import moment from 'moment';
                                                                            
                                                                            class App extends React.Component {
                                                                              state = {
                                                                                value: moment('2017-01-25'),
                                                                                selectedValue: moment('2017-01-25'),
                                                                              };
                                                                            
                                                                              onSelect = value => {
                                                                                this.setState({
                                                                                  value,
                                                                                  selectedValue: value,
                                                                                });
                                                                              };
                                                                            
                                                                              onPanelChange = value => {
                                                                                this.setState({ value });
                                                                              };
                                                                            
                                                                              render() {
                                                                                const { value, selectedValue } = this.state;
                                                                                return (
                                                                                  <>
                                                                                    <Alert
                                                                                      message={`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`}
                                                                                    />
                                                                                    <Calendar value={value} onSelect={this.onSelect} onPanelChange={this.onPanelChange} />
                                                                                  </>
                                                                                );
                                                                              }
                                                                            }
                                                                            
                                                                            ReactDOM.render(<App />, mountNode);

                                                                            Custom header

                                                                            2022
                                                                            2月
                                                                            SuMoTuWeThFrSa
                                                                            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
                                                                            01
                                                                            02
                                                                            03
                                                                            04
                                                                            05
                                                                            06
                                                                            07
                                                                            08
                                                                            09
                                                                            10
                                                                            11
                                                                            12

                                                                            Customize Calendar header content.

                                                                            expand codeexpand code
                                                                            import { Calendar, Select, Radio, Col, Row, Typography } from 'antd';
                                                                            
                                                                            function onPanelChange(value, mode) {
                                                                              console.log(value, mode);
                                                                            }
                                                                            
                                                                            ReactDOM.render(
                                                                              <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 index = start; index < end; index++) {
                                                                                      monthOptions.push(
                                                                                        <Select.Option className="month-item" key={`${index}`}>
                                                                                          {months[index]}
                                                                                        </Select.Option>,
                                                                                      );
                                                                                    }
                                                                                    const month = value.month();
                                                                            
                                                                                    const year = value.year();
                                                                                    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"
                                                                                              onChange={newYear => {
                                                                                                const now = value.clone().year(newYear);
                                                                                                onChange(now);
                                                                                              }}
                                                                                              value={String(year)}
                                                                                            >
                                                                                              {options}
                                                                                            </Select>
                                                                                          </Col>
                                                                                          <Col>
                                                                                            <Select
                                                                                              size="small"
                                                                                              dropdownMatchSelectWidth={false}
                                                                                              value={String(month)}
                                                                                              onChange={selectedMonth => {
                                                                                                const newValue = value.clone();
                                                                                                newValue.month(parseInt(selectedMonth, 10));
                                                                                                onChange(newValue);
                                                                                              }}
                                                                                            >
                                                                                              {monthOptions}
                                                                                            </Select>
                                                                                          </Col>
                                                                                        </Row>
                                                                                      </div>
                                                                                    );
                                                                                  }}
                                                                                  onPanelChange={onPanelChange}
                                                                                />
                                                                              </div>,
                                                                              mountNode,
                                                                            );
                                                                            .site-calendar-customize-header-wrapper {
                                                                              width: 300px;
                                                                              border: 1px solid #f0f0f0;
                                                                              border-radius: 2px;
                                                                            }

                                                                            API#

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

                                                                            // The default locale is en-US, if you want to use other locale, just set locale in entry file globally.
                                                                            // import moment from 'moment';
                                                                            // import 'moment/locale/zh-cn';
                                                                            // moment.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: 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#