IROUL
회원가입로그인
Calendar

Interactive UI Explorer

아래에서 각 컴포넌트의 다양한 Variants와 States를 문서화된 형태로 테스트해볼 수 있습니다.

Calendar

날짜 선택을 위한 달력 컴포넌트입니다.
휴일 표시, 노출 기한(선택 가능 범위), 월 이동, 오늘/선택 주 강조 등 다양한 props로 제어할 수 있습니다.

Calendar Options

휴일 표시, 선택 범위 제한, 시작 요일 변경 등 다양한 설정을 지원합니다.

Basic
<Calendar value={date} onChange={setDate} />
2026년 4월
일
월
화
수
목
금
토
Default (Sunday Start)
Live Preview
Holidays
<Calendar holidays={["2026-02-01", ...]} showHolidays />
2026년 2월
일
월
화
수
목
금
토
Red Holidays
Live Preview
Date Range
<Calendar displayStartDate={start} displayEndDate={end} />
2026년 2월
일
월
화
수
목
금
토
Restricted Range
Live Preview
Start on Monday
<Calendar firstDayOfWeek={1} />
2026년 4월
월
화
수
목
금
토
일
Monday Start
Live Preview

Calendar Modal Variations

이미지 예시처럼 모달 안에서 날짜를 선택할 수 있거나, 뒤로 가기 버튼을 포함할 수 있습니다.

Basic Modal
<CalendarModal open={open} onClose={...} title="날짜선택" ... />
선택: 미선택
Live Preview
With Back Button
<CalendarModal open={open} onClose={...} onBack={...} title="날짜선택" ... />
Header에 뒤로가기 버튼이 추가됩니다.
Live Preview