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