Calendar ListView in HarmonyOS

Calendar plays an important part in Application development, every app needs a calendar to book slots or appointments. In those cases, the entire app is solely dependent on the calendar factor from booking, notifications, and viewing dates.

In this article, we will walk through about CalendarListView Library and how to implement the CalendarListView in HarmonyOS or how to utilize it to the maximum under various scenarios.

The CalendarListView library consists of two many features one being the CalendarList and the other being the DatePicker. This is just not a normal picker it consists of day, month, and year in the Custom user interface.

let’s see the usage of the CalendarListview Library in HarmonyOS Mobile App and the setup required.

If you are new to HarmonyOS then do check out the articles about HarmonyOS here.

More info on the CalendarListview library can be found here

Step by Step Implementation

1.DevEco Studio

Here we would be using DevEco studio IDE which is designed exclusively to run HarmonyOS applications, if you haven’t installed one then you can get it from the official link with the SDK. Also, we have a step by step instructions for the environment setup available here.

2. Project Creation

Once you have the DevEco Studio up running you can create a select a ”File” -> New -> New Project Option, then you are presented with multiple templates to choose from, select the template as shown below which is Empty Ability.

As a next step, you will have to “Configure the Project” with the project details, path and ensure to select

• Language as Java and
• API version to 5

After the initial setup, you are ready to start working on the application.

3. Dependency

Next add the CalendarListView Dependency, in order to use the library in your HarmonyOS mobile app, you need to first install it by adding the below dependency in your entry/build.gradle file.

implementation 'io.openharmony.tpc.thirdlib:CalendarListview:1.0.2'

4. Define layout via XML

<?xml version="1.0" encoding="utf-8"?>
<com.andexert.calendarlistview.library.DayPickerView
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:pickerView"
    ohos:height="match_parent"
    ohos:width="match_parent"
/>

5. Now we can add the java API for customization as shown below.

dayPickerView = (DayPickerView) findComponentById(ResourceTable.Id_pickerView);
dayPickerView.setController(new DatePickerController() {
    @Override
    public int getMaxYear() {
        return 2023;
    }

    @Override
    public void onDayOfMonthSelected(int year, int month, int day) {
    }

    @Override
    public void onDateRangeSelected(SimpleMonthAdapter.SelectedDays<SimpleMonthAdapter.CalendarDay> selectedDays) {

    }
});

We have a set of public method that could be used as listed below.

• getDaysInMonth()
• getMaxYear()
• onDayOfMonthSelected()
• onDateRangeSelected()
• setController()
• getSelectedDays()
• setDay()
• getDate()
• SelectedDays

List of XML attributes supported for CalendarListview

Below is the list of XML attributes that are supported by the library

The first use case is the color change of the current date, using the below snippet.

• Add the property — ohos:colorCurrentDay with the required color.

<com.andexert.calendarlistview.library.DayPickerView
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:pickerView"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:colorCurrentDay="#00ff04"/>

The second use case is to change the color of the selected date, using the below snippet.

• Add the property — ohos:colorSelectedDayText with the required color.

<com.andexert.calendarlistview.library.DayPickerView
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:pickerView"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:colorCurrentDay="#00ff04"
    ohos:colorSelectedDayText="#c300ff"
    />

You get the above display on the emulator.

The third use case is to change the color of the displayed month, using the below snippet.

• Add the property — ohos:colorMonthName with the required color.

<?xml version="1.0" encoding="utf-8"?>
<com.andexert.calendarlistview.library.DayPickerView
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:pickerView"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:colorCurrentDay="#00ff04"
    ohos:colorSelectedDayText="#c300ff"
    ohos:colorMonthName="#89c940"
    />

By using the above snippet you get the below display on the emulator.

By now you must have got an idea of how to use CalendarListviewLayout in HarmonyOS and how to add variations like changing colors on the selected date or range of dates, months.

More info on the CalendarListview library can be found here

Check out more articles on HarmonyOS here.