HarmonyOS 鸿蒙Next 想实现点击后改变样式

加个isSelect下标就行了

class MyDate {
  year: number
  month: number
  day: number

  constructor(year: number, month: number, day: number) {
    this.year = year;
    this.month = month;
    this.day = day
  }
}

export default struct CalendarItem {
  @State isSelectIndex: number = -1
  //定义当年当月当日
  @State currentYear: number = 2024
  @State currentMonth: number = 0
  @State currentDay: number = 0
  //日历第一天 为1：周日 为0： 周一
  //取得当月天数
  @State allDay: number[] = []
  //获取当月第一天是星期几
  @State currentFirstWeekDay: number = 1
  @State week: string[] = ['日', '一', '二', '三', '四', '五', '六']
  //存放上个月的天数
  @State preMonth: MyDate[] = []
  //需要显示下月的天数
  @State nextMonth: MyDate[] = []
  //当前
  @State currentText: string = ''

  //获取上月天数
  getPrevMonthDay() {
    let date = new Date(this.currentYear, this.currentMonth - 1, 0); // 获取上月;
    let day = date.getDate(); // 因为Date函数中天设置的0，因此这里是上月最后一天的值
    let days = this.currentFirstWeekDay; // 上月要显示几天
    let weeks: MyDate[] = [];
    while (days > 0) {
      weeks.push(new MyDate(date.getFullYear(), date.getMonth() + 1, day--));
      days--;
    }
    return weeks.sort((a: MyDate, b: MyDate) => a.day - b.day); // 因为是从大到小的，排个序
  }

  //获取下月天数
  getNextMonthDay() {
    let date = new Date(this.currentYear, this.currentMonth - 1, 0); // 获取上月;
    let day = date.getDate(); // 因为Date函数中天设置的0，因此这里是上月最后一天的值
    let days = this.currentFirstWeekDay; // 上月要显示几天
    let weeks: MyDate[] = [];
    while (days > 0) {
      weeks.push(new MyDate(date.getFullYear(), date.getMonth() + 1, day--));
      days--;
    }
    return weeks.sort((a, b) => a.day - b.day); // 因为是从大到小的，排个序
  }

  aboutToAppear() {
    let date = new Date();
    this.currentDay = date.getDate()
    this.currentMonth = date.getMonth() + 1;
    this.currentYear = date.getFullYear();
    this.currentFirstWeekDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
    let allDay = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();

    for (let i = 0; i < allDay; i++) {
      this.allDay[i] = i
    }
    this.preMonth = this.getPrevMonthDay()
  }

  refreshDays(month: number, year: number) {
    //上月
    let date = new Date(year, month - 1, 0); // 获取上月;
    let day = date.getDate(); // 因为Date函数中天设置的0，因此这里是上月最后一天的值
    this.currentFirstWeekDay = new Date(year, month - 1, 1).getDay();
    let days = this.currentFirstWeekDay; // 上月要显示几天
    let weeks: MyDate[] = [];
    while (days > 0) {
      weeks.push(new MyDate(date.getFullYear(), date.getMonth() + 1, day--));
      days--;
    }
    weeks.sort((a, b) => a.day - b.day); // 因为是从大到小的，排个序
    this.preMonth = weeks
    //本月
    console.info(`year${year}month${month}`)
    let allDay = new Date(year, month, 0).getDate();
    console.info(`allDay${allDay}`)
    //需要先重置
    this.allDay = []
    for (let i = 0; i < allDay; i++) {
      this.allDay[i] = i
    }
    console.info(`${this.allDay}`)
  }

  refreshDate(month: number) {
    if (month < 1) {
      this.currentMonth = 12
      this.currentYear--
      //重新更新天数
      this.refreshDays(this.currentMonth, this.currentYear)
    }
    else if (month > 12) {
      this.currentMonth = 1
      this.currentYear++
      this.refreshDays(this.currentMonth, this.currentYear)
    }
    else {
      this.currentMonth = month
      this.currentYear = this.currentYear;

      this.refreshDays(this.currentMonth, this.currentYear)
    }
  }

  @Builder
  Header() {
    Row() {
      // Image($rawfile('icon_arrow_l.svg'))
      Image($rawfile('icon_arrow_r.svg'))
        .width(15)
        .height(15)
        .margin({ right: 20 })
        .onClick(() => {
          this.currentMonth--
          this.refreshDate(this.currentMonth)
        })
      Text(`${this.currentYear}年${this.currentMonth}月`)
        .fontSize(20)
      Image($rawfile('icon_arrow_r.svg'))
        .width(15)
        .height(15)
        .margin({ left: 20 })
        .onClick(() => {
          this.currentMonth++

          this.refreshDate(this.currentMonth)
        })
    }
  }

  @Builder
  Week(value: string[]) {
    Column() {
      Grid() {
        ForEach(value, (data: string) => {
          GridItem() {
            Text(data)
              .fontSize(16)
              .fontWeight(FontWeight.Bold)
              .width('100%')
              .textAlign(TextAlign.Center)
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .width('90%')
      .height(50)
    }
    .width('100%')
    .margin({ bottom: 10 })
  }

  @Builder
  Day() {
    Grid() {
      ForEach(this.preMonth, (i: MyDate) => {
        GridItem() {
          Text(String(i.day))
            .textAlign(TextAlign.Center)
            .fontSize(16)
            .fontColor(Color.Gray)
        }
        .onClick(() => {
          this.currentMonth--
          console.info(`currentMonth${this.currentMonth}`)
          this.refreshDate(this.currentMonth)
        })
      })
      ForEach(this.allDay, (i: number, index: number) => {
        GridItem() {
          Text(String(i + 1))
            .fontSize(16)
            .fontColor('#ff2e5391')
            .backgroundColor(this.isSelectIndex == index ? '#ff0000' : '')
            .textAlign(TextAlign.Center)
            .onClick(() => {
              console.info('click:', this.currentYear + "-" + this.currentMonth + "-" + (i + 1))
              this.isSelectIndex = index
            })
        }
      })
    }
    .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
    .columnsGap(10)
    .rowsGap(10)
    .width('90%')

  }

  build() {
    Column() {
      this.Header()
      this.Week(this.week)
      this.Day()
    }
  }
}