Calendar
Calendar (캘린더)
출처: 문서
본문
Calendar
날짜를 표시해요.
기본
value를 설정해서 현재 표시할 월을 지정해요. value를 지정하지 않으면 현재 월이 표시돼요. value는 양방향 바인딩을 지원해요.
Controller Type 2.13.1
Calendar 헤더의 컨트롤러 타입을 설정할 수 있어요. select로 설정하면 formatter를 사용해서 라벨을 커스터마이즈할 수 있어요.
커스텀 내용
date-cell이라는 scoped-slot을 설정해서 캘린더 셀에 표시되는 내용을 커스터마이즈해요. scoped-slot에서 date(현재 셀의 날짜), data(type, isSelected, day 속성 포함)를 얻을 수 있어요. 자세한 내용은 아래 API 문서를 참고해 주세요.
범위
range 속성을 설정해서 캘린더의 표시 범위를 지정해요. 시작 시간은 반드시 월요일이어야 하고, 종료 시간은 반드시 일요일이어야 하며, 시간 간격은 두 달을 초과할 수 없어요.
헤더 커스터마이즈
로컬라이제이션
기본 로케일은 영어예요. 다른 언어가 필요하면 Internationalization을 확인해 주세요. 참고: 날짜 시간 로케일(월 이름, 주의 첫 번째 요일 등)도 로컬라이제이션에서 설정돼요.
API
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| model-value / v-model | 바인딩 값 | Date | — |
| range | 시간 범위, 시작 시간과 종료 시간 포함. 시작 시간은 주의 시작일이어야 하고 종료 시간은 주의 종료일이어야 하며, 시간 간격은 두 달을 초과할 수 없어요 | array | — |
| controller-type 2.13.1 | Calendar 헤더의 컨트롤러 타입 | enum | button |
| formatter 2.13.1 | controller-type이 'select'일 때 라벨 포맷 | Function | — |
Slots
| Name | Description | Type |
|---|---|---|
| date-cell | type은 날짜가 속한 월을 나타내며, 선택값은 prev-month, current-month, next-month예요. isSelected는 날짜 선택 여부, day는 YYYY-MM-DD 형식의 날짜, date는 셀을 나타내는 날짜예요 | object |
| header | Calendar 헤더의 내용 | object |
Exposes
| Name | Description | Type |
|---|---|---|
| selectedDay | 현재 선택된 날짜 | object |
| pickDay | 특정 날짜 선택 | Function |
| selectDate | 날짜 선택 | Function |
| calculateValidatedDateRange | 시작/종료 날짜에 따라 유효한 날짜 범위 계산 | Function |
타입 선언
type CalendarDateType =
'prev-month' | 'next-month' | 'prev-year' | 'next-year' | 'today'