HarmonyOS鸿蒙开发-日历功能实现-实现日历打卡

​ 基于 @ohmos/calendar 实现打卡页面

1.先使用该命令获取@ohmos/calendar

ohpm install @ohmos/calendar

2.在左上角文件里面找到同步与刷新项目，点击同步与刷新项目

3. 实现日历功能

​编辑

示例代码如下（HmCalendar是日历API）：

import { HmCalendar } from '@ohmos/calendar'

@Entry
@Component
struct Index {
build() {

Column(){
  HmCalendar()
    .borderRadius(8)
    .border({ width: 0.5, color: '#ededed' })
    .shadow({ color: '#ededed', radius: 16 })
}

}
}

 4.实现日历打卡：

​编辑

示例代码如下（已经包含详细讲解）：

import { HmCalendar } from '@ohmos/calendar'

@Entry
@Component
struct Index {
build() {

Column(){
  HmCalendar({
    // 用来写被选择的日期，实现该日期打卡显示
    selectedDays: [
      { date: '2025-03-01' },
      { date: '2025-03-18' },
      { date: '2025-03-25' },
    ]
  })
    .borderRadius(8)
    .border({ width: 0.5, color: '#ededed' })
    .shadow({ color: '#ededed', radius: 16 })
}

}
}

注意date里面的字符串格式 ‘YYYY - MM - DD’

5.扩展

单周日历：

​编辑

示例代码（已经包含详细讲解）：

import { HmCalendar,HmCalendarType } from '@ohmos/calendar'

@Entry
@Component
struct Index {
build() {

Column(){
  HmCalendar({
    // 用来写被选择的日期，实现该日期打卡显示
    selectedDays: [
      { date: '2025-03-01' },
      { date: '2025-03-18' },
      { date: '2025-03-25' },
    ],
    // 选择日历的样式-单周日历
    type:HmCalendarType.WEEK
  })
    .borderRadius(8)
    .border({ width: 0.5, color: '#ededed' })
    .shadow({ color: '#ededed', radius: 16 })
}

}
}

迷你日历：

​编辑

示例代码（已经包含详细讲解）：

import { HmCalendar,HmCalendarType } from '@ohmos/calendar'

@Entry
@Component
struct Index {
build() {

Column(){
  HmCalendar({
    // 用来写被选择的日期，实现该日期打卡显示
    selectedDays: [
      { date: '2025-03-01' },
      { date: '2025-03-18' },
      { date: '2025-03-25' },
    ],
    // 选择日历的样式-迷你日历
    type:HmCalendarType.MONTH_DOT
  })
    .borderRadius(8)
    .border({ width: 0.5, color: '#ededed' })
    .shadow({ color: '#ededed', radius: 16 })
}

}
}

适用HarmonyOS NEXT / API12或以上版本
​