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

SuMoTuWeThFrSa
27
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

A basic calendar component with Year/Month switch.

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

function onPanelChange(value, mode) {
  console.log(value, mode);
}

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

                                                                                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 {
                                                                                  list-style: none;
                                                                                  margin: 0;
                                                                                  padding: 0;
                                                                                }
                                                                                .events .ant-badge-status {
                                                                                  overflow: hidden;
                                                                                  white-space: nowrap;
                                                                                  width: 100%;
                                                                                  text-overflow: ellipsis;
                                                                                  font-size: 12px;
                                                                                }
                                                                                .notes-month {
                                                                                  text-align: center;
                                                                                  font-size: 28px;
                                                                                }
                                                                                .notes-month section {
                                                                                  font-size: 28px;
                                                                                }
                                                                                SuMoTuWeThFrSa
                                                                                27
                                                                                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

                                                                                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 style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
                                                                                    <Calendar fullscreen={false} onPanelChange={onPanelChange} />
                                                                                  </div>,
                                                                                  mountNode,
                                                                                );
                                                                                You selected date: 2017-01-25
                                                                                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 (
                                                                                      <div>
                                                                                        <Alert
                                                                                          message={`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`}
                                                                                        />
                                                                                        <Calendar value={value} onSelect={this.onSelect} onPanelChange={this.onPanelChange} />
                                                                                      </div>
                                                                                    );
                                                                                  }
                                                                                }
                                                                                
                                                                                ReactDOM.render(<App />, mountNode);
                                                                                Custom header
                                                                                SuMoTuWeThFrSa
                                                                                27
                                                                                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

                                                                                Customize Calendar header content.

                                                                                expand codeexpand code
                                                                                import { Calendar, Select, Radio, Col, Row } from 'antd';
                                                                                
                                                                                const { Group, Button } = Radio;
                                                                                
                                                                                function onPanelChange(value, mode) {
                                                                                  console.log(value, mode);
                                                                                }
                                                                                
                                                                                ReactDOM.render(
                                                                                  <div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
                                                                                    <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: 10 }}>
                                                                                            <div style={{ marginBottom: '10px' }}>Custom header </div>
                                                                                            <Row type="flex" justify="space-between">
                                                                                              <Col>
                                                                                                <Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}>
                                                                                                  <Button value="month">Month</Button>
                                                                                                  <Button value="year">Year</Button>
                                                                                                </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,
                                                                                );

                                                                                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 defaultmomentdefault date
                                                                                disabledDateFunction that specifies the dates that cannot be selected(currentDate: moment) => boolean-
                                                                                fullscreenWhether to display in full-screenbooleantrue
                                                                                localeThe calendar's localeobjectdefault
                                                                                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]-3.3.0
                                                                                valueThe current selected datemomentcurrent date
                                                                                onPanelChangeCallback for when panel changesfunction(date: moment, mode: string)-
                                                                                onSelectCallback for when a date is selectedfunction(date: moment)-
                                                                                onChangeCallback for when date changesfunction(date: moment)-3.8.0
                                                                                headerRenderrender custom header in panelfunction(object:{value: moment, type: string, onChange: f(), onTypeChange: f()})-3.19.0
                                                                                BadgeCard