# Calendar

- Page: https://jiguang132.com/resources/arco-design/docs/calendar
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Container for displaying data in calendar form.

## Install

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

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Basic usage.
- **Dropdown**: In addition to the default head switch, it also supports dropdown selection of heads for faster positioning.
- **Card Calendar**: Use `panel=true` to display date in card format.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Calendar

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|allowSelect|Whether to allow the selection and switching of the date. It's enabled by default in `panel` mode|boolean |`-`|
|isWeek|Select Week date|boolean |`-`|
|panel|Whether to be displayed in a container.|boolean |`-`|
|panelTodayBtn|Whether to display the button to jump to today|boolean |`-`|
|defaultMode|The default display mode of the calendar|'day' \| 'week' \| 'month' \| 'year' |`month`|
|headerType|There are two types of headers to choose from. Only work in full-screen calendar mode.|'button' \| 'select' |`button`|
|mode|The display mode of the calendar|'day' \| 'week' \| 'month' \| 'year' |`-`|
|panelOperations|Operation buttons configuration in card mode|Array<'left' \| 'double-left' \| 'right' \| 'double-right'> |`-`|
|className|Additional css class|string \| string[] |`-`|
|dayStartOfWeek|The first day of the week starts on the day of the week, `0`-Sunday, `1`-Monday.|0 \| 1 |`0`|
|locale|Internationalization configuration.|Record&lt;string, any&gt; |`-`|
|panelWidth|The width of the calendar in card mode|number \| string |`265`|
|style|Additional style|CSSProperties |`-`|
|dateInnerContent|Customize the date cell, the content will be added to the cell, and it will only work in the full-screen calendar mode.|(currentDate: Dayjs) => ReactNode |`-`|
|dateRender|Customize the date display, which will completely cover the date cell.|(currentDate: Dayjs) => ReactNode |`-`|
|disabledDate|Function that specifies the dates that cannot be selected|(current: Dayjs) => boolean |`-`|
|headerRender|Custom header renderer.|(props: {value?: Dayjs;pageShowDate?: Dayjs;mode?: string;onChange;onChangePageDate;onChangeMode;}) => ReactNode |`-`|
|monthRender|Customize the month display, which will completely cover the month cell.|(currentDate: Dayjs) => ReactNode |`-`|
|onChange|Callback when date change.|(date: Dayjs) => void |`-`|
|onPanelChange|Callback when the panel date changes.|(date: Dayjs) => void |`-`|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt