【小而美】HarmonyOS官方模板优秀案例（第5期：工具行业 · 日历应用）

💡 鸿蒙生态为开发者提供海量的HarmonyOS模板/组件，助力开发服从原地起飞 💡
★ 一键直达生态市场组件&模板市场 , 快速应用DevEco Studio插件市场集成组件&模板 ★
工具行业群英荟萃，是小而美应用的主要聚集赛道

本期介绍的案例是此中一类：日常刚需的日历应用

👉 覆盖20+行业，本帖以汇总情势持续更新中，点击收藏！一键三连！常看常新！
【第5期】工具行业 · 日历应用

一、概述

1. 行业洞察

1）行业诉求：

• 日历类应用，未来竞争将聚焦于 AI 驱动的个性化体验、场景化生态构建及文化适配能力正从单一工具进化为连接工作、生活、外交的 “时间操作系统”。
  
• 商业模式是日历类应用的重要场景诉求，目前免费增值为主，差异化变现破局，怎样结合小艺做个性化保举是差异化的根本。
  
• 满足用户的进阶需求：外交协作，隐私保护。
  

2）行业常用三方SDK

分类	三方库名称	功能	SDK链接
登录认证	中国移动一键登录SDK/易盾一键登录SDK/创蓝闪验/极光安全认证/阿里云号码认证SDK/中国电信一键登录SDK	登录	岳鹰全景监控SDk 付出宝付出 SDK 穿山甲广告SDK 快手联盟广告SDK 友盟SDK 腾讯微信SDK 腾讯优量汇 极光 SDK 高德地图 百度地图 腾讯地图定位 高德地图定位
分享	友盟/ShareSDK/微信分享/QQ分享/新浪微博SDK/MobTech ShareSDK	统计/推送/分享
付出	付出宝付出/微信付出/银联付出	付出
数据分析	友盟移动统计SD/神策数据SDK	数据收集、处置处罚、分析、运用
性能监控	腾讯Bugly SDK/听云SDK/岳鹰全景监控SDK	非常上报和运营统计
地图	高德地图SDK	地图
推送	个推/华为推送/极光PUSH/阿里推送SDK	消息推送
媒体	阿里云视频播放器SDK	音视频

阐明：“以上三方库及链接仅为示例，三方库由三方开发者独立提供，以其官方内容为准”
2. 案例概览（下载模板）

基于以上行业分析，本期将介绍鸿蒙生态市场生活服务类行业模板——日历应用模板，为行业提供常用功能的开发案例，模板主要分为万年历、黄历、和我的三大模块。

• Stage开发模子 + 声明式UI开发范式。
  
• 分层架构计划 + 组件化拆分，支持开发者在开发时既可以选择完备使用模板，也可以根据需求单独选用此中的业务组件。
  
• 本模板已集成华为账号等服务，只需做少量配置和定制即可快速实现华为账号的登录。
  

本模板主要页面及核心功能如下所示：

1. ​日历模板
2. |-- 万年历
3. |    |-- 日历选择
4. |    |-- 吉日查询
5. |    |-- 日期计算
6. |    |-- 节日节气
7. |    └-- 宜忌展示
8. |-- 黄历
9. |    |-- 日期切换
10. |    |-- 宜忌展示
11. |    |-- 五行、冲煞
12. |    |-- 彭祖百忌
13. └-- 我的
14. |     |-- 个人信息
15. |     └-- 设置
16. |       └-- 主题切换
17. |       └-- 隐私协议
18. |       └-- 用户协议  

复制代码

二、应用架构计划

1. 分层模块化计划

• 产品定制层：专注于满足差异装备或使用场景的个性化需求，作为应用的入口，是用户直接互动的界面。
  
  
  
  • 本实践临时只支持直板机，为单HAP包情势，包含路由根节点、底部导航栏等。
    
  
  
• 基础特性层：用于存放相对独立的功能UI和业务逻辑实现。
  
  
  
  • 本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。
    
  • 每个功能模块都具备高内聚、低耦合、可定制的特点，支持产品的灵活摆设。
    
  
  
• 公共能力层：存放公共能力，包括公共UI组件、数据管理、外部交互和工具库等共享功能。
  
  
  
  • 本实践的公共能力层分为公共基础能力和可分可合组件，均打包为HAR包被上层业务组件引用。
    
  • 公共基础能力包含日记、文件处置处罚等工具类，公共范例定义，网络库，以及弹窗、加载等公共组件。
    
  • 可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块，支持开发者在开发中单独集成使用，详见业务组件计划章节。
    
  
  

2. 业务组件计划

为支持开发者单独获取特定场景的页面和功能，本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块，不依赖公共基础能力包，开发者可以单独集成，开箱即用，降低使用难度。

三、行业场景技术方案

1. 个人信息

1）场景阐明

支持华为账号一键登录及其他方式（账号密码登录）。
用户登录后展示昵称和头像，点击用户信息栏可进入用户主页，查看并编辑个人信息和历史动态。
支持添加重要提醒（日程、生日、怀念日、代办），更新提醒，删除提醒。

2）技术方案

• 华为账号一键登录
  
  
  
  • 通过Account Kit实现华为账号一键登录，并获取用户手机号，关联应用已有用户。
    
  
  
• 头像修改
  
  
  
  • 通过Scenario Fusion Kit提供的选择头像Button快速拉起头像选择页面，供用户完成华为账号头像或其他头像的选择与展示。
    
  
  
• 重要提醒
  
  
  
  • 通过@kit.CalendarKit提供的提供日历与日程管理能力将应用中的工作、生活中与时间相关的日程服务与系统日历进行集成，从而实现日程管理、事件创建、查询等功能。
    
  
  
• 主题切换
  
  
  
  • 通过全局主题对象，控制全局的主题颜色切换，并使用持久化存储当前主题选择。
    
  
  

3）代码参考

• 部分核心代码参见华为账号一键登录实现章节。
  

2. 黄历

1）场景阐明

• 支持根据日期查看当日黄历信息。
  
• 切换日期查询其他日期黄历。
  
• 根据选择日期查看本日宜本日忌。
  
• 支持根据选择的黄历查看白话文。
  

2）技术方案

根据万年历选择日期进行对应日期黄历的展示。
通过日历选择组件暴露的句柄，感知当前选择的日期，并通过句柄同步修改万年历对应的日期。
3）代码参考

• 部分核心代码参见黄历实现章节。
  

3. 万年历

1）场景阐明

支持日历查看，日期切换，设置周首日。
支持查看本日宜，本日忌。
支持实用工具查询（吉日查询，日期计算，节日节气）。
支持查看城市限行。
支持查看历史上的今天。

2）技术方案

• 日历查看
  
  
  
  • 通过使用Swiper组件结合计算每月的日期实现日期轮播查看。
    
  
  
• 头像修改
  
  
  
  • 通过Scenario Fusion Kit提供的选择头像Button快速拉起头像选择页面，供用户完成华为账号头像或其他头像的选择与展示。
    
  
  
• 实用工具
  
  
  
  • 使用工具结合DatePicker日期选择器，实现日期选择并根据条件计算。
    
  
  
• 城市限行
  
  
  
  • 通过申请位置权限，大概当前城市的限行车牌尾号，并进行展示。
    
  
  

3）代码参考

• 部分核心代码参见万年历实现章节。
  

四、模板代码

1. 工程结构（下载模板）

详细代码结构如下所示：

1. Application
2. ├──├──commons
3. │   ├──common                                // 公共能力层
4. │     ├──src/main/ets                        // 基础能力
5. │     │  └──components                       // 公共组件
6. │     │  └──dividerTmp                       // 下划线公共组件
7. │     │  └──https                            // 网络请求库
8. │     │  └──models                           // 公共接口常量
9. │     │  └──quickLogin                       // 华为账号一键登录
10. │     │  └──style                            // 公共样式
11. │     │  └──utils                            // 工具类
12. │     │  └──viewmodels                       // 接口层
13. │     └──Index.ets                           // 对外接口类
14. │  ├──router_module                          // 全局路由组件
15. ├──├──components                             // 公共组件
16. │   ├──base_apis                             // 通用组件（模态框，弹窗，选择器等）
17. │   ├──base_calendar                         // 日历组件
18. │   ├──calendar_almanac                      // 黄历组件
19. │   ├──calendar_events                       // 重要提醒组件
20. │   ├──date_calculation                      // 日期计算组件
21. │   ├──festival_solar                        // 节日节气组件
22. │   ├──login_info                            // 登录组件组件
23. │   ├──vip_center                            // 开通会员组件
24. │   ├──traffic_restriction                   // 城市限行组件
25. │   ├──yiji_query                            // 宜忌查询组件
26. ├──features                                  // 基础特性层
27. │  ├──almanac/src/main/ets                   // 黄历
28. │  │  ├──pages                               // 首页入口
29. │     │  ├──AlmanacView                      // 黄历入口
30. │  ├──almanac/src/main/resources             // 资源文件目录
31. │  ├──almanac/Index.ets                      // 对外接口类
32. │  ├──perpetual/src/main/ets                 // 万年历
33. │  │  ├──components                          // 万年历组件
34. │  │  ├──pages                              
35. │     │  ├──PerpetualCalendar                // 万年历组件入口
36. │  ├──perpetual/src/main/resources           // 资源文件目录
37. │  ├──perpetual/Index.ets                    // 对外接口类
38. │  ├──mine/src/main/ets                      // 我的（包含一键登录）
39. │  │  └──pages                               // 我的入口页
40. │     │  ├──MinePage                         // 登录
41. │  │  └──components                          // 我的页面入口
42. │  └──mine/src/main/resources                // 资源文件目录
43. └─product/entry/src/main   
44.    ├─ets
45.    │  ├─widget
46.    │  │  ├──pages            
47.    │  │      ├──WidgetCard.ets       // 服务卡片   
48.    │  ├─entryability
49.    │  │      ├──EntryAbility.ets             // 应用程序入口
50.    │  ├─page
51.    │  │  ├──Index.ets                        // 入口
52.    │  │  ├──PrivacyPage.ets                  // 隐私协议   
53.    │  │  ├──SafePage.ets                     // 隐私协议弹窗  
54.    │  │  ├──SplashPage.ets                   // 闪屏页        
55.    │  │  ├──TabContainer.ets                 // tab页入口
56.    └─resources

复制代码

2. 关键代码解读

本篇代码非应用的全量代码，只包括应用的部分能力的关键代码。
若需获取全量代码，请查看模板集成章节。
1）个人信息

• 华为账号一键登录
  

1. typescript
2.     getQuickLoginAnonymousPhone() {
3.     // 创建授权请求，并设置参数
4.     const authRequest = new authentication.HuaweiIDProvider().createAuthorizationWithHuaweiIDRequest();
5.     // 获取手机号需要传如下scope，传参数之前需要先申请对应scope权限,才能返回对应数据
6.     authRequest.scopes = ['quickLoginAnonymousPhone'];
7.     authRequest.permissions = ['serviceauthcode'];
8.     // 用户是否需要登录授权，该值为true且用户未登录或未授权时，会拉起用户登录或授权页面
9.     authRequest.forceAuthorization = false;
10.     // 用于防跨站点请求伪造
11.     authRequest.state = util.generateRandomUUID();
12.     try {
13.       const controller = new authentication.AuthenticationController(getContext(this));
14.       controller.executeRequest(authRequest).then((response) => {
15.         const authorizationWithHuaweiIDResponse = response as authentication.AuthorizationWithHuaweiIDResponse;
16.         const state = authorizationWithHuaweiIDResponse.state;
17.         if (state !== undefined && authRequest.state !== state) {
18.           hilog.error(0x0000, 'testTag', `Failed to authorize. The state is different, response state: ${state}`);
19.           return;
20.         }
21.         hilog.info(0x0000, 'testTag', 'Succeeded in authentication.');
22.         const authorizationWithHuaweiIDCredential = authorizationWithHuaweiIDResponse.data!;
23.         const code = authorizationWithHuaweiIDCredential.authorizationCode;
24.         const unionID = authorizationWithHuaweiIDCredential.unionID;
25.         const openID = authorizationWithHuaweiIDCredential.openID;
26.         const anonymousPhone = authorizationWithHuaweiIDCredential?.extraInfo?.quickLoginAnonymousPhone as string;
27.         if (anonymousPhone) {
28.           hilog.info(0x0000, 'testTag', 'Succeeded in authentication.');
29.           this.quickLoginAnonymousPhone = anonymousPhone;
30.           return;
31.         } else {
32.           this.quickLoginAnonymousPhone = '123xxxxxx456'
33.         }
34.         // 开发者处理code、unionID、openID
35.         this.authorizationCode = code
36.       }).catch((err: BusinessError) => {
37.         this.dealAllPhoneError(err);
38.       });
39.     } catch (error) {
40.       this.dealAllPhoneError(error);
41.     }
42.   }

复制代码

 

• 重要提醒
  

1. typescript
2. class CalendarManage {
3.   context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
4.   private static _instance: CalendarManage
6.   static get instance() {
7.     if (!CalendarManage._instance) {
8.       CalendarManage._instance = new CalendarManage()
9.     }
10.     return CalendarManage._instance
11.   }
13.   public getCalendarPermission(): Promise<string> {
14.     const permissions: Permissions[] = ['ohos.permission.READ_CALENDAR', 'ohos.permission.WRITE_CALENDAR'];
15.     let atManager = abilityAccessCtrl.createAtManager();
16.     return new Promise((resolve, reject) => {
17.       atManager.requestPermissionsFromUser(this.context, permissions).then((result: PermissionRequestResult) => {
18.         resolve('success')
19.       }).catch((error: BusinessError) => {
20.         reject('failed')
21.         console.error(`get Permission error, error. Code: ${error.code}, message: ${error.message}`);
22.       })
23.     })
24.   }
26.   /*
27.     * 添加提醒到日历
28.     * */
29.   private async calendarEvent(calendar: calendarManager.Calendar,
30.     calendarInfo: UserEventItem): Promise<CalendarInfo> {
31.     const event: calendarManager.Event = {
32.       title: calendarInfo.content,
33.       type: calendarManager.EventType.NORMAL,
34.       id: calendarInfo.eventId,
35.       isLunar:calendarInfo.date[0].isLunar,
36.       startTime: new Date(dayjs(calendarInfo.date[0].date).format('YYYY-MM-DD') + ' ' +
37.       calendarInfo.date[0].time).getTime(),
38.       endTime: new Date(dayjs(calendarInfo.date[1].date).format('YYYY-MM-DD') + ' ' +
39.       calendarInfo.date[1].time).getTime(),
40.       reminderTime: CalendarManage.getReminderTime(calendarInfo.remindList),
41.       recurrenceRule: {
42.         recurrenceFrequency: repeatMap[calendarInfo.repeatType],
43.       },
44.     };
45.     return new Promise(async (resolve, reject) => {
46.       if (calendarInfo.eventId) {
47.         calendar.updateEvent(event).then(() => {
48.           resolve({
49.             status: 'success',
50.           })
51.         }).catch((err: BusinessError) => {
52.           console.error(`Failed to update event. Code: ${err.code}, message: ${err.message}`);
53.         });
54.       } else {
55.         calendar.addEvent(event).then((data: number) => {
56.           console.info(`Succeeded in adding event, id -> ${data}`);
57.           resolve({
58.             status: 'success',
59.             data: data,
60.           })
61.         }).catch((err: BusinessError) => {
62.           resolve({
63.             status: 'failed',
64.           })
65.         });
66.       }
67.     })
68.   }
69.   /*
70.     * 根据提醒参数创建日历参数
71.     * */
72.   public async calendarEventCreate(calendarInfo: UserEventItem, operationType?: string): Promise<CalendarInfo> {
73.     if (calendarInfo.remindList[0] === '不提醒') {
74.       return {
75.         status: 'not need calendar',
76.       }
77.     }
78.     let permission = await this.getCalendarPermission()
79.     if (permission !== 'success') {
80.       return {
81.         status: 'permission failed',
82.       }
83.     }
84.     let calendar: calendarManager.Calendar | undefined = undefined;
85.     // 指定日历账户信息
86.     const calendarAccount: calendarManager.CalendarAccount = {
87.       name: '日历模板',
88.       type: calendarManager.CalendarType.LOCAL,
89.       // 日历账户显示名称，该字段如果不填，创建的日历账户在界面显示为空字符串。
90.       displayName: '日历模板',
91.     };
92.     let calendarMgr: calendarManager.CalendarManager | null = calendarManager.getCalendarManager(this.context);
93.     // 创建日历账户
94.     try {
95.       calendar = await calendarMgr?.createCalendar(calendarAccount)
96.       let res: CalendarInfo
97.       if (operationType === 'delete') {
98.         res = await this.calendarEventDelete(calendar, calendarInfo)
99.       } else {
100.         res = await this.calendarEvent(calendar, calendarInfo)
101.       }
102.       return res
103.     } catch (e) {
104.       return {
105.         status: 'calendar operation failed',
106.       }
107.     }
108.   }
109.   /*
110.     * 删除已经添加到日历的提醒
111.     * */
112.   private async calendarEventDelete(calendar: calendarManager.Calendar,
113.     calendarInfo: UserEventItem): Promise<CalendarInfo> {
114.     try {
115.       await calendar.deleteEvent(calendarInfo.eventId)
116.       return {
117.         status: 'success',
118.       }
119.     } catch (e) {
120.       return {
121.         status: 'failed',
122.       }
123.     }
124.   }
125. }

复制代码

2）黄历

• 重要提醒
  

1. typescript
2. /**
3. * 抛出句柄
4. */
5. export class CalendarController {
6.      public static vm: CalendarVM = CalendarVM.instance;
7.    
8.      public setSelectDate(date: Date) {
9.        CalendarController.vm.changeDate(date)
10.      }
11.    
12.      public getTodayYiJi() {
13.        CalendarController.vm.getTodayYiJi()
14.      }
15. }

复制代码

• 切换日期
  

1. typescript
2. /**
3. * 切换日期
4. */  
5. public changeDate(date: Date) {
6.     let gap = (date.getFullYear() - this.curDate.year()) * 12 + date.getMonth() - this.curDate.month()
7.     this.dateListSource.clearData()
8.     let i = -2
9.     while (i <= 2) {
10.       let month = this.getDateList(i + gap)
11.       this.dateListSource.pushData(month)
12.       i++
13.     }
14.     this.curIndex = 2
15.     this.selectDate = dayjs(date)
16. }

复制代码

• 获取位置权限
  

1. typescript
2. /**
3. * 获取今日宜和忌
4. */  
5. public getTodayYiJi() {
6.     const todayLunar = Lunar.fromDate(new Date(this.selectDate.format('YYYY-MM-DD')));
7.     const yi = todayLunar.getDayYi();
8.     const ji = todayLunar.getDayJi();
9.     this.todayYiJi = {
10.       yi,
11.       ji,
12.     }
13.   }

复制代码

3. 模板集成

本模板提供了两种代码集成方式，供开发者自由选用。
1）整体集成（下载模板）

开发者可以选择直接基于模板工程开发自己的应用工程。

• 模板代码获取：
  
  
  
  • 通过IDE插件创建模板工程，开发指导。
    
  • 通过生态市场下载源码， 下载模板。
    
  • 通过开源仓访问源码，堆栈地址。
    
  
  
• 打开模板工程，根据README阐明中的快速入门章节，将自己的应用信息配置在模板工程内，即可运行并查看模板效果。
  

• 对接开发者自己的服务器接口，转换数据结构，展示真实的云侧数据。
  

将commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替换为真实的服务器接口。

在commons/lib_common/src/main/ets/httprequest/HttpRequest.ets文件中将云侧开发者自定义的数据结构转换为端侧数据结构。

根据自己的业务内容修改模板，进行定制化开发。
2）按需集成

若开发者已搭建好自己的应用工程，但暂未实现此中的部分场景能力，可以选择取用此中的业务组件，集成在自己的工程中。

• 组件代码获取：
  
  
  
  • 通过IDE插件下载组件源码。开发指导
    
  • 通过生态市场下载组件源码。 下载地址
    
  
  
• 下载组件源码，根据README中的阐明，将组件包配置在自己的工程中。
  

• 根据API参考和示例代码，将组件集成在自己的对应场景中。
  

以上是第五期“工具行业-日历应用”行业优秀案例的内容，更多行业敬请等候~
欢迎下载使用行业模板“点击下载”，若您有体验和开发问题，大概迫不及待想了解XX行业的优秀案例，欢迎在评论区留言，小编会快马加鞭为您解答~
同时诚邀您添加下方二维码到场“组件模板活动社群”，精彩上新&活动不错过！

👉 本系列持续更新，欢迎点击帖子末尾左下角“

”收藏本帖！

期数	帖子	链接
第1期	HarmonyOS官方模板优秀案例 | 便捷生活行业 · 购物中心	点击查看
第2期	HarmonyOS官方模板优秀案例 | 新闻行业 · 综合新闻	点击查看
第3期	HarmonyOS官方模板优秀案例 | 教诲行业 · 教诲备考	点击查看
第4期	HarmonyOS官方模板优秀案例 | 餐饮行业 · 美食菜谱	点击查看
第5期	HarmonyOS官方模板优秀案例 | 工具行业 · 日历应用	点击查看
第6期	小编加急整理中，敬请等候

👉 HarmonyOS组件模板相关保举

• 【活动ing】HarmonyOS组件/模板集成创新活动，报名时间停止2025年8月30日，点击查看
  
• 鸿蒙应用开发者激励筹划2025，点击查看
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。