🎯 目标
构建一个功能丰富的 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