ComponentPicker & Select
Bắt đầu nhanh
Import Calendar từ entry công khai. Các ví dụ bên dưới thể hiện những kiểu tương tác và cấu hình được hỗ trợ.
component.tsxtsx
import { Calendar } from '@underverse-ui/underverse';Ví dụ tương tác
Dùng thử Calendar thật, xem mã ví dụ và tra cứu các prop đã được mô tả.
Đang tải ví dụ tương tác…
Tham chiếu
Tham chiếu API
Tra cứu các thuộc tính, kiểu dữ liệu được chấp nhận, giá trị mặc định và lưu ý về hành vi.
Dữ liệu được sinh từ API TypeScript công khai của thư viện. Kiểu dữ liệu, thuộc tính bắt buộc và giá trị mặc định luôn đồng bộ với mã nguồn.
Calendar
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
month | Tháng hiển thị (controlled). | Date | — |
defaultMonth | Tháng ban đầu khi uncontrolled. | Date | — |
onMonthChange | Gọi khi chuyển tháng. | (next: Date) => void | — |
value | Giá trị ngày được chọn (phụ thuộc selectMode). | Date | Date[] | { start?: Date; end?: Date } | — |
defaultValue | Giá trị ban đầu khi uncontrolled. | Date | Date[] | { start?: Date; end?: Date } | — |
onSelect | Gọi với giá trị đã chọn. | (value: Date | Date[] | { start?: Date; end?: Date }) => void | — |
selectMode | Chế độ chọn: single/multiple/range. | SelectMode | "single" |
weekStartsOn | Ngày bắt đầu tuần (0-6). | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 0 |
showWeekdays | Hiển thị tiêu đề ngày trong tuần. | boolean | true |
showHeader | Hiển thị header điều hướng tháng. | boolean | true |
size | Kích thước hiển thị. | "sm" | "md" | "lg" | "xl" | "md" |
variant | Mã nguồn chưa cung cấp mô tả bổ sung. | Variant | "default" |
events | Danh sách sự kiện hiển thị dạng chấm màu. | CalendarEvent[] | [] |
renderDay | Hàm custom render cho ô ngày. | (args: { date: Date; isCurrentMonth: boolean; isToday: boolean; isSelected: boolean; events: CalendarEvent[] }) => React.ReactNode | — |
labels | Label bản địa hoá cho tiêu đề và ngày tuần. | { weekdays?: string[]; month?: (date: Date) => string; prev?: string; next?: string; today?: string; clear?: string } | — |
display | Display mode: month grid, single week, or year | DisplayMode | "month" |
months | Number of months to render side-by-side (month mode only) | number | 1 |
showToday | Show "Today" button | boolean | false |
showClear | Show "Clear" button | boolean | false |
minDate | Minimum selectable date | Date | — |
maxDate | Maximum selectable date | Date | — |
disabledDates | Disabled dates | Date[] | ((date: Date) => boolean) | — |
dense | Dense mode with less padding | boolean | false |
animate | Animate transitions | boolean | false |
showEventBadges | Show event badges | boolean | false |
highlightWeekends | Highlight weekends | boolean | false |
weekendTextColor | Custom weekend text color class (default: text-destructive) | string | "text-destructive" |
highlightHolidays | Highlight holidays | boolean | false |
holidayTextColor | Custom holiday text color class (default: text-destructive) | string | "text-destructive" |
holidays | List of holidays to highlight | CalendarHoliday[] | VIETNAM_HOLIDAYS |
cellMode | Render mode for each day cell (compact dots vs large cell with event list) | CellMode | "compact" |
maxEventsPerDay | Max events shown per day (events cell mode) | number | 3 |
showEventCount | Show the event count badge in day cell header (events cell mode). Default: true | boolean | true |
showMonthYearPicker | Show month/year picker dropdowns in header (events cell mode). Default: false | boolean | false |
monthNames | Month names for month picker (default: English) | string[] | ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] |
yearRange | Year range for year picker [startYear, endYear] | [number, number] | — |
onEventClick | Fired when clicking an event in a day cell (events cell mode) | (event: CalendarEvent, date: Date) => void | — |
renderEvent | Customize event rendering (events cell mode) | (args: { event: CalendarEvent; date: Date }) => React.ReactNode | — |
enableEventSheet | Open a right-side Sheet when clicking an event | boolean | — |
eventSheetSize | Sheet size (right side) | "sm" | "md" | "lg" | "xl" | "full" | "md" |
renderEventSheet | Custom sheet content renderer | (args: { event: CalendarEvent; date: Date; close: () => void }) => React.ReactNode | — |
selectedEventId | Controlled selected event id (recommended to provide `event.id`) | string | number | — |
eventSheetOpen | Controlled open state for the event sheet | boolean | — |
onEventSheetOpenChange | Controlled open state handler | (open: boolean) => void | — |
onSelectedEventIdChange | Controlled selected event handler | (id: string | number | undefined) => void | — |
Hướng dẫn sử dụng
Dùng Calendar khi lựa chọn có giới hạn nhanh và an toàn hơn nhập tự do. Cần cấu hình rõ locale, giới hạn, giá trị bị vô hiệu hóa và trạng thái xóa.
Trợ năng
Khi dùng Calendar, hãy giữ trạng thái focus dễ nhận biết, cung cấp tên truy cập khi cần và kiểm tra bàn phím cùng trình đọc màn hình trong ngữ cảnh thực tế.