Calendar#
날짜를 시각적으로 탐색하고 선택할 수 있는 캘린더 컴포넌트입니다.
사용법#
// 기본 캘린더
CouiCalendar(
selectedDate: selectedDate,
onDateSelected: handleDateSelect,
)
// 이벤트 표시
CouiCalendar(
selectedDate: selectedDate,
onDateSelected: handleDateSelect,
events: {
DateTime(2024, 3, 15): [CalendarEvent(title: '회의')],
DateTime(2024, 3, 20): [CalendarEvent(title: '마감일')],
},
)
// 범위 선택
CouiCalendar.range(
startDate: rangeStart,
endDate: rangeEnd,
onRangeSelected: handleRangeSelect,
)
Calendar(
selectedDate: selectedDate,
onDateSelected: handleDateSelect,
)
Calendar(
selectedDate: selectedDate,
onDateSelected: handleDateSelect,
events: eventMap,
)
Props / Parameters#
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
selectedDate |
DateTime? |
null |
선택된 날짜 |
onDateSelected |
ValueChanged<DateTime>? |
null |
날짜 선택 콜백 |
events |
Map<DateTime, List<CalendarEvent>>? |
null |
이벤트 데이터 |
minDate |
DateTime? |
null |
최소 표시 날짜 |
maxDate |
DateTime? |
null |
최대 표시 날짜 |
firstDayOfWeek |
int |
0 |
주 시작 요일 (0=일) |
locale | Locale? | 시스템 기본값 | 표시 로케일 |
변형 (Variants)#
월간 뷰#
CouiCalendar(
view: CalendarView.month,
selectedDate: selectedDate,
onDateSelected: handleDateSelect,
)
주간 뷰#
CouiCalendar(
view: CalendarView.week,
selectedDate: selectedDate,
onDateSelected: handleDateSelect,
)
다중 선택#
CouiCalendar.multi(
selectedDates: selectedDates,
onDatesChanged: handleMultiSelect,
)