# 日历 Calendar

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/calendar
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

日历组件。

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基本用法**：日历的基本用法。
- **下拉选择的头部**：除了默认的头部切换外，也支持下拉选择的头部，更快速的定位。
- **卡片日历**：设置 `panel=true`，可以使用卡片日历。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### Calendar

|参数名|描述|类型|默认值|
|---|---|---|---|
|allowSelect|是否允许选中和切换日期，`panel` 模式下默认可选中切换|boolean |`-`|
|isWeek|周选择|boolean |`-`|
|panel|是否放在容器中进行展示。|boolean |`-`|
|panelTodayBtn|是否显示跳转到今天的按钮|boolean |`-`|
|defaultMode|选择日期的月日历和选择月份的年日历。|'day' \| 'week' \| 'month' \| 'year' |`month`|
|headerType|有两种头部可供选择，默认的按钮类型和下拉框类型，只在全屏日历模式下生效。|'button' \| 'select' |`button`|
|mode|选择日期的月日历和选择月份的年日历，受控模式。|'day' \| 'week' \| 'month' \| 'year' |`-`|
|panelOperations|卡片模式下配置操作按钮|Array<'left' \| 'double-left' \| 'right' \| 'double-right'> |`-`|
|className|节点类名|string \| string[] |`-`|
|dayStartOfWeek|每周的第一天开始于周几，0 - 周日，1 - 周一。|0 \| 1 |`0`|
|locale|国际化配置|Record&lt;string, any&gt; |`-`|
|panelWidth|卡片模式的宽度|number \| string |`265`|
|style|节点样式|CSSProperties |`-`|
|dateInnerContent|定制日期单元格，内容会被添加到单元格内，只在全屏日历模式下生效。|(currentDate: Dayjs) => ReactNode |`-`|
|dateRender|定制日期显示，会完全覆盖日期单元格。|(currentDate: Dayjs) => ReactNode |`-`|
|disabledDate|不可选取的时间|(current: Dayjs) => boolean |`-`|
|headerRender|自定义头部渲染。|(props: {value?: Dayjs;pageShowDate?: Dayjs;mode?: string;onChange;onChangePageDate;onChangeMode;}) => ReactNode |`-`|
|monthRender|定制月份显示，会完全覆盖月份单元格。|(currentDate: Dayjs) => ReactNode |`-`|
|onChange|日期变化触发的回调。|(date: Dayjs) => void |`-`|
|onPanelChange|面板日期发生改变触发的回调。|(date: Dayjs) => void |`-`|

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt