Calendar

WdCalendar

Applicable Scenarios

For flat display of calendar data, such as attendance data display and schedule display.

Basic Capabilities Description

In the display configuration properties, multiple dates can be added to gray out or mark with dots the corresponding dates.

Example

Interactive Preview

Properties

External properties received by the component

Property Name	Property Identifier	Type	Description

展示年月	initMonth	number
选中日期	value	number
最早可选日期	start
最晚可选日期	end
展示配置	configData	array	可设置多个不同日期的特殊显示效果 Default value: []
时间控制器	initVisible	boolean	显示切换年月的操作按钮 Default value: true

Events

Events exposed by the component. You can listen to component events to trigger external actions

Event Name	Event Code	Event Output Parameters event.detail	Applicable Scenarios	Description

选中日期	change	object value: number 日期	Compatible with all platforms	-
年月切换	changeMonth	object value: number 年月	Compatible with all platforms	-

Property API

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name	Property Identifier	Type	Description

展示年月	initMonth	number
选中日期	value	number
展示配置	configData	array	可设置多个不同日期的特殊显示效果
时间控制器	initVisible	boolean	显示切换年月的操作按钮

Method API

Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()

Method Name	Method Identifier	Parameters	Method Description

设置选中日期	setValue	number日期	通过 $w.id1.setValue(1688140800000) 设置选中日期
切换年月	setInitMonth	number年月	通过 $w.id1.setInitMonth(1688140800000) 切换年月