logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
5.3.3
  • 组件总览
  • 通用
    • Button按钮
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Grid栅格
    • Layout布局
    • Space间距
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tabs标签页
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
  • 其他
    • Affix固钉
    • App包裹组件
    • ConfigProvider全局化配置
    • FloatButton悬浮按钮
    • Watermark水印
何时使用
代码演示
基本
通知事项日历
卡片模式
选择功能
自定义头部
API
FAQ
如何在 Calendar 中使用自定义日期库
如何给日期类组件配置国际化？
为什么时间类组件的国际化 locale 设置不生效？

Calendar日历

Badge徽标数Card卡片

相关资源

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
ahooks-React Hooks 库
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuqueAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech更多产品

yuque语雀-构建你的数字花园
AntVAntV-数据可视化解决方案
EggEgg-企业级 Node.js 框架
kitchenKitchen-Sketch 工具集
xtech蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

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

何时使用

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

代码演示

2023年
3月
一二三四五六日
27
28
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
TypeScript
JavaScript
import React from 'react';
import { Calendar } from 'antd';
import type { Dayjs } from 'dayjs';
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';

const App: React.FC = () => {
  const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
    console.log(value.format('YYYY-MM-DD'), mode);
  };

  return <Calendar onPanelChange={onPanelChange} />;
};

export default App;
2023年
3月
一二三四五六日
27
    28
      01
        02
          03
            04
              05
                06
                  07
                    08
                    • This is warning event.
                    • This is usual event.
                    09
                      10
                      • This is warning event.
                      • This is usual event.
                      • This is error event.
                      11
                        12
                          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
                                                                              通知事项日历

                                                                              一个复杂的应用示例，用 dateCellRender 和 monthCellRender 函数来自定义需要渲染的数据。

                                                                              expand codeexpand code
                                                                              TypeScript
                                                                              JavaScript
                                                                              import React from 'react';
import type { BadgeProps } from 'antd';
import { Badge, Calendar } from 'antd';
import type { Dayjs } from 'dayjs';

const getListData = (value: Dayjs) => {
  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 || [];
};

const getMonthData = (value: Dayjs) => {
  if (value.month() === 8) {
    return 1394;
  }
};

const App: React.FC = () => {
  const monthCellRender = (value: Dayjs) => {
    const num = getMonthData(value);
    return num ? (
      <div className="notes-month">
        <section>{num}</section>
        <span>Backlog number</span>
      </div>
    ) : null;
  };

  const dateCellRender = (value: Dayjs) => {
    const listData = getListData(value);
    return (
      <ul className="events">
        {listData.map((item) => (
          <li key={item.content}>
            <Badge status={item.type as BadgeProps['status']} text={item.content} />
          </li>
        ))}
      </ul>
    );
  };

  return <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />;
};

export default App;

                                                                              .events {
  margin: 0;
  padding: 0;
  list-style: none;
}
.events .ant-badge-status {
  width: 100%;
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.notes-month {
  font-size: 28px;
  text-align: center;
}
.notes-month section {
  font-size: 28px;
}
                                                                              2023年
                                                                              3月
                                                                              一二三四五六日
                                                                              27
                                                                              28
                                                                              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
                                                                              TypeScript
                                                                              JavaScript
                                                                              import { Calendar, theme } from 'antd';
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
import type { Dayjs } from 'dayjs';
import React from 'react';

const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
  console.log(value.format('YYYY-MM-DD'), mode);
};

const App: React.FC = () => {
  const { token } = theme.useToken();

  const wrapperStyle: React.CSSProperties = {
    width: 300,
    border: `1px solid ${token.colorBorderSecondary}`,
    borderRadius: token.borderRadiusLG,
  };

  return (
    <div style={wrapperStyle}>
      <Calendar fullscreen={false} onPanelChange={onPanelChange} />
    </div>
  );
};

export default App;
                                                                              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
                                                                              TypeScript
                                                                              JavaScript
                                                                              import React, { useState } from 'react';
import { Alert, Calendar } from 'antd';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';

const App: React.FC = () => {
  const [value, setValue] = useState(() => dayjs('2017-01-25'));
  const [selectedValue, setSelectedValue] = useState(() => dayjs('2017-01-25'));

  const onSelect = (newValue: Dayjs) => {
    setValue(newValue);
    setSelectedValue(newValue);
  };

  const onPanelChange = (newValue: Dayjs) => {
    setValue(newValue);
  };

  return (
    <>
      <Alert message={`You selected date: ${selectedValue?.format('YYYY-MM-DD')}`} />
      <Calendar value={value} onSelect={onSelect} onPanelChange={onPanelChange} />
    </>
  );
};

export default App;

                                                                              Custom header

                                                                              2023
                                                                              Mar
                                                                              一二三四五六日
                                                                              27
                                                                              28
                                                                              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
                                                                              TypeScript
                                                                              JavaScript
                                                                              import React from 'react';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import type { Dayjs } from 'dayjs';
import dayLocaleData from 'dayjs/plugin/localeData';
import { Calendar, Col, Radio, Row, Select, Typography, theme } from 'antd';
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';

dayjs.extend(dayLocaleData);

const App: React.FC = () => {
  const { token } = theme.useToken();

  const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
    console.log(value.format('YYYY-MM-DD'), mode);
  };

  const wrapperStyle = {
    width: 300,
    border: `1px solid ${token.colorBorderSecondary}`,
    borderRadius: token.borderRadiusLG,
  };

  return (
    <div style={wrapperStyle}>
      <Calendar
        fullscreen={false}
        headerRender={({ value, type, onChange, onTypeChange }) => {
          const start = 0;
          const end = 12;
          const monthOptions = [];

          let current = value.clone();
          const localeData = value.localeData();
          const months = [];
          for (let i = 0; i < 12; i++) {
            current = current.month(i);
            months.push(localeData.monthsShort(current));
          }

          for (let i = start; i < end; i++) {
            monthOptions.push(
              <Select.Option key={i} value={i} className="month-item">
                {months[i]}
              </Select.Option>,
            );
          }

          const year = value.year();
          const month = value.month();
          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"
                    value={year}
                    onChange={(newYear) => {
                      const now = value.clone().year(newYear);
                      onChange(now);
                    }}
                  >
                    {options}
                  </Select>
                </Col>
                <Col>
                  <Select
                    size="small"
                    dropdownMatchSelectWidth={false}
                    value={month}
                    onChange={(newMonth) => {
                      const now = value.clone().month(newMonth);
                      onChange(now);
                    }}
                  >
                    {monthOptions}
                  </Select>
                </Col>
              </Row>
            </div>
          );
        }}
        onPanelChange={onPanelChange}
      />
    </div>
  );
};

export default App;

                                                                              API

                                                                              注意：Calendar 部分 locale 是从 value 中读取，所以请先正确设置 dayjs 的 locale。

                                                                              // 默认语言为 en-US，所以如果需要使用其他语言，推荐在入口文件全局设置 locale
                                                                              // import dayjs from 'dayjs';
                                                                              // import 'dayjs/locale/zh-cn';
                                                                              // dayjs.locale('zh-cn');
                                                                              

                                                                              <Calendar
                                                                                dateCellRender={dateCellRender}
                                                                                monthCellRender={monthCellRender}
                                                                                onPanelChange={onPanelChange}
                                                                                onSelect={onSelect}
                                                                              />
                                                                              参数说明类型默认值版本
                                                                              dateCellRender自定义渲染日期单元格，返回内容会被追加到单元格function(date: Dayjs): ReactNode-
                                                                              dateFullCellRender自定义渲染日期单元格，返回内容覆盖单元格function(date: Dayjs): ReactNode-
                                                                              defaultValue默认展示的日期dayjs-
                                                                              disabledDate不可选择的日期，参数为当前 value，注意使用时不要直接修改(currentDate: Dayjs) => boolean-
                                                                              fullscreen是否全屏显示booleantrue
                                                                              headerRender自定义头部内容function(object:{value: Dayjs, type: string, onChange: f(), onTypeChange: f()})-
                                                                              locale国际化配置object(默认配置)
                                                                              mode初始模式month | yearmonth
                                                                              monthCellRender自定义渲染月单元格，返回内容会被追加到单元格function(date: Dayjs): ReactNode-
                                                                              monthFullCellRender自定义渲染月单元格，返回内容覆盖单元格function(date: Dayjs): ReactNode-
                                                                              validRange设置可以显示的日期[dayjs, dayjs]-
                                                                              value展示日期dayjs-
                                                                              onChange日期变化回调function(date: Dayjs)-
                                                                              onPanelChange日期面板变化回调function(date: Dayjs, mode: string)-
                                                                              onSelect点击选择日期回调function(date: Dayjs）-

                                                                              FAQ

                                                                              如何在 Calendar 中使用自定义日期库

                                                                              参考 使用自定义日期库。

                                                                              如何给日期类组件配置国际化？

                                                                              参考 如何给日期类组件配置国际化。

                                                                              为什么时间类组件的国际化 locale 设置不生效？

                                                                              参考 FAQ 为什么时间类组件的国际化 locale 设置不生效？。