Calendar

Container for displaying data in calendar form.

When To Use#

When data is in the form of date, such as schedule, timetable, prices calendar, Lunar calendar. This component also supports Year/Month switch.

Examples

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

A basic calendar component with Year/Month switch.

import { Calendar } from 'antd';

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

ReactDOM.render(
  <Calendar onPanelChange={onPanelChange} />
, mountNode);
SuMoTuWeThFrSa
30
    01
      02
        03
          04
            05
              06
                07
                  08
                  • This is warning event.
                  • This is usual event.
                  09
                    10
                    • This is warning event.
                    • This is usual event.
                    • This is error event.
                    11
                      12
                        13
                          14
                            15
                            • This is warning event
                            • This is very long usual event。。....
                            • This is error event 1.
                            • This is error event 2.
                            • This is error event 3.
                            • This is error event 4.
                            16
                              17
                                18
                                  19
                                    20
                                      21
                                        22
                                          23
                                            24
                                              25
                                                26
                                                  27
                                                    28
                                                      29
                                                        30
                                                          31
                                                            01
                                                              02
                                                                03
                                                                  04
                                                                    05
                                                                      06
                                                                        07
                                                                          08
                                                                          • This is warning event.
                                                                          • This is usual event.
                                                                          09
                                                                            10
                                                                            • This is warning event.
                                                                            • This is usual event.
                                                                            • This is error event.

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

                                                                            import { Calendar } from 'antd';
                                                                            
                                                                            function getListData(value) {
                                                                              let listData;
                                                                              switch (value.date()) {
                                                                                case 8:
                                                                                  listData = [
                                                                                    { type: 'warning', content: 'This is warning event.' },
                                                                                    { type: 'normal', content: 'This is usual event.' },
                                                                                  ]; break;
                                                                                case 10:
                                                                                  listData = [
                                                                                    { type: 'warning', content: 'This is warning event.' },
                                                                                    { type: 'normal', content: 'This is usual event.' },
                                                                                    { type: 'error', content: 'This is error event.' },
                                                                                  ]; break;
                                                                                case 15:
                                                                                  listData = [
                                                                                    { type: 'warning', content: 'This is warning event' },
                                                                                    { type: 'normal', 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}>
                                                                                        <span className={`event-${item.type}`}></span>
                                                                                        {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 {
                                                                              line-height: 24px;
                                                                              list-style: none;
                                                                              margin: 0;
                                                                              padding: 0;
                                                                            }
                                                                            
                                                                            .events li {
                                                                              color: #999;
                                                                              overflow: hidden;
                                                                              text-overflow: ellipsis;
                                                                              white-space: nowrap;
                                                                            }
                                                                            
                                                                            .events li span {
                                                                              vertical-align: middle;
                                                                            }
                                                                            
                                                                            .events li span:first-child {
                                                                              font-size: 9px;
                                                                              margin-right: 4px;
                                                                            }
                                                                            
                                                                            .event-warning {
                                                                              color: #fac450;
                                                                            }
                                                                            
                                                                            .event-normal {
                                                                              color: #108ee9;
                                                                            }
                                                                            
                                                                            .event-error {
                                                                              color: #f50;
                                                                            }
                                                                            
                                                                            .notes-month {
                                                                              text-align: center;
                                                                            }
                                                                            .notes-month section {
                                                                              font-size: 28px;
                                                                            }
                                                                            SuMoTuWeThFrSa
                                                                            30
                                                                            01
                                                                            02
                                                                            03
                                                                            04
                                                                            05
                                                                            06
                                                                            07
                                                                            08
                                                                            09
                                                                            10
                                                                            11
                                                                            12
                                                                            13
                                                                            14
                                                                            15
                                                                            16
                                                                            17
                                                                            18
                                                                            19
                                                                            20
                                                                            21
                                                                            22
                                                                            23
                                                                            24
                                                                            25
                                                                            26
                                                                            27
                                                                            28
                                                                            29
                                                                            30
                                                                            31
                                                                            01
                                                                            02
                                                                            03
                                                                            04
                                                                            05
                                                                            06
                                                                            07
                                                                            08
                                                                            09
                                                                            10

                                                                            Nested inside a container element for rendering in limited space.

                                                                            import { Calendar } from 'antd';
                                                                            
                                                                            function onPanelChange(value, mode) {
                                                                              console.log(value, mode);
                                                                            }
                                                                            
                                                                            ReactDOM.render(
                                                                              <div style={{ width: 290, 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.

                                                                            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);

                                                                            API#

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

                                                                            import moment from 'moment';
                                                                            
                                                                            // It's recommended to set locale in entry file globaly.
                                                                            import 'moment/locale/zh-cn';
                                                                            moment.locale('zh-cn');
                                                                            
                                                                            <Calendar
                                                                              dateCellRender={dateCellRender}
                                                                              monthCellRender={monthCellRender}
                                                                              onPanelChange={onPanelChange}
                                                                              onSelect={onSelect}
                                                                            />
                                                                            PropertyDescriptionTypeDefault
                                                                            valueset datemomentcurrent date
                                                                            defaultValueset default datemomentdefault date
                                                                            modecan be set to month or yearstringmonth
                                                                            fullscreento set whether full-screen displaybooleantrue
                                                                            dateCellRenderto set the way of renderer the date cell, the returned content will be appended to the cellfunction(date: moment): ReactNode-
                                                                            monthCellRenderto set the way of renderer the month cell, the returned content will be appended to the cellfunction(date: moment): ReactNode-
                                                                            dateFullCellRenderto set the way of renderer the date cell,the returned content will override the cellfunction(date: moment): ReactNode-
                                                                            monthFullCellRenderto set the way of renderer the month cell,the returned content will override the cellfunction(date: moment): ReactNode-
                                                                            localeset localeobjectdefault
                                                                            onPanelChangecallback when panel changefunction(date: moment, mode: string)-
                                                                            onSelectcallback when select datefunction(date: moment)-