Calendar日历

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

何时使用#

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

代码演示

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

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

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

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

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

                                                                            一个复杂的应用示例,用 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;
                                                                            }
                                                                            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

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

                                                                            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
                                                                            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 (
                                                                                  <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
                                                                            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

                                                                            自定义日历头部内容。

                                                                            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#

                                                                            注意: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/yearstringmonth
                                                                            monthCellRender自定义渲染月单元格,返回内容会被追加到单元格function(date: moment): ReactNode
                                                                            monthFullCellRender自定义渲染月单元格,返回内容覆盖单元格function(date: moment): ReactNode
                                                                            validRange设置可以显示的日期[moment, moment]3.3.0
                                                                            value展示日期moment当前日期
                                                                            onPanelChange日期面板变化回调function(date: moment, mode: string)
                                                                            onSelect点击选择日期回调function(date: moment)
                                                                            onChange日期变化回调function(date: moment)3.8.0
                                                                            headerRender自定义头部内容function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()})3.19.0
                                                                            Badge徽标数Card卡片