1# calendar
2
3
4The **\<calendar>** component is used to display the calendar page.
5
6> **NOTE**
7>
8> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
9
10## Child Components
11
12Not supported
13
14
15## Attributes
16
17In addition to the [universal attributes](js-service-widget-common-attributes.md), the following attributes are supported.
18
19| Name            | Type    | Default Value  | Mandatory  | Description                                      |
20| -------------- | ------ | ----- | ---- | ---------------------------------------- |
21| date           | string | Current date | No   | Date selected on the current page. The default value is the current date in the format of YYYY-MM-DD, for example, 2019-11-22.|
22| cardcalendar   | bool   | false | No   | Whether the current calendar is a widget calendar.                          |
23| startdayofweek | int    | 6     | No   | Start day of a week on the widget calendar. The default value is Sunday. The value ranges from 0 to 6.            |
24| offdays        | string | 5, 6  | No   | Rest days of a week on the widget calendar. The default value is Saturday and Sunday. The value ranges from 0 to 6.        |
25| calendardata   | string | -     | Yes   | Data to be displayed on the monthly widget calendar. You can pass data of 5*7 or 6*7 days in the JSON format. For details about the **"data"** attribute, see Table 1.|
26| showholiday    | bool   | true  | No   | Whether to display holiday information.                          |
27
28**Table 1** "data" attributes of calendardata
29
30| Name            | Type    | Description                                     |
31| -------------- | ------ | --------------------------------------- |
32| index          | int    | Index of the data, indicating the sequence number of the date.                         |
33| day            | int    | Day.                               |
34| month          | int    | Month.                                  |
35| year           | int    | Year.                                  |
36| isFirstOfLuanr | bool   | Whether the day is the first day of the lunar calendar. The first day is underlined.            |
37| hasSchedule    | bool   | Whether there is an event scheduled for the day. If there is, a circle is drawn around the date number.                 |
38| markLunarDay   | bool   | Whether the day is a holiday, on which lunar calendar data is marked in blue.                       |
39| lunarDay       | string | Lunar date.                                  |
40| lunarMonth     | string | Lunar month.                                  |
41| dayMark        | string | Day mark.<br>- **work**: workday.<br>- **off**: rest day.|
42| dayMarkValue   | string | Text to be displayed for a workday or a rest day.                    |
43
44Example of **calendardata**:
45
46```
47{
48"year":2021,
49"month":1,
50"data": [{
51    "index": 0,
52    "lunarMonth": "11",
53    "lunarDay": "13",
54    "year": 2020,
55    "month ": 12,
56    "day": 27,
57    "dayMark": "work",
58    "dayMarkValue": "On-duty",
59    "isFirstOfLunar": true,
60    "hasSchedule": true,
61    "markLunarDay": true
62  },  {
63    "index": 1,
64    "lunarMonth": "11",
65    "lunarDay": "14",
66    "year": 2020,
67    "month ": 12,
68    "day": 28,
69    "dayMark": "work",
70    "dayMarkValue": "On-duty",
71    "isFirstOfLunar": true,
72    "hasSchedule": true,
73    "markLunarDay": true
74  },  {
75    "index": 2,
76    "lunarMonth": "11",
77    "lunarDay": "15",
78    "year": 2020,
79    "month ": 12,
80    "day": 29,
81    "dayMark": "work",
82    "dayMarkValue": "On-duty",
83    "isFirstOfLunar": true,
84    "hasSchedule": true,
85    "markLunarDay": true
86  },
87  ...
88  ]
89}
90```
91
92
93
94## Styles
95
96| Name              | Type           | Default Value | Mandatory  | Description     |
97| ---------------- | ------------- | ---- | ---- | ------- |
98| background-color | &lt;color&gt; | -    | No   | Background color.|
99
100
101## Events
102
103| Name            | Parameter          | Description             |
104| -------------- | ------------ | --------------- |
105| selectedchange | changeEvent  | A user clicks a date or switches between months.|
106| requestdata    | requestEvent | A date is requested.       |
107
108**Table 2** changeEvent
109
110| Name          | Type    | Description    |
111| ------------ | ------ | ------ |
112| $event.day   | string | Selected day.|
113| $event.month | string | Selected month.|
114| $event.year  | string | Selected year.|
115
116**Table 3** requestEvent
117
118| Name                 | Type    | Description      |
119| ------------------- | ------ | -------- |
120| $event.month        | string | Requested month.  |
121| $event.year         | string | Requested year.  |
122| $event.currentYear  | string | Current year.|
123| $event.currentMonth | string | Current month.|
124
125## Example
126
127The following examples are not intended as copy-paste-ready. Further customization is required.
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": "EntryAbility",
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
197