---
title: Calendar - 日历
path: /calendar
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  title: 数据展示
  path: /dataShow
---

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

## 基础日历

最基础的展示日历信息。

<code src='./demos/base.tsx'  height='400px'>

## 下拉选择的头部日历

除了默认的头部切换外，也支持下拉选择的头部，更快速的定位。

<code src='./demos/select.tsx'  height='400px'>

## 通知事项日历

在日历中显示通知事项。

<code src='./demos/message.tsx'  height='400px'>

## 卡片模式日历

以独立日期为单位，嵌套在空间有限的容器内，用以展示日期等信息。

<code src='./demos/card.tsx'  height='400px'>

## API

| 参数                | 说明                                                     | 类型                                                                             | 默认值     | 版本 |
| ------------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------- | ---------- | ---- |
| headerType          | 头部的日期、月份选择的样式类型                           | 'default' \| 'select'                                                            | 'default'  |      |
| dateCellRender      | 自定义渲染日期单元格，返回内容会被追加到单元格           | function(date: Moment): ReactNode                                                | -          |      |
| dateFullCellRender  | 自定义渲染日期单元格，返回内容覆盖单元格                 | function(date: Moment): ReactNode                                                | -          |      |
| defaultValue        | 默认展示的日期                                           | moment                                                                           | -          |      |
| disabledDate        | 不可选择的日期，参数为当前 value，注意使用时不要直接修改 | (currentDate: Moment) => boolean                                                 | -          |      |
| fullscreen          | 是否全屏显示                                             | boolean                                                                          | true       |      |
| headerRender        | 自定义头部内容                                           | function(object:{value: Moment, type: string, onChange: f(), onTypeChange: f()}) | -          |      |
| locale              | 国际化配置                                               | object                                                                           | (默认配置) |      |
| mode                | 初始模式                                                 | 'month' \| 'year'                                                                | 'month'    |      |
| monthCellRender     | 自定义渲染月单元格，返回内容会被追加到单元格             | function(date: Moment): ReactNode                                                | -          |      |
| monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格                   | function(date: Moment): ReactNode                                                | -          |      |
| validRange          | 设置可以显示的日期                                       | [moment, moment]                                                                 | -          |      |
| value               | 展示日期                                                 | moment                                                                           | -          |      |
| value               | 展示日期                                                 | moment                                                                           | -          |      |
| onChange            | 日期变化回调                                             | function(date: Moment)                                                           | -          |      |
| onPanelChange       | 日期面板变化回调                                         | function(date: Moment, mode: string)                                             | -          |      |
| onSelect            | 点击选择日期回调                                         | function(date: Moment）                                                          | -          |      |
| template            | 启用 “通知事项” 模板                                     | 'message'                                                                        | -          |      |
| list                | “通知事项” 的消息列表; template = 'message' 才有效。     | CalendarMessageItem[]                                                            | -          |      |

### CalendarMessageItem

| 参数     | 说明                                          | 类型                        | 默认值 | 版本 |
| -------- | --------------------------------------------- | --------------------------- | ------ | ---- |
| cellType | 渲染在哪个类型的 cell。'both'就是年和月都渲染 | 'month' \| 'date' \| 'both' | 'both' |      |
| time     | 在哪个时间展示信息                            | string \| number \| Date    | -      |      |
| contents | 消息内容列表                                  | CalendarContent[]           | -      |      |

### CalendarContent

| 参数  | 说明       | 类型                                     | 默认值 | 版本 |
| ----- | ---------- | ---------------------------------------- | ------ | ---- |
| type  | 消息的类型 | 'type' \| 'warning' \| 'error' \| 'info' | -      |      |
| value | 消息的内容 | string                                   | -      |      |