【HarmonyOS 鸿蒙实战开发】日历切换案例

---

📚往期笔录记录🔖：

🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

🔖记录一场鸿蒙开发岗位面试经历~

🔖持续更新中……

---

介绍

本示例介绍使用Swiper实现自定义日历月视图和周视图左右滑动切换月或周的效果。同时使用分段按钮和Tabs实现月视图和周视图的切换效果。

效果图预览

使用说明

1. 进入页面，在月视图上手指往右滑动，可切换到上个月，往左滑动可切换到下个月。

2. 在月视图上点击非当日日期，日期上显示绿色边框选中效果。选中当日日期，当日日期显示为红底白字。

3. 月视图上点击非当月的日期，可切换到对应月，同时日期显示选中效果。

4. 点击“周”按钮，可从月视图切换到周视图，周视图展示的周信息根据月视图之前选中的日期进行跳转。

5. 周视图左右滑动可切换下一周和上一周。

6. 周视图上选中日期后，点击“月”按钮，可从周视图切换到月视图，月视图展示的月份信息根据周视图之前选中的日期进行月份跳转。

7. 周视图切换时，默认根据周视图中第一天的年月信息刷新页面顶部的“xxxx年x月”数据。手动点击周视图日期时，则根据选中的年月信息刷新数据。

实现思路

1. 自定义日历组件CustomCalendar。这里参考[日历三方库@xsqd/calendar 的部分源码使用两个ForEach循环实现日历的月视图和周视图的日期布局效果。通过CalendarStateType条件渲染对应的月视图或周视图。

if (this.calendarState === CalendarStateType.MONTH) {
   
  // 月视图
  ForEach(this.monthDays, (items: Day[], index: number) => {
   
    Row() {
   
      ForEach(items, (item: Day) => {
   
        this.monthDayBuilder(item, index + 1)
      }, (item: Day, index: number) => {
   
        return item.dayNum + "" + index
      })
    }
    .width($r('app.string.calendar_switch_full_size'))
    .justifyContent(FlexAlign.SpaceBetween)
  }, (item: Day[], index: number) => {
   
    return item.reduce((item1, item2) => {
   
      return item1 + item2.dayInfo.year + item2.dayInfo.month + item2.dayInfo.date
    }, '') + index
  })
} else if (this.calendarState === CalendarStateType.WEEK) {
   
  // 周视图
  ForEach(this.weekDays, (items: Day[], index: number) => {
   
    Row() {
   
      ForEach(items, (item: Day) => {
   
        this.weekDayBuilder(item)
      }, (item: Day, index: number) => {
   
        return item.dayNum + "" + index;
      })