Calendar

Calendar hiển thị lưới ngày theo tháng để chọn một ngày, nhiều ngày hoặc một khoảng ngày.

Dựng trên react-day-picker v10 với giao diện Fluent: ô ngày 32px bo 4px, hôm nay chữ brand đậm kèm vạch dưới, ngày chọn nền brand, khoảng giữa tint brand-background-2. Mặc định tiếng Việt, tuần bắt đầu Thứ Hai; nhận mọi prop của DayPicker (mode, selected, onSelect, disabled, numberOfMonths…).

Tháng Mười Một 2026

T2	T3	T4	T5	T6	T7	CN

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX

// npm install yugen-uiimport { Calendar } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Tháng Mười Một 2026

T2	T3	T4	T5	T6	T7	CN

Chọn khoảng

mode="range": ngày đầu / cuối nền brand, khoảng giữa tint brand.

Tháng Mười Một 2026

T2	T3	T4	T5	T6	T7	CN

Số ngày làm việc đã chọn: 0

Nhiều ngày & ngày bị khoá

mode="multiple"; disabled={{ dayOfWeek: [0, 6] }} khoá cuối tuần.

Cách dùng

Nên

Dùng Calendar trực tiếp khi lịch là nội dung chính (đặt lịch, chọn khoảng nghỉ).
Khoá ngày không hợp lệ bằng disabled thay vì báo lỗi sau khi chọn.

Không nên

Không dùng Calendar để nhập ngày sinh xa hiện tại — cho phép gõ hoặc dùng dropdown năm (captionLayout="dropdown").
Không hiển thị quá 2 tháng cạnh nhau trên màn hình hẹp.

Props

Prop · Kiểu	Mặc định	Mô tả
mode"single" \| "multiple" \| "range"	Mặc định: —	Kiểu chọn.
selected / onSelectDate \| Date[] \| DateRange	Mặc định: —	Giá trị theo mode.
disabledMatcher \| Matcher[]	Mặc định: —	Ngày bị khoá (Date, { before }, { after }, { dayOfWeek }…).
numberOfMonthsnumber	Mặc định: 1	Số tháng hiển thị.
showOutsideDaysboolean	Mặc định: true	Hiện ngày của tháng trước / sau (foreground-4).
localeDayPickerLocale	Mặc định: vi	Ngôn ngữ; nhập từ react-day-picker/locale.
…DayPickerProps	Mặc định: —	Mọi prop khác của react-day-picker v10.

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.calendar

Khoá · Kiểu	Mặc định (tiếng Anh)	messagesVi
localeLocale \| undefined Locale của react-day-picker: tên tháng / thứ, nhãn trợ năng của nút và ô ngày, ngày đầu tuần. Prop `locale` của Calendar vẫn ưu tiên hơn. `undefined` dùng locale en-US có sẵn trong react-day-picker.	Mặc định (tiếng Anh)`undefined`	messagesVi`vi`