HarmonyOS5-新闻应用-日历事件管理器
HarmonyOS 5 新闻应用日历事件管理实现
摘要
本文介绍了在 HarmonyOS 5.0 新闻应用中实现日历事件管理功能的过程，包括绑定弹出窗口、添加日历事件和显示事件详情。该功能使用 ArkTS 语言实现。
代码实现
1. 绑定弹出组件
```javascript
.bindSheet($$this.isShow, this.AccountDetailBuilder, {
height: 500
})
```
2. 实现添加日历事件的功能
```javascript
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. 构建账户详情组件以显示事件列表
```javascript
@Builder
AccountDetailBuilder() {
Column({ space: 15 }) {
Text(this.currCalendar?.getAccount().displayName)
.fontSize(24)
.fontWeight(500)
Column({ space: 15 }) {
Button('订阅 CNN 新闻')
.onClick(() => {
this.addCalendarEvent('订阅 CNN 新闻')
})
Button('订阅 BBC 新闻')
.onClick(() => {
this.addCalendarEvent('订阅 BBC 新闻')
})
}
Text('我的订阅 : ')
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)
}
```
查看原文
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.<p>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)
}