Calendar

WdCalendar

Applicable Scenarios

For tiled 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

Show year and month	initMonth	number
Selected date	value	number
Earliest selectable date	start
Latest selectable date	end
Show configuration	configData	array	Set multiple unique display effects for different dates Default value: []
Time Controller	initVisible	boolean	Display the year and month switchover button 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

Selected date	change	object value: number 日期	Compatible with all platforms	-
Year and month switchover	changeMonth	object value: number 年月	Compatible with all platforms	-

Properties 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

Show year and month	initMonth	number
Selected date	value	number
Show configuration	configData	array	Set multiple unique display effects for different dates
Time Controller	initVisible	boolean	Display the year and month switchover button

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

Set selected date	setValue	number日期	Set the selected date via $w.id1.setValue(1688140800000)
Year and month switchover	setInitMonth	number年月	Switch the year and month via $w.id1.setInitMonth(1688140800000)