Calendar

󰯡

September󰯑

2026󰯑

󰯯

Sun

Mon

Tue

Wed

Thu

Fri

Sat

303112345

6789101112

13141516171819

20212223242526

27282930123

45678910

Contract

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

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

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 Reference

Prop	Default	Type	Description
mode	"single"	"single" | "range"	Selection mode.
value	—	Date	Controlled selected date (single mode).
onChange	—	(date: Date) => void	Event handler when date changes (single mode).
rangeStart	—	Date	Controlled range start date (range mode).
rangeEnd	—	Date	Controlled range end date (range mode).
onRangeChange	—	(start?: Date, end?: Date) => void	Event handler when range changes (range mode).
weekStartsOn	0	0 | 1	First day of week: 0 (Sunday) or 1 (Monday).
defaultMonth	—	Date	Initially displayed month.