1# calendar 2 3 4日历组件，用于呈现日历界面。 5 6> **说明：** 7> 8> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 9 10## 子组件 11 12不支持。 13 14 15## 属性 16 17支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性： 18 19| 名称 | 类型 | 默认值 | 必填 | 描述 | 20| -------------- | ------ | ----- | ---- | ---------------------------------------- | 21| date | string | 当前日期 | 否 | 当前页面选中的日期，默认是当前日期，格式为年-月-日，如"2019-11-22"。 | 22| cardcalendar | bool | false | 否 | 标识当前日历是否为卡片日历。 | 23| startdayofweek | int | 6 | 否 | 标识卡片显示的起始天，默认是星期天（取值范围：0-6）。 | 24| offdays | string | 5，6 | 否 | 标识卡片显示的休息日，默认是星期六、星期天（取值范围：0-6）。 | 25| calendardata | string | - | 是 | 卡片需要显示的月视图数据信息，包括5\*7或者6\*7格的日数据信息，格式为JSON字符串。"data"标签属性信息见**表1** calendardata的日属性。 | 26| showholiday | bool | true | 否 | 标识当前是否显示节假日信息。 | 27 28 **表1** calendardata的日属性 29 30| 名称 | 类型 | 描述 | 31| -------------- | ------ | --------------------------------------- | 32| index | int | 数据的索引，表示第几个日期。 | 33| day | int | 表示具体哪一天。 | 34| month | int | 表示月份。 | 35| year | int | 表示年份。 | 36| isFirstOfLuanr | bool | 表示是否是农历的第一天，在农历第一天的数据下绘制横线。 | 37| hasSchedule | bool | 表示是否有日程，在有日程的日期数据上绘制圆。 | 38| markLunarDay | bool | 表示节假日，农历数据会变成蓝色。 | 39| lunarDay | string | 农历日期。 | 40| lunarMonth | string | 农历月份。 | 41| dayMark | string | 表示工作日。<br>- “work”：工作日。<br>- “off”：休息日。 | 42| dayMarkValue | string | 表示具体需要显示的“班”、“休”信息。 | 43 44calendardata示例： 45 46``` 47{ 48"year":2021, 49"month":1, 50"data": [{ 51 "index": 0, 52 "lunarMonth": "十一", 53 "lunarDay": "十三", 54 "year": 2020, 55 "month ": 12, 56 "day": 27, 57 "dayMark": "work", 58 "dayMarkValue": "班", 59 "isFirstOfLunar": true, 60 "hasSchedule": true, 61 "markLunarDay": true 62 }, { 63 "index": 1, 64 "lunarMonth": "十一", 65 "lunarDay": "十四", 66 "year": 2020, 67 "month ": 12, 68 "day": 28, 69 "dayMark": "work", 70 "dayMarkValue": "班", 71 "isFirstOfLunar": true, 72 "hasSchedule": true, 73 "markLunarDay": true 74 }, { 75 "index": 2, 76 "lunarMonth": "十一", 77 "lunarDay": "十五", 78 "year": 2020, 79 "month ": 12, 80 "day": 29, 81 "dayMark": "work", 82 "dayMarkValue": "班", 83 "isFirstOfLunar": true, 84 "hasSchedule": true, 85 "markLunarDay": true 86 }, 87 ... 88 ] 89} 90``` 91 92 93 94## 样式 95 96| 名称 | 类型 | 默认值 | 必填 | 描述 | 97| ---------------- | ------------- | ---- | ---- | ------- | 98| background-color | <color> | - | 否 | 设置背景颜色。 | 99 100 101## 事件 102 103| 名称 | 参数 | 描述 | 104| -------------- | ------------ | --------------- | 105| selectedchange | changeEvent | 在点击日期和上下月跳转时触发。 | 106| requestdata | requestEvent | 请求日期时触发。 | 107 108 **表2** changeEvent 109 110| 名称 | 类型 | 描述 | 111| ------------ | ------ | ------ | 112| $event.day | string | 选择的日期。 | 113| $event.month | string | 选择的月份。 | 114| $event.year | string | 选择的年份。 | 115 116 **表3** requestEvent 117 118| 名称 | 类型 | 描述 | 119| ------------------- | ------ | -------- | 120| $event.month | string | 请求的月份。 | 121| $event.year | string | 请求的年份。 | 122| $event.currentYear | string | 当前显示的年份。 | 123| $event.currentMonth | string | 当前显示的月份。 | 124 125## 示例 126 127当前数据仅为示例数据，实际使用时请补充完整的日期数据。 128 129 130```html 131<!-- xxx.hml --> 132<div class="container"> 133 <calendar class="container_test" 134 cardcalendar="true" 135 onselectedchange="clickOneDay" 136 onrequestdata="messageEventData" 137 date="{{currentDate}}" 138 offdays="{{offDays}}" 139 showholiday="{{showHoliday}}" 140 startdayofweek="{{startDayOfWeek}}" 141 calendardata="{{calendarData}}"> 142 </calendar> 143</div> 144``` 145 146 147```css 148/* xxx.css */ 149.container { 150 flex-direction:column; 151 width: 100%; 152 height: 100%; 153 align-items:center; 154 padding-start: 4px; 155 padding-end: 4px; 156} 157.container_test { 158 background-color: white; 159} 160``` 161 162 163```json 164{ 165 "data": { 166 "currentDate": "", 167 "offDays": "", 168 "startDayOfWeek": 6, 169 "showHoliday": true, 170 "calendarData": "" 171 }, 172 "actions": { 173 "clickOneDay": { 174 "action": "router", 175 "bundleName": "com.example.calendar", 176 "abilityName": "com.example.calendar.MainAbility", 177 "params": { 178 "action": "click_month_view_event", 179 "day": "$event.day", 180 "month": "$event.month", 181 "year": "$event.year" 182 } 183 }, 184 "messageEventData": { 185 "action": "message", 186 "params": { 187 "month": "$event.month", 188 "year": "$event.year", 189 "currentMonth": "$event.currentMonth", 190 "currentYear": "$event.currentYear" 191 } 192 } 193 } 194} 195``` 196**4*4卡片** 197 198 199 200
