【HarmonyOS 5.0.0 或以上】构建日历组件 Calendar:支持单选 / 多选 / 禁用日期 / 自定义渲染

🎯 目标

构建一个功能丰富的 CommonCalendar 日历组件,适用于:

  • 日期选择(单选 / 多选)

  • 禁用日期控制(不可点击)

  • 自定义渲染样式(如节假日、打卡标记)

  • 上下月切换,支持配置范围

  • 适配表单预约、打卡签到、课程排期等场景


🧱 功能示意

2025年5月
一 二 三 四 五 六 日
    1  2  3  4  5  6
 7  8 [9]10 11 12 13   ← 选中9号
14 15 16[17]18 19 20   ← 多选

🧰 组件实现:CommonCalendar.ets

@Component
export struct CommonCalendar {
  @Prop mode: 'single' | 'multiple' = 'single'
  @Prop selected: string | string[] = this.mode === 'multiple' ? [] : ''
  @Prop disabledDates: Array<string> = []  // '2025-05-01' 格式
  @Prop onSelect: (val: string | string[]) => void = () => {}

  @State curDate: Date = new Date()

  build() {
    const year = this.curDate.getFullYear()
    const month = this.curDate.getMonth()
    const firstDay = new Date(year, month, 1).getDay() || 7
    const daysInMonth = new Date(y
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值