Calendar日历

按照日历形式展示数据的容器。

何时使用#

当数据是日期或按照日期划分时,例如日程、课表、价格日历等,农历等。目前支持年/月切换。

代码演示

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

一个通用的日历面板,支持年/月切换。

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);
2020年
7月
29
    30
      01
        02
          03
            04
              05
                06
                  07
                    08
                    • This is warning event.
                    • This is usual event.
                    09
                      10
                      • This is warning event.
                      • This is usual event.
                      • This is error event.
                      11
                        12
                          13
                            14
                              15
                              • This is warning event
                              • This is very long usual event。。....
                              • This is error event 1.
                              • This is error event 2.
                              • This is error event 3.
                              • This is error event 4.
                              16
                                17
                                  18
                                    19
                                      20
                                        21
                                          22
                                            23
                                              24
                                                25
                                                  26
                                                    27
                                                      28
                                                        29
                                                          30
                                                            31
                                                              01
                                                                02
                                                                  03
                                                                    04
                                                                      05
                                                                        06
                                                                          07
                                                                            08
                                                                            • This is warning event.
                                                                            • This is usual event.
                                                                            09

                                                                              一个复杂的应用示例,用 dateCellRendermonthCellRender 函数来自定义需要渲染的数据。

                                                                              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;
                                                                              }
                                                                              2020年
                                                                              7月
                                                                              29
                                                                              30
                                                                              01
                                                                              02
                                                                              03
                                                                              04
                                                                              05
                                                                              06
                                                                              07
                                                                              08
                                                                              09
                                                                              10
                                                                              11
                                                                              12
                                                                              13
                                                                              14
                                                                              15
                                                                              16
                                                                              17
                                                                              18
                                                                              19
                                                                              20
                                                                              21
                                                                              22
                                                                              23
                                                                              24
                                                                              25
                                                                              26
                                                                              27
                                                                              28
                                                                              29
                                                                              30
                                                                              31
                                                                              01
                                                                              02
                                                                              03
                                                                              04
                                                                              05
                                                                              06
                                                                              07
                                                                              08
                                                                              09

                                                                              用于嵌套在空间有限的容器中。

                                                                              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;
                                                                              }
                                                                              You selected date: 2017-01-25
                                                                              2017年
                                                                              1月
                                                                              26
                                                                              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
                                                                              31
                                                                              01
                                                                              02
                                                                              03
                                                                              04
                                                                              05

                                                                              一个通用的日历面板,支持年/月切换。

                                                                              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

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

                                                                              自定义日历头部内容。

                                                                              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#

                                                                              注意:Calendar 部分 locale 是从 value 中读取,所以请先正确设置 moment 的 locale。

                                                                              // 默认语言为 en-US,所以如果需要使用其他语言,推荐在入口文件全局设置 locale
                                                                              // import moment from 'moment';
                                                                              // import 'moment/locale/zh-cn';
                                                                              // moment.locale('zh-cn');
                                                                              
                                                                              <Calendar
                                                                                dateCellRender={dateCellRender}
                                                                                monthCellRender={monthCellRender}
                                                                                onPanelChange={onPanelChange}
                                                                                onSelect={onSelect}
                                                                              />
                                                                              参数说明类型默认值版本
                                                                              dateCellRender自定义渲染日期单元格,返回内容会被追加到单元格function(date: moment): ReactNode-
                                                                              dateFullCellRender自定义渲染日期单元格,返回内容覆盖单元格function(date: moment): ReactNode-
                                                                              defaultValue默认展示的日期moment-
                                                                              disabledDate不可选择的日期(currentDate: moment) => boolean-
                                                                              fullscreen是否全屏显示booleantrue
                                                                              locale国际化配置object(默认配置)
                                                                              mode初始模式month | yearmonth
                                                                              monthCellRender自定义渲染月单元格,返回内容会被追加到单元格function(date: moment): ReactNode-
                                                                              monthFullCellRender自定义渲染月单元格,返回内容覆盖单元格function(date: moment): ReactNode-
                                                                              validRange设置可以显示的日期[moment, moment]-
                                                                              value展示日期moment-
                                                                              onPanelChange日期面板变化回调function(date: moment, mode: string)-
                                                                              onSelect点击选择日期回调function(date: moment)-
                                                                              onChange日期变化回调function(date: moment)-
                                                                              headerRender自定义头部内容function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()})-

                                                                              FAQ#

                                                                              Card卡片Descriptions描述列表