展示类 · Calendar
日历
日历组件,允许以日/周/月视图展示对应事件

代码演示

如何引入

日视图

日视图的日历模板,可通过 showCurrTime 控制是否显示当前时间的位置红线。

周视图

周视图的日历模板,可通过 showCurrTime 控制是否显示当前时间的位置红线。

月视图

月视图的日历模板。

多日视图

>=1.5.0
多日视图模式。 range 必传,左闭右开。

事件渲染用法

通过 events 传入需要渲染的事件,events 是一个由 event objects 组成的数组,具体形式请参考 events API。

自定义渲染

通过 dateGridRender 可以自定义渲染日期单元格/列。需要使用绝对定位。

自定义渲染事件

自定义渲染单元格样式

可以通过 dateGridRender 自定义单元格的背景,月视图的文字 zIndex 默认为 3,如需完全覆盖单元格可以设置更大的 zIndex 来实现。

API 参考

Calendar

属性说明类型默认值
dateGridRender自定义单元格/列渲染,需要绝对定位, v>=1.0.0function(dateString: string, date: Date)-
displayValue展示日期Date当前日期
events渲染事件,具体格式请参考 event objectEventObject[]-
header自定义头部内容ReactNode-
height日历高度string|number600
markWeekend区分周末列和工作日,以灰色显示booleanfalse
mode初始模式,day, week, month, range(>=1.5.0)"day" | "week" | "month" | "range"week
onClick单击日期格的回调,日视图和周视图以半小时为单位,月视图以日为单位function(e: Event, date: Date)-
onClose月视图下,展示所有 event 的卡片关闭时的回调function(e: Event)-
range多日视图模式下展示的日期范围,左闭右开 v>=1.5.0Date[]-
renderTimeDisplay自定义日/周视图下的时间文案function(time: number): ReactNode-
scrollTop日视图和周视图模式下,设置展示内容默认的滚动高度number400
showCurrTime显示当前时间booleantrue
width日历宽度string|number-

Event Object

events 是一个 event object 组成的数组,event object 约定格式如下:
当事件为全天事件时,若没有传入起始结束时间,则自动追加到 displayValue 的日期中;当事件不是全天事件时,起始结束时间至少传入一个才会被视为有效事件
注意
不同 event 的 key 值要求必填且唯一,以此控制事件的更新与重绘。
属性说明类型默认值
allDay全天事件booleanfalse
children展示日期React.node-
end事情结束的时间Date-
keyrequired 且要求唯一, v>=1.0.0string-
start事情起始的时间Date-

设计变量

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED