DEV Community: Rory-lhj

HarmonyOSNext-The Principles of Decorators in HarmonyOS and Custom Decorators

Rory-lhj — Wed, 04 Jun 2025 11:40:44 +0000

1. What are Decorators in HarmonyOS?

**
In ArkTS, Decorators are special declarations that annotate and modify classes, methods, properties, etc.

As an extended programming language based on TypeScript, ArkTS inherits TypeScript's decorator support. They are tools for metaprogramming, enabling developers to add extra functionality without altering original code structures. For example, in HarmonyOS development, decorators define component properties, lifecycle methods, etc. The @Component decorator marks a class as a HarmonyOS component class.

Key decorators in HarmonyOS include:

State Decorators (V1 & V2): State, Prop, Link, ObservedV2, etc.
Component Decorators: Entry、 CustomDialog、 Component, Builder, etc.

2. Basic Principles of Decorators

**
ArkTS implements decorators as functions that extend code non-invasively. They fall into three main types:
Class Decorators
Declared above classes, they take the class constructor as an argument and can:

Modify the class constructor
Add properties and methods to the class
Attach metadata annotations to the class


function logDecorator(constructor: Function) {
  console.log(`Class ${constructor.name} is created.`);
}

@logDecorator
class MyComponent {
  constructor() {
    console.log('MyComponent instance is created.');
  }
}

const myComponent = new MyComponent();

Method Decorators are applied to class methods and execute when the method is defined. They accept three parameters: the target object, the method name, and the method descriptor. Method decorators can modify method behavior, such as adding logging, performing permission checks, or implementing throttling/debouncing. In the OpenHarmony open-source system, referring to the system camera source code, a custom method decorator is implemented as follows. However, in HarmonyOS, ArkTS fails strict type checking for any, rendering this syntax incompatible.


/*
 * Copyright (c) 2023 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { Log } from '../../utils/Log';

const TAG = '[Decorators]:'

export function debounce(timeout: number) {
  return function inner(target: any, propKey: string, descriptor: PropertyDescriptor) {
    let curFunc: number = 0;
    const original = descriptor.value;
    descriptor.value = function (...args: string[]) {
      Log.log(`${TAG} debounce invoke ${propKey} curFunc: ${curFunc}`);
      curFunc && clearTimeout(curFunc);
      curFunc = setTimeout(() => original.call(this, ...args), timeout);
    };
  };
}

export function throttle(waitTime: number) {
  return function inner(target: any, propKey: string, descriptor: PropertyDescriptor) {
    let lastTime: number = 0;
    const original = descriptor.value;
    descriptor.value = function (...args: string[]) {
      let curTime = Date.now();
      Log.log(`${TAG} throttle invoke ${propKey} timeInterval: ${curTime - lastTime}`);
      if (curTime - lastTime >= waitTime) {
        original.call(this, ...args);
        lastTime = curTime;
      }
    };
  };
}

Property Decorators are applied to class properties and execute when the property is defined. They accept two parameters: the target object and the property name. Property decorators can modify property accessors, such as adding validation logic or implementing caching. However, in HarmonyOS, ArkTS fails strict type checking for any, rendering this syntax incompatible.


function positiveNumber(target: any, propertyKey: string) {
  let value: number;
  const getter = function () {
    return value;
  };
  const setter = function (newValue: number) {
    if (newValue < 0) {
      throw new Error(`${propertyKey} must be a positive number.`);
    }
    value = newValue;
  };
  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true
  });
}

class MyModel {
  @positiveNumber
  age: number = 20;
}

const myModel = new MyModel();
myModel.age = -1;

3. How to Define Custom Decorators in HarmonyOS

As discussed, HarmonyOS enforces strict ArkTS syntax rules where any and unknown types are disallowed. Therefore, we must use Object to replace the any type for the target parameter.

The value property in PropertyDescriptor is also of type any, which works in standard TypeScript but requires a workaround in ArkTS. We achieve this by accessing the value property via the Function type, then assigning target: Object, key: string, and descriptor: PropertyDescriptor using the rest parameters syntax (...args).

...args is the rest parameters syntax in JavaScript and TypeScript (upon which ArkTS is based).

To define a class decorator in HarmonyOS, follow this pattern. The same principle applies to custom property decorators:


function methodLogger(target: Object, key: string, descriptor: PropertyDescriptor) {
  const originalMethod: Function = descriptor.value;
  descriptor.value = (...args: Object[]) => {

    console.log(`Calling ${target.constructor.name} method ${key} with argument: ${args}`)
    const result: Object = originalMethod(...args)
    console.log(`Method ${key} returned: ${result}`)
    return result
  }
  return descriptor;
}

@Entry
@Component
struct DecoratorDemoComponent {
  @State message: string = 'Hello HarmonyOS';


  @methodLogger
  private processData(input: string): string {
    console.log('doing...');
    return `：${input.toUpperCase()}`;
  }


  aboutToAppear() {
    const processedResult: string = this.processData('decorator demo');
    console.log('res：', processedResult);
    this.message = processedResult;
  }

  build() {
    Column({ space: 30 }) {
      Text(this.message)
        .fontSize(24)
        .margin(10);

      Button('fun1')
        .onClick(() => this.processData('button click'))
        .margin(10);
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}

HarmonyOSNext — — Cangjie Basic Syntax and Structure

Rory-lhj — Thu, 22 May 2025 12:48:51 +0000

This article will delve into the basic syntax and structure of the Cangjie language. These fundamental knowledge lay a solid foundation for writing efficient and maintainable code. By understanding statement structures, expressions, comments, and data types, you can use Cangjie for programming with greater confidence.
Keywords
Cangjie basic syntax
Statement structure
Expression
Comment
Data type
Control structure

I. Basic Syntax
1.1 Statement Structure
The statement structure in Cangjie forms the fundamental building blocks of code, including assignment statements, conditional statements, and loop statements.

Assignment Statements: Used to assign values to variables.

let x: Int64 = 10
println(x)

output:10

Conditional Statements: Used to control the execution flow of a program.

if (x > 0) {
    println("x is +")  
}
output: x is +

for (i in 1..=5) {
    println(i) 
}

output: 1 2 3 4 5

Please translate the following text into English.

1.2 Expressions
Cangjie supports various expressions, including arithmetic operations and logical operations.

Arithmetic Operations: Such as addition, subtraction, etc.

let a: Int64 = 1
let b: Int64 = 2
let sum: Int64 = a + b
println(sum)

output:3

Logical Operations: Such as AND, OR, etc.

if (a > 0 && b < 10) {
    println("a > 0 && b < 10") 
}

output:a > 0 && b < 10

II. Variable Naming and Identifiers Overview
In the Cangjie programming language, developers assign names to program elements, which are called identifiers. Identifiers are categorized into ordinary identifiers and raw identifiers, each adhering to distinct naming rules.

III. Comments
Comments are used to improve code readability and maintainability. In Cangjie, there are two types of comments:

3.1 Single-Line Comments
Single-line comments use // and can be used to explain code or temporarily block code lines.

println("Welcome to Cangjie!")
output:Welcome to Cangjie!

3.2 Multi-Line Comments
Multi-line comments are enclosed within /* */ and are suitable for longer explanations or blocking multiple lines of code.


func factorial(n: Int): Int {
}

IV. Data Types
Cangjie supports several data types, including:

Integer Types、Floating-Point Types、String Type、Boolean Type

let age: Int64 = 25
let height: Float64 = 1.75
let name: String = "Cangjie" 
let isAdult: Bool = true

V. Control Structures
Control structures are used to manage the execution flow of a program, including conditional logic and loop constructs.

Use if, else if, and else for conditional judgment.

The for loop and while loop are used to repeatedly execute code blocks.

Summary
This article provides a comprehensive introduction to the basic syntax and structure of the Cangjie language, including statement structures, expressions, comments, data types, and control structures. Mastering these fundamental concepts will lay a solid foundation for subsequent programming learning and serve as the basis for creating efficient and maintainable code.

HarmonyOSNext——Write the First Cangjie Program

Rory-lhj — Thu, 22 May 2025 11:43:42 +0000

This article details the entire process of creating the first Cangjie project, writing, and running the first Cangjie program on the Mac system. It covers project creation, code writing, program running and debugging, as well as rerunning after code modifications. Through this article, you will master the basic operations of Cangjie projects, further consolidate the configuration of the development environment, and take the first step in Cangjie programming.

Keywords

Cangjie program writing
First Cangjie project creation
Cangjie code debugging
VSCode usage guide
Mac Cangjie development
Cangjie project running

I. Create the First Cangjie Project

1.1 Create a Project

Open VSCode and use the shortcut Shift + Command + P to open the command palette.
Type cangjie and select the Create Cangjie Project option.
Select the "Create CJNative Cangjie Project" option.
In the pop-up menu, select the "Create Executable Output Cangjie Project" option.
Select the project path, such as /Users/username/Projects/CangjieProject, enter the project name, and then press Enter.
After confirming the creation, the main.cj file will be automatically generated.

1.2 Open the Project
Open the project folder using VSCode.

In the Explorer sidebar, navigate to the src/main.cj file and view the default code:

main(): Int64 {
    println("hello world")
    return 0
}

1.3 Run the Project
1.3.1 Configure the Environment
Open the terminal in VSCode.

Enter the following command to configure the environment:
source /Users/cangjie/envsetup.sh

1.3.2 Execute the Program

Enter the following command in the terminal to run the project:
cjpm run
Check the terminal output to ensure it displays:
hello world

1.3.3 Modify and Rerun the Program

Open the src/main.cj file and modify the println statement, for example:

main(): Int64 {
    println("hello world")
    return 0
}

After saving the file, return to the terminal and ensure the environment is configured (if not, re-execute the source command).

Run the program again:
cjpm run
Check the terminal output to ensure it displays:
hello world

II. Code Debugging

Debugging is an essential part of the programming process, enabling you to efficiently identify and fix errors in your code. Below are the steps to debug a Cangjie program in VSCode:
2.1 Set Breakpoints
Open the src/main.cj file.
Click on the left side of the code line where you want to pause execution to set a breakpoint. For example, set a breakpoint on the line println("hello world").
2.2 Start Debugging
In VSCode, click the Run and Debug icon in the left activity bar or use the shortcut Control + Shift + D.
Click the Start Debugging button (green arrow) or press F5.
The program will run and pause at the breakpoint, allowing you to inspect variables and the program state.
2.3 Inspect Variables and Call Stack
While paused at a breakpoint, use the Variables panel to view current variable values.
Use the Call Stack panel to trace the sequence of function calls.
Step through the code using Step Over (F10), Step Into (F11), and Step Out (Shift + F11).
2.4 End Debugging
Click the Stop button or use the shortcut Shift + F5 to terminate the debugging session.

Summary

This guide walked you through creating your first Cangjie project, verifying the correct configuration of your development environment, and successfully writing, running, and modifying your first Cangjie program. These steps lay a solid foundation for Cangjie development and introduce code debugging in VSCode to enhance programming efficiency and code quality.

HarmonyOSNext-The Basic Composition of a Cangjie Program

Rory-lhj — Thu, 22 May 2025 09:58:54 +0000

This article systematically introduces the basic components of a program in the Cangjie programming language, covering the definition of the main function, the use of packages and modules, variable types, scope, and code structure principles. It aims to help developers understand the overall structure of Cangjie programs and adopt best practices in software design. Understanding these components is essential for writing clean, maintainable, and modular code in Cangjie.

🔑 Keywords

Program entry point
Main function
Packages and modules
Variable types and scope
Value types and reference types
Code structure and specifications
Mutability and visibility control
Top-level declarations and type definitions I. Program Entry Point and Main Function In Cangjie, the main function serves as the entry point of a program and is responsible for initializing runtime logic and signaling exit status.

1.1 Definition of the Main Function

main(): Int64 {
    return 0
}

This simple main function returns 0, indicating a successful termination. Like in other statically typed languages, return values from main() help indicate success or failure to the operating system or invoking shell.

1.2 Parameters and Return Values
The main function can optionally receive arguments via an Array parameter.

The return type is typically Int64 but may also be Unit if no explicit exit code is required.

main(args: Array<String>): Int64 {
    println("Received ${args.length} arguments.")
    return 0
}

⚠️ Arguments are passed when executing the program from a shell or script environment.

II. Packages and Modules
Modular programming in Cangjie is achieved using packages and modules, allowing better code organization and reusability.

2.1 Defining Packages
Use the package keyword at the top of the file to declare a package:

package cjcDemo
Packages are typically structured based on project hierarchy and logical function grouping.

2.2 Importing Modules
Use the import keyword to include other modules or libraries:

import std.math.*
import utils.io.FileReader
🔍 Wildcard imports are supported (*), but it's recommended to import only required symbols to maintain clarity and avoid naming conflicts.

III. Program Structure and Top-Level Scope
Cangjie program files use the .cj extension. The top-level scope allows declarations of global constants, functions, and types that are accessible across the file or package.

3.1 Global and Local Scope


let globalVar = 2023

func globalFunc() {
    println(globalVar)
}

main(): Int64 {
    globalFunc()
    return 0
}

Global variables are accessible throughout the file or module.

Local variables declared within a function or block are only valid within that context.

3.2 Nested Scope and Shadowing

let x = 10
func testScope() {
    let x = 5  // Shadows outer x
    println(x) // Prints 5
}

Inner variables with the same name override outer definitions within their local scope.

IV. Variable Definition and Usage
Cangjie variables are defined with strong typing and explicit mutability.

4.1 Modifiers
let – immutable constant

var – mutable variable

public / private – visibility control

static – shared at the type level

Example:

let a: Int64 = 20
var b: Int64 = 12
b = 23
println("${a} ${b}")
Output: 20 23

🧠 Best practice: use let by default unless mutation is required.

V. Value vs Reference Types
Cangjie distinguishes between value types (e.g., Int64, Bool) and reference types (e.g., class, struct with heap semantics). Understanding this distinction is important for performance tuning and memory safety.

struct Point {
    x: Int64
    y: Int64
}

class User {
    name: String
    score: Int64
}

main(): Int64 {
    let p = Point(x: 3, y: 4)
    let u = User(name: "Alice", score: 95)

    println("Point: (${p.x}, ${p.y})")
    println("User: ${u.name} scored ${u.score}")
    return 0
}

struct creates value types (copied on assignment).

class creates reference types (shared references).

By mastering these fundamentals, developers can confidently build scalable and maintainable Cangjie programs across various domains such as systems programming, education, and cloud-native development.

HarmonyOSNext -Schedule Management

Rory-lhj — Wed, 21 May 2025 13:10:43 +0000

Schedule Management
A schedule refers to the arrangement of specific events or activities. Schedule management involves planning and controlling these events and activities to more effectively utilize relevant resources, improve productivity and efficiency, and enable people to better manage their time and tasks.
In Calendar Kit, a schedule [Event] belongs to a corresponding calendar account [Calendar]. A calendar account can contain multiple schedules, and each schedule belongs to only one Calendar.
Once the calendar account object is obtained, you can manage the schedules under that account, including creating, deleting, modifying, and querying schedules. When creating or modifying a schedule, you can set relevant information such as the schedule's title, start time, end time, type, location, reminder time, and recurrence rules to achieve richer and more effective schedule management.

Development Steps

1、Import relevant dependencies.

// entry/src/main/ets/entryability/EntryAbility.ets
import {abilityAccessCtrl,AbilityConstant, common, PermissionRequestResult, Permissions, UIAbility, Want } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { calendarManager } from '@kit.CalendarKit';
import { window } from '@kit.ArkUI';

2、Request Permissions. When using Calendar Kit, you need to declare the permissions required for reading and writing calendar schedules in module.json5: ohos.permission.READ_CALENDAR and ohos.permission.WRITE_CALENDAR.
3、Obtain the Calendar Manager Object. Retrieve the calendar manager object calendarMgr based on the context to manage calendar accounts. This operation is recommended in the EntryAbility.ets file.

// entry/src/main/ets/entryability/EntryAbility.ets
export let calendarMgr: calendarManager.CalendarManager | null = null;

export let mContext: common.UIAbilityContext | null = null;

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    console.info("Ability onCreate");
  }

  onDestroy(): void {
    console.info("Ability onDestroy");
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    console.info("Ability onWindowStageCreate");
    windowStage.loadContent('pages/Index', (err, data) => {
      if (err.code) {
        console.error(`Failed to load the content. Code: ${err.code}, message: ${err.message}`);
        return;
      }
      console.info(`Succeeded in loading the content. Data: ${JSON.stringify(data)}`);
    });
    mContext = this.context;
    const permissions: Permissions[] = ['ohos.permission.READ_CALENDAR', 'ohos.permission.WRITE_CALENDAR'];
    let atManager = abilityAccessCtrl.createAtManager();
    atManager.requestPermissionsFromUser(mContext, permissions).then((result: PermissionRequestResult) => {
      console.log(`get Permission success, result: ${JSON.stringify(result)}`);
      calendarMgr = calendarManager.getCalendarManager(mContext);
    }).catch((error: BusinessError) => {
      console.error(`get Permission error, error. Code: ${error.code}, message: ${error.message}`);
    })
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    console.info("Ability onWindowStageDestroy");
  }

  onForeground(): void {
    // Ability has brought to foreground
    console.info("Ability onForeground");
  }

  onBackground(): void {
    // Ability has back to background
    console.info("Ability onBackground");
  }
}

4、Create a Calendar object based on calendar account information to manage schedules. Configure calendar settings, such as enabling schedule reminders and setting the calendar account color as needed.

// Index.ets
import { BusinessError } from '@kit.BasicServicesKit';
import { calendarMgr } from '../entryability/EntryAbility';
import { calendarManager } from '@kit.CalendarKit';

let calendar: calendarManager.Calendar | undefined = undefined;
const calendarAccount: calendarManager.CalendarAccount = {
  name: 'MyCalendar',
  type: calendarManager.CalendarType.LOCAL,
  displayName: 'MyCalendar'
};
const config: calendarManager.CalendarConfig = {
  enableReminder: true,
  color: '#aabbcc'
};
calendarMgr?.createCalendar(calendarAccount).then((data: calendarManager.Calendar) => {
  console.info(`Succeeded in creating calendar data->${JSON.stringify(data)}`);
  calendar = data;

  calendar.setConfig(config).then(() => {
    console.info(`Succeeded in setting config, data->${JSON.stringify(config)}`);
  }).catch((err: BusinessError) => {
    console.error(`Failed to set config. Code: ${err.code}, message: ${err.message}`);
  });
  // ...
}).catch((error: BusinessError) => {
  console.error(`Failed to create calendar. Code: ${error.code}, message: ${error.message}`);
});

5、To add a calendar event under the current calendar account, note that the event ID does not need to be filled in the input parameters.
When creating an event, you can set relevant information such as the event title, start time, end time, event type, location, reminder time, and recurrence rules.
Once the event is successfully created, an event ID will be returned as the unique identifier of the event. You can use this ID to update or delete the specified event later.
Currently, there are two ways to create events:
Method 1: Create events through the addEvent() or addEvents() interface under the calendar account. The addEvent() interface is used to create a single event, while addEvents() can create multiple events in batches. Here is an example of creating a single event:
Method 2: After obtaining the calendar manager object, use the editEvent() interface to create a single event. When calling this interface, it will jump to the event creation page, where you can complete the event creation through relevant operations. Note that editEvent() does not support custom periodic event creation.

// Index.ets
let eventId : number | undefined = undefined;
const date = new Date();
const event: calendarManager.Event = {
  title: 'title',

  type: calendarManager.EventType.NORMAL,
  startTime: date.getTime(),
  endTime: date.getTime() + 60 * 60 * 1000,
  reminderTime: [10],
  recurrenceRule: {
    recurrenceFrequency: calendarManager.RecurrenceFrequency.DAILY,

    count: 100,

    interval: 2,

    expire: date.getTime() + 60 * 60 * 1000 * 3,
    excludedDates: [date.getTime() + 60 * 60 * 1000 * 2]
  },
  service: {
    type: calendarManager.ServiceType.TRIP,

    uri: 'xxx://xxx.xxx.com/xxx',
    description: ''
  }

};
calendar.addEvent(event).then((data: number) => {
  console.info(`Succeeded in adding event, id -> ${data}`);
  eventId = data;
}).catch((err: BusinessError) => {
  console.error(`Failed to addEvent. Code: ${err.code}, message: ${err.message}`);
});
 const eventInfo: calendarManager.Event = {
  title: 'title',
  type: calendarManager.EventType.NORMAL,
  startTime: date.getTime(),
  endTime: date.getTime() + 60 * 60 * 1000
};
calendarMgr?.editEvent(eventInfo).then((id: number): void => {
  console.info(`create Event id = ${id}`);
  eventId = id;
}).catch((err: BusinessError) => {
  console.error(`Failed to create Event. Code: ${err.code}, message: ${err.message}`);
});

6、Update the specified schedule according to the schedule ID and modify the relevant information of the schedule.

// Index.ets
const updateEvent: calendarManager.Event = {
  title: 'updateTitle',
  description: 'updateEventTest',
  type: calendarManager.EventType.NORMAL,
  id: eventId,
  startTime: date.getTime(),
  endTime: date.getTime() + 60 * 60 * 1000
};
calendar.updateEvent(updateEvent).then(() => {
  console.info(`Succeeded in updating event`);
}).catch((err: BusinessError) => {
  console.error(`Failed to update event. Code: ${err.code}, message: ${err.message}`);
});

7、Query all schedules under the current calendar account. Due to data privacy and security considerations, apps with permission controls cannot access schedule information created by others. Different query results are returned based on different query conditions and fields.
When there are no query conditions or fields, all schedules under the specified calendar account can be queried.

calendar.getEvents().then((data: calendarManager.Event[]) => {
  console.info(`Succeeded in getting events, data -> ${JSON.stringify(data)}`);
}).catch((err: BusinessError) => {
  console.error(`Failed to get events. Code: ${err.code}, message: ${err.message}`);
});

It also supports querying schedules based on search criteria such as schedule ID, schedule start and end times, and schedule title.

const filterId = calendarManager.EventFilter.filterById([eventId]);
calendar.getEvents(filterId).then((data: calendarManager.Event[]) => {
  console.info(`Succeeded in getting events, data -> ${JSON.stringify(data)}`);
}).catch((err: BusinessError) => {
  console.error(`Failed to get events. Code: ${err.code}, message: ${err.message}`);
});

const filterTitle = calendarManager.EventFilter.filterByTitle('update');
calendar.getEvents(filterTitle).then((data: calendarManager.Event[]) => {
  console.info(`Succeeded in getting events, data -> ${JSON.stringify(data)}`);
}).catch((err: BusinessError) => {
  console.error(`Failed to get events. Code: ${err.code}, message: ${err.message}`);
});

const filterTime = calendarManager.EventFilter.filterByTime(1686931200000, 1687017600000);
calendar.getEvents(filterTime).then((data: calendarManager.Event[]) => {
  console.info(`Succeeded in getting events filter by time, data -> ${JSON.stringify(data)}`);
}).catch((err: BusinessError) => {
  console.error(`Failed to filter by time. Code: ${err.code}, message: ${err.message}`);
});

8、Delete a specified schedule by its schedule ID. You can delete a single schedule using the deleteEvent() interface or batch delete specified schedules using the deleteEvents() interface. Here is an example of deleting a single specified schedule.

// Index.ets
calendar.deleteEvent(eventId).then(() => {
   console.info("Succeeded in deleting event");
 }).catch((err: BusinessError) => {
   console.error(`Failed to delete event. Code: ${err.code}, message: ${err.message}`);
});

HarmonyOS Next — Date and Calendar Components

Rory-lhj — Wed, 21 May 2025 12:45:08 +0000

In HarmonyOS application development, date and calendar components are an indispensable part of user interaction. The HarmonyOS system provides rich components and interfaces to meet developers’ needs for date and calendar functions.

1. Core Functions of Date and Calendar Components
The HarmonyOS system offers multiple date and calendar-related components, supporting the following functions:

Date Selection: Users can select specific dates.
Time Selection: Users can select specific times (hours and minutes).
Calendar View: Displays a calendar interface, supporting operations such as month switching and date clicking.
Internationalization Support: Supports date display in multiple languages and regional formats.
2. Common Date and Calendar Components
(1) DatePicker Component
Function: Used for date selection.
Application Scenarios: Birthday selection, date booking, etc.
Key Attributes:
selected: The currently selected date.
start and end: The range of date selection.
onDateChange: Callback event when the date changes.

@Entry
@Component
struct Index {
    @State selectedDate: Date = new Date();

    build() {
        Column() {
            DatePicker({
                selected: this.selectedDate,
                start: new Date('2020-01-01'),
                end: new Date('2030-12-31')
            }).onDateChange((value: Date) => {
                this.selectedDate = value;
                console.info('Selected date: ' + this.selectedDate.toString());
            });
        }
    }
}

(2) TimePicker Component

Function: Used for time selection.
Application Scenarios: Setting alarms, scheduling appointments, etc.
Key Attributes:
selected: The currently selected time.
useMilitaryTime: Whether to use 24-hour format.
onChange: Callback event when the time changes.

@Entry
@Component
struct Index {
    @State selectedTime: Date = new Date();

    build() {
        Column() {
            TimePicker({
                selected: this.selectedTime,
                useMilitaryTime: false
            }).onChange((value: TimePickerResult) => {
                this.selectedTime.setHours(value.hour, value.minute);
                console.info('Selected time: ' + this.selectedTime.toString());
            });
        }
    }
}

(3) Calendar View Component

Function: Displays a complete calendar interface, supporting month switching and date clicking.
Implementation Methods:
Implement the calendar view through custom components.
Quickly integrate calendar functions using third-party open-source libraries (such as CalendarView).
Key Functions:
Display dates of the current month.
Support switching to the previous month and the next month.
Trigger events when dates are clicked.

Custom Calendar Components If the system-provided components cannot meet requirements, developers can customize calendar components. The following are the key steps for customizing calendar components:

Designing the Calendar Layout
Use the Grid or GridItem component to build the grid layout of the calendar.
Each grid item represents a day, displaying the date and status.
Handling Date Logic
Dynamically generate date data based on the current month.
Calculate which day of the week the first day of each month falls on and the number of days in each month.
Adding Interaction Functions
Trigger events when dates are clicked, such as displaying details or navigating to other pages.
Support month switching.

@Entry
@Component
struct CustomCalendar {
    @State currentDate: Date = new Date();

    build() {
        Column() {

            Text(`${this.currentDate.getFullYear()}${this.currentDate.getMonth() + 1}`)
                .fontSize(20)
                .margin({ bottom: 10 });


            Row() {
                ['7', '1', '2', '3', '4', '5', '6'].forEach(day => {
                    Text(day).width('14%').textAlign(TextAlign.Center);
                });
            }.margin({ bottom: 5 });

            Grid({ columns: 7, rows: 6 }) {

                for (let i = 0; i < 42; i++) {
                    let date = this.getDateForIndex(i);
                    GridItem() {
                        if (date) {
                            Text(date.getDate().toString())
                                .width('100%')
                                .height('100%')
                                .textAlign(TextAlign.Center)
                                .onClick(() => {
                                    console.info('Selected date: ' + date.toString());
                                });
                        }
                    };
                }
            }
        }
    }


    getDateForIndex(index: number): Date | null {
        let firstDayOfMonth = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), 1);
        let dayOfWeek = firstDayOfMonth.getDay();
        let dateIndex = index - dayOfWeek + 1;

        if (dateIndex < 1 || dateIndex > this.getDaysInMonth()) {
            return null; 
        }

        return new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), dateIndex);
    }


    getDaysInMonth(): number {
        return new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 0).getDate();
    }
}