Calendar

󰯡

September󰯑

2026󰯑

󰯯

Sun

Mon

Tue

Wed

Thu

Fri

Sat

303112345

6789101112

13141516171819

20212223242526

27282930123

45678910

계약

Overview

Machine-readable contract from Component Spec.

component: calendarexport: Calendarversion: 1attributes: data-refineui=calendar

Anatomy

Part	data-refineui
root	calendar
day	calendar-day

States

Scope	Category	Values
component	pseudo	focus-visible
component	environment	forced-colors, dir

Accessibility

Slot	Element	Role
calendar	div	grid
calendar-day	button	gridcell

Keyboard

Key	Action	Native
Enter	activate	true
Space	activate	true

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { Calendar } from "@refineui/react";

<Calendar value={selectedDate} onChange={setSelectedDate} />

<Calendar
  mode="range"
  rangeStart={startDate}
  rangeEnd={endDate}
  onRangeChange={(start, end) => {
    setStartDate(start);
    setEndDate(end);
  }}
/>

<Calendar weekStartsOn={1} defaultMonth={new Date(2024, 0)} />

API 레퍼런스

Prop	Default	Type	Description
mode	"single"	"single" | "range"	선택 모드.
value	—	Date	제어형 선택 날짜(single 모드).
onChange	—	(date: Date) => void	날짜 변경 시 이벤트 핸들러(single 모드).
rangeStart	—	Date	제어형 범위 시작 날짜(range 모드).
rangeEnd	—	Date	제어형 범위 종료 날짜(range 모드).
onRangeChange	—	(start?: Date, end?: Date) => void	범위 변경 시 이벤트 핸들러(range 모드).
weekStartsOn	0	0 | 1	주의 첫 요일: 0(일요일) 또는 1(월요일).
defaultMonth	—	Date	처음에 표시할 월.