캘린더

캘린더 (Calendar)

하나의 날짜나 날짜 범위를 선택하기 위한 인라인 캘린더를 표시할 때 사용하는 컴포넌트예요. DatePicker의 인라인 변형이에요.

출처: 문서

본문

사용법 (Usage)

캘린더는 DatePicker 컴포넌트의 인라인 변형이에요. DatePicker.Root에 inline prop을 설정하면 인풋, positioner, content 파트 없이 캘린더를 페이지에 직접 렌더링해요.

import { DatePicker } from "@chakra-ui/react"

<DatePicker.Root inline>
  <DatePicker.View view="day">
    <DatePicker.Header />
    <DatePicker.DayTable />
  </DatePicker.View>
  <DatePicker.View view="month">
    <DatePicker.Header />
    <DatePicker.MonthTable />
  </DatePicker.View>
  <DatePicker.View view="year">
    <DatePicker.Header />
    <DatePicker.YearTable />
  </DatePicker.View>
</DatePicker.Root>

예제 (Examples)

크기 (Sizes)

size prop을 사용해 캘린더 셀과 컨트롤 크기를 제어할 수 있어요.