Calendar

Cập nhật lần cuối: 27/05/2022

Calendar là component hiển thị lịch theo các khoảng thời gian.

Properties

Name	Type	Default	Description
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: DateType, info: CellRenderInfo) => React.ReactElement		Hàm được gọi để render mỗi thứ trong trạng thái fullscreen
defaultValue	DateType		Giá trị mặc định của ngày tháng
disabledDate	(date: DateType) => 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, 0 tương ứng với từ CN)
value	DateType
onPanelChange	(date: DateType, mode: CalendarMode) => void		Hàm được gọi khi thay đổi giá trị và loại hiển thị của component
onSelect	(date: DateType, selectInfo: SelectInfo) => void		Hàm được gọi khi người dùng chọn một ngày tháng

Example

Open Sandbox

import React from "react";
import { Page, Stack, ZBox, Calendar, Text } from "zmp-ui";

export default function HomePage() {
  return (
    <Page className='section-container'>
      <Calendar />
    </Page>
  );
}

CSS Variables

Name	Default
--zaui-light-calendar-bg-color	#ffffff Copied: #ffffff
--zaui-light-calendar-title-color	#141415 Copied: #141415
--zaui-light-calendar-title-hover-color	#006af5 Copied: #006af5
--zaui-light-calendar-selected-background	#006af5 Copied: #006af5
--zaui-light-calendar-cell-text-color	#0000004d Copied: #0000004d
--zaui-light-calendar-cell-text-color	#0000004d Copied: #0000004d
--zaui-light-calendar-cell-text-color	#000000e6 Copied: #000000e6
--zaui-light-calendar-cell-selected-background	#006af5 Copied: #006af5
--zaui-light-calendar-cell-selected-text-color	#ffffff Copied: #ffffff
--zaui-light-calendar-cell-selected-background	#ebf4ff Copied: #ebf4ff
--zaui-light-calendar-cell-selected-text-color	#006af5 Copied: #006af5
--zaui-dark-calendar-bg-color	#252627 Copied: #252627
--zaui-dark-calendar-title-color	#f4f5f6 Copied: #f4f5f6
--zaui-dark-calendar-title-hover-color	#006af5 Copied: #006af5
--zaui-dark-calendar-selected-background	#141415 Copied: #141415
--zaui-dark-calendar-cell-text-color	#b9bdc140 Copied: #b9bdc140
--zaui-dark-calendar-cell-text-color	#b9bdc140 Copied: #b9bdc140
--zaui-dark-calendar-cell-text-color	#b9bdc1d9 Copied: #b9bdc1d9