Thành phần
Calendar
Month grid on react-day-picker: hairline weeks, ink-fill selection, heavy-rule today, Barlow Condensed numerals, 44px days.
Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.
Xem trước
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Install
bash
npx shadcn add @eloquent/calendarThis adds react-day-picker (Base UI has no calendar part).
Usage
tsx
import * as React from "react";
import { enGB } from "react-day-picker/locale";
import { Calendar } from "@/components/ui/calendar";
const [date, setDate] = React.useState<Date | undefined>();
<Calendar
mode="single"
selected={date}
onSelect={setDate}
locale={enGB}
labels={{
labelPrevious: () => "Go to the previous month",
labelNext: () => "Go to the next month",
}}
/>The component carries no English text of its own. Pass locale for month and weekday names and labels for the accessible names of the navigation buttons and day buttons. Every other prop is react-day-picker's.
States
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| State | Treatment |
|---|---|
| Default | 44px days, Barlow Condensed numerals, hairlines between weeks and columns |
| Selected | Ink fill, paper text, aria-selected on the cell |
| Today | 3px heavy rule under the numeral (paper on an ink fill) |
| Range | Ink ends, tint-1 between |
| Disabled | halftone, struck through, cursor-not-allowed |
| Outside month | halftone |
| Focus | 2px ink outline, 2px offset |
| Navigation buttons | Ink fill on press; no hover effect |
Keyboard
| Key | Action |
|---|---|
| Tab | Moves to the navigation buttons, then to the one day in the grid (the selected day, else today) |
| Arrow Left / Right | Previous / next day |
| Arrow Up / Down | Previous / next week |
| Home / End | First / last day of the week |
| Page Up / Page Down | Previous / next month |
| Shift + Page Up / Page Down | Previous / next year |
| Enter / Space | Selects the focused day |
Vietnamese
| Th 2 | Th 3 | Th 4 | Th 5 | Th 6 | Th 7 | CN |
|---|---|---|---|---|---|---|
The VI example passes the vi locale from react-day-picker/locale and Vietnamese labels.
Ink adaptation
Upstream's rounded accent cells, primary-coloured selection and ghost buttons are replaced by hairlines, an ink fill for the selection and a heavy rule for today. Hover is removed from the days and the navigation buttons. react-day-picker's own stylesheet is not used.