HarmonyOS5-NewsAPP-CalendarEventManager

HarmonyOS 5 News App Calendar Event Management Implementation Abstract This article introduces the implementation of the calendar event management function in the HarmonyOS 5.0 news application, including binding pop - up windows, adding calendar events, and displaying event details. It is implemented using the ArkTS language.

Code Implementation 1. Bind the Pop - up Component .bindSheet($$this.isShow, this.AccountDetailBuilder, { height: 500 }) 2. Implement the Function to Add Calendar Events async addCalendarEvent (title: string) { await this.currCalendar?.addEvent({ title: title, startTime: Number(new Date('2025-12-12 19:00:00')), endTime: Number(new Date('2025-12-12 21:00:00')), reminderTime: [0, 5, 10, 60], type: calendarManager.EventType.NORMAL }) this.currCalendarEvents = await this.currCalendar?.getEvents() || [] } 3. Build the Account Details Component to Display the Event List @Builder AccountDetailBuilder() { Column({ space: 15 }) { Text(this.currCalendar?.getAccount().displayName) .fontSize(24) .fontWeight(500) Column({ space: 15 }) { Button('Subscribe CNN News') .onClick(() => { this.addCalendarEvent('Subscribe CNN News') }) Button('Subscribe BBC News') .onClick(() => { this.addCalendarEvent('Subscribe BBC News') }) } Text('My Subscribe : ') List({ space: 15 }) { ForEach(this.currCalendarEvents, (event: calendarManager.Event) => { ListItem(){ Column({ space: 5 }){ Text(event.title) Text(new Date(event.startTime).toString()) } .padding({ left: 15, right: 15 }) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Start) .width('100%') .height(60) .borderRadius(12) .backgroundColor('#DDDDDD') } }) } } .padding(15) .alignItems(HorizontalAlign.Start) }