Calendar JS application for Lite Wearable in Harmony-OS - Huawei Developers

Article Introduction
In this article, I have explained how to develop a calendar application for Huawei Lite Wearable device using Huawei DevEco Studio and using JS language in Harmony OS. Calendar provides options to swipe to desired day, month and year.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Huawei Lite Wearable
Requirements
1) DevEco IDE
2) Lite wearable watch (Can use simulator also)
New Project (Lite Wearable)
After installation of DevEco Studio, make new project.
Select Lite Wearable in Device and select Empty Feature Ability in Template.
After the project is created, its directory as shown in image.
Integration process
Design the UI
Step 1: Add background image.
As the first step, we can create a UI that contains calendar text boxes which will filled by the dates. Create and add the background image for calculator screen using stack component.
index.hml
Code:
<stack class="stack">
<image src='/common/calendarbackground.png' class="background"></image>
</stack>
index.css
Code:
.background {
width:454px;
height:454px;
}
.stack {
width: 454px;
height: 454px;
justify-content: center;
}
Step 2: Add row of days in a week in highlighted text boxes.
Create and add a row for days from Sunday to Saturday with letters “S, M, T, W, T, F, and S”.
index.hml
Code:
<div class="days" for="{{value in days}}" tid="id">
<text class="days">{{value}}</text>
</div><strong> </strong>
index.js
Code:
days: ["S", "M", "T", "W", "T", "F", "S"],
Step 3: Add UI for calendar dates
Create and add row for 7 days and 6 weeks in a month. We need 7x6 matrix of text boxes. Use loop rendering for the boxes since all are similar boxes
Code:
<div class="containerRow" for="{{valueWeek in weeks}}" onswipe="touchMove">
<div class="datestext" for="{{value in valueWeek}}" tid="id">
<text class="datestext">{{value}}
</text>
</div>
</div>
Code:
.datestext {
display: flex;
font-size: 8px;
text-align: center;
width: 55px;
height: 40px;
border-width: 1px;
border-color: #414343;
color: #414343;
background-color: #e6e6e6;
}
More details, you can check https://forums.developer.huawei.com/forumPortal/en/topic/0201459080286730034

---

Gotta say DevCo and Harmony are getting better every day......I mean look at all this amazing applications we are able to develop and intergrate