Skip to main content

Calendar

mfe-lib-shared에서 제공하는 캘린더 컴포넌트입니다.
하루 또는 기간을 선택할 때 쓰입니다. 예약·일정·필터 날짜 등 사용자가 날짜를 고르는 흐름에서 자주 사용합니다.
구현은 shadcn/ui Calendar와 같이 React DayPicker를 기반으로 합니다.


shadcn/ui 참고

상세 설치·예제·API는 공식 문서를 참고하세요.

문서에서 다루는 내용 예시

  • mode: "single"(하루) / "range"(기간) 등 선택 방식
  • selected, onSelect: 선택 상태와 변경 핸들러
  • captionLayout="dropdown": 월·연도 드롭다운 네비게이션
  • timeZone: 선택한 날짜가 하루 밀리는 현상이 있을 때, 사용자 로컬 타임존을 넘겨 보정 (문서의 Note 참고)
  • Date Picker와 조합하는 패턴, 셀 크기(--cell-size), 주차 번호(showWeekNumber) 등

자세한 prop·동작은 React DayPicker 문서를 함께 보면 됩니다.


Calendar 인터랙티브 예제