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
| Compatible with all platforms | - |
| 年月切换 | changeMonth | object
| 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) 切换年月 |