Calendar
import { Calendar } from "zmp-ui";
Dùng để hiển thị lịch theo các khoảng thời gian.
Tips
Nếu cần chọn ngày, vui lòng sử dụng DatePicker.
Ví dụ
Bảng thuộc tính
| Property | Type | Required | Description |
|---|---|---|---|
| disabledDate | (date: Date) => boolean | No | Hàm được gọi để kiểm tra xem ngày tháng được chỉ định có cho phép chọn không |
| cellRender | CellRender | No | Hàm được gọi để render nội dung trong mỗi ô ngày tháng không bao gồm tiêu đề |
| fullCellRender | CellRender | No | Hàm được gọi để render nội dung trong mỗi ô ngày tháng bao gồm cả tiêu đề |
| daysOfWeekRender | (date: Date, info: CellRenderInfo) => React.ReactElement | No | Hàm được gọi để render mỗi thứ trong trạng thái fullscreen |
| headerRender | HeaderRender | No | Hàm được gọi để render tiêu đề của component |
| value | Date | No | |
| defaultValue | Date | No | Giá trị mặc định của ngày tháng |
| locale | string | No | Ngôn ngữ được sử dụng cho component |
| fullscreen | boolean | No | Kiểu hiển thị của component |
| startOfWeek | '0' | '1' | '2' | '3' | '4' | '5' | '6' | No | Ngày bắt đầu của tuần (từ 0 đến 6, tương ứng với từ CN đến thứ 2) (default: 0) |
| numberOfWeek | 'auto' | number | No | Số lượng tuần hiển thị trong tháng (mặc định là "auto") (default: "auto") |
| dayOfWeekNameFormat | 'short' | 'long' | No | Định dạng của tên ngày trong tuần (mặc định là "short") (default: "short") |
| dayOfWeekNameRender | (day: number) => string | React.ReactElement | No | Hàm được gọi để render tên ngày trong tuần |
| onPanelChange | (date: Date, mode: CalendarMode) => void | No | Hàm được gọi khi thay đổi giá trị và loại hiển thị của component |
| onSelect | (date: Date, selectInfo: SelectInfo) => void | No | Hàm được gọi khi người dùng chọn một ngày tháng |
| autoHeight | boolean | No | Chiều cao của Calendar sẽ hiển thị theo panel hiện tại |