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.
| 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.
// 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.
| 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.
| T2 | T3 | T4 | T5 | T6 | T7 | CN |
|---|---|---|---|---|---|---|
Nhiều ngày & ngày bị khoá
mode="multiple"; disabled={{ dayOfWeek: [0, 6] }} khoá cuối tuần.
Cách dùng
- 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 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. |
| requiredboolean | Mặc định: false | Bấm lại ngày đã chọn không bỏ chọn. |
| min / maxnumber | Mặc định: — | Số ngày ít nhất / nhiều nhất (multiple), số đêm (range). |
| disabled / hiddenCalendarMatcher | CalendarMatcher[] | Mặc định: — | Ngày bị khoá / bị ẩn: Date, Date[], DateRange, { before }, { after }, { dayOfWeek }, hàm (date) => boolean. |
| modifiers / modifiersClassNamesRecord<string, CalendarMatcher> / Record<string, string> | Mặc định: — | Nhóm ngày có tên và class cho từng nhóm, vd. { booked: [...] } và { booked: "line-through" }. |
| month / defaultMonth / onMonthChangeDate / Date / (month: Date) => void | Mặc định: — | Tháng đang hiện. |
| startMonth / endMonthDate | Mặc định: — | Giới hạn điều hướng tháng. |
| numberOfMonthsnumber | Mặc định: 1 | Số tháng hiển thị. |
| captionLayout"label" | "dropdown" | "dropdown-months" | "dropdown-years" | Mặc định: "label" | Tiêu đề tháng hay hộp chọn tháng / năm. |
| showOutsideDaysboolean | Mặc định: true | Hiện ngày của tháng trước / sau (foreground-4). |
| weekStartsOn0 | 1 | 2 | 3 | 4 | 5 | 6 | Mặc định: — | Ngày đầu tuần (0 = Chủ nhật); mặc định theo locale. |
| localeCalendarLocale | Mặc định: — | Locale date-fns, nhập từ react-day-picker/locale; mặc định lấy từ messages.calendar.locale. |
| timeZonestring | Mặc định: — | Múi giờ IANA, vd. "Asia/Ho_Chi_Minh". |
| excludeDisabled / resetOnSelectboolean | Mặc định: — | range: không vắt qua ngày bị khoá / bấm sau khi đủ khoảng thì bắt đầu khoảng mới. |
| navLayout / hideNavigation / disableNavigation / pagedNavigation / reverseMonths / reverseYears"around" | "after" / boolean | Mặc định: — | Vị trí và hành vi của nút điều hướng tháng. |
| fixedWeeks / showWeekNumber / ISOWeek / firstWeekContainsDate / hideWeekdays / todayboolean / 1 | 4 / Date | Mặc định: — | Lưới ngày: luôn 6 tuần, số tuần, tuần ISO, tuần đầu năm, ẩn tên thứ, ngày được đánh dấu là hôm nay. |
| autoFocus / footer / dir / role / id / title / langboolean / ReactNode / string | Mặc định: — | Focus khi mở, chân lịch, hướng đọc và thuộc tính HTML. |
| classNames / components / formatters / labelsreact-day-picker | Mặc định: — | Đã ngừng hỗ trợ: prop của react-day-picker, vẫn được chuyển tiếp nhưng có cảnh báo khi dev và bị bỏ ở 1.0 (#371). |
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 |
|---|---|---|
| localeCalendarLocale | 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 | Mặc định (tiếng Anh)undefined | messagesVivi |