实现自定义日历鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本示例通过原生组件实现日历页面，根据不同场景利用ForEach或LazyForEach进行数据循环渲染。

实现自定义日历源码链接

使用说明

进入应用显示日期与实际日期一致，点击不同日期可切换，日期底部显示应用预设的四条日程。

效果预览

实现思路

显示日历界面周信息时，由于一周七天是固定的，在列表中利用ForEach进行循环渲染。显示每个月的日期时，由于每个月天数不一致，列表中数据较多且不确定，这种情况下使用LazyForEach进行数据循环渲染。当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。核心代码如下：

 LazyForEach(this.contentData, (monthItem: Month) => {
          // 设置ListItemGroup头部组件，显示年份和月份
          ListItemGroup({ header: this.itemHead(monthItem.month) }) {
            ListItem() {
              Stack() {
                Text(monthItem.num.toString())
                  .fontSize($r('app.integer.month_text'))
                  .fontColor($r('app.color.ohos_id_color_palette_aux8'))
                  .opacity(MONTH_OPACITY)
                Grid() {
                    ···
                    .onClick(() => {
                      if (day != 0) {
                        let weekIndex = monthItem.days.indexOf(day) % WEEK_NUMBER; // 将当前日转换成星期显示
                        this.date = [monthItem.num, day, weekIndex];
                        this.currentDay = day;
                      }
                    })
                  })
                }
                .backgroundColor($r('app.color.ohos_id_color_background'))
                .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
                // 当前月显示的数组元素个数大于35则显示6行，否则显示5行
                .rowsTemplate(monthItem.days.length > MONTH_NUMBER ? '1fr 1fr 1fr 1fr 1fr 1fr' : '1fr 1fr 1fr 1fr 1fr')
                .height(monthItem.days.length > MONTH_NUMBER ? GRID_HEIGHT_L : GRID_HEIGHT_M)
              }
            }
          }
        })