Calendar
Calendar
달력 형태로 데이터를 표시하는 컨테이너.
가져오기import{ Calendar }from"antd"; |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
스케줄, 시간표, 가격 캘린더, 음력 달력과 같은 날짜 형태의 데이터가 있는 경우 사용합니다. 또한 Calendar 컴포넌트는 연/월 전환을 지원합니다.
공통 props 참조：공통 props
참고: 캘린더의 일부 locale은 value에서 읽혀집니다. 따라서, dayjs의 locale을 올바르게 설정해주세요.
// 기본 locale은 en-US 입니다. 다른 locale을 사용하고 싶다면, 전역적으로 entry file 에서 locale을 설정하세요.// import dayjs from 'dayjs';// import 'dayjs/locale/zh-cn';// dayjs.locale('zh-cn');<Calendar cellRender={cellRender} onPanelChange={onPanelChange} onSelect={onSelect} />
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| cellRender | 셀 내용 커스텀 | function(current: dayjs, today: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' | 'end', type: PanelMode, locale?: Locale, subType?: 'hour' | 'minute' | 'second' | 'meridiem' }) => React.ReactNode | - | 5.4.0 |
| dateFullCellRender | 날짜 셀의 외형를 커스텀하여 셀을 덮어씁니다. | function(date: Dayjs): ReactNode | - | |
| fullCellRender | 셀 내용 커스텀 | function(current: dayjs, today: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' | 'end', type: PanelMode, locale?: Locale, subType?: 'hour' | 'minute' | 'second' | 'meridiem' }) => React.ReactNode | - | 5.4.0 |
| defaultValue | 기본으로 선택된 날짜 | dayjs | - | |
| disabledDate | 선택할 수 없는 날짜를 지정하는 함수, currentDate는 value 속성과 동일한 dayjs 객체입니다 (이 객체를 변형해서는 안 됩니다)](https://github.com/ant-design/ant-design/issues/30987) | (currentDate: Dayjs) => boolean | - | |
| fullscreen | 전체 화면으로 표시 여부 | boolean | true | |
| headerRender | 패널에 사용자 정의 헤더 렌더링 | function(object:{value: Dayjs, type: string, onChange: f(), onTypeChange: f()}) | - | |
| locale | 달력의 locale | object | (default) | |
| mode | 달력의 표시 모드 | month | year | month | |
| validRange | 유효 범위 설정 | [dayjs, dayjs] | - | |
| value | 현재 선택된 날짜 | dayjs | - | |
| onChange | 날짜 변경 시 콜백 | function(date: Dayjs) | - | |
| onPanelChange | 패널 변경 시 콜백 | function(date: Dayjs, mode: string) | - | |
| onSelect | source info 를 포함하는 날짜를 선택할 시 콜백 | function(date: Dayjs, info: { source: 'year' | 'month' | 'date' | 'customize' }) | - | info: 5.6.0 |
| 토큰 이름 | 설명 | 타입 | 기본값 |
|---|---|---|---|
| fullBg | 完整日历背景色 | string | #ffffff |
| fullPanelBg | 完整日历面板背景色 | string | #ffffff |
| itemActiveBg | 日期项选中背景色 | string | #e6f4ff |
| miniContentHeight | 迷你日历内容高度 | string | number | 256 |
| monthControlWidth | 月选择器宽度 | string | number | 70 |
| yearControlWidth | 年选择器宽度 | string | number | 80 |
Calendar를 사용하나요?커스텀 날짜 라이브러리 사용하기를 참조하세요.
날짜 관련 컴포넌트의 로케일 설정 방법을 참조하세요.
자주 묻는 질문 날짜 관련 컴포넌트의 로케일이 작동하지 않나요?을 참조하세요.
onSelect는 이를 위해 info.source를 제공합니다.
<CalendaronSelect={(date, { source }) => {if (source === 'date') {console.log('Panel Select:', source);}}}/>
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
29 | 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 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
29 | 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 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
29 | 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 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
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 | 11 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
29 廿七 | 30 廿八 | 1 国庆节 | 2 三十 | 3 初一 | 4 初二 | 5 初三 |
6 初四 | 7 初五 | 8 寒露 | 9 初七 | 10 初八 | 11 初九 | 12 初十 |
13 十一 | 14 十二 | 15 十三 | 16 十四 | 17 十五 | 18 十六 | 19 十七 |
20 十八 | 21 十九 | 22 二十 | 23 霜降 | 24 廿二 | 25 廿三 | 26 廿四 |
27 廿五 | 28 廿六 | 29 廿七 | 30 廿八 | 31 廿九 | 1 初一 | 2 初二 |
3 初三 | 4 初四 | 5 初五 | 6 初六 | 7 立冬 | 8 初八 | 9 初九 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
29 | 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 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
29 | 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 |
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
29 | 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 |
