HarmonyOS 鸿蒙Next日历组件详细日界面组件
<markdown _ngcontent-ucp-c237="" class="markdownPreContainer">

背景

原生UI没有提供日历相关的组件，于是手撸了详细页面的日程。一开始打算使用list加tab的方式来实现切换的效果，但是list的切换是没有办法确定当前展示的索引的，所以没有办法实现日历内容动态添加等效果。在业内大佬的指导下，使用了两个swiper组件分别实现周和日的切换，实现了想要的效果，如下：

代码

DayViewPage

/**
 *周天数
 */
import { DateUtil } from '../Utils/DateUtil';
const WEEKDAY_NUMBER = 7;
@Entry
@Component
struct DayViewPage {
//日期Swiper控件索引
@State ShowDayIndex: number = 0;
//展示日期
@State ShowDay: Date = new Date();
//日期集合
@State DayList: Array<Date> = new Array<Date>();
//日期滑动前索引
@State DayStartIndex: number = 0;
//日期滑动后索引
@State DayEndIndex: number = 0;
//周Swiper控件索引
@State ShowWeekIndex: number = 0;
//周组件亮显索引
@State WeekDayIndex: number = 0
//周所有日期集合
@State CalendarLists: Array<Array<Date>> = new Array<Array<Date>>();
private _TimeNameList: string[] = [“日”, “一”, “二”, “三”, “四”, “五”, “六”]
private weekSwiperController: SwiperController = new SwiperController();
private daySwiperController: SwiperController = new SwiperController();
@Builder
OneDayBuilder(index: number, showDate: Date) {
Column() {
Text(this._TimeNameList[index])
.fontSize(14)
.margin({ bottom: 4 })
.fontColor(this.WeekDayIndex === index ? “#1655ed” : (index == 0 || index == 6) ? “#818382” : Color.Black)
Column() {
Text(showDate.getDate().toString())
.fontColor(this.WeekDayIndex === index ? Color.White : (index == 0 || index == 6) ? “#818382” : Color.Black)
.fontSize(20)
.fontWeight(FontWeight.Bold)
}
.backgroundColor(this.WeekDayIndex === index ? “#1655ed” : Color.White)
.width(35)
.height(35)
.borderRadius(17)
.justifyContent(FlexAlign.Center)
}
.justifyContent(FlexAlign.Center)
.height(“100%”)
.width(‘100%’)
.backgroundColor(Color.White)
.borderWidth({ bottom: 2 })
.borderColor("#f3f3f3")
.onClick(() => {
this.UpdateShowDayIndex(showDate)
})
}
aboutToAppear(): void {
//初始化今天的一周的前和后
this.ShowDay = new Date();
let thisWeek: Array<Date> = DateUtil.GetWeekDateList(this.ShowDay);
let previousWeek: Array<Date> = DateUtil.GetWeekDateList(DateUtil.GetNextDay(thisWeek[0], -1));
let nextWeek: Array<Date> = DateUtil.GetWeekDateList(DateUtil.GetNextDay(thisWeek[thisWeek.length-1], 1));
this.CalendarLists.push(previousWeek, thisWeek, nextWeek);
this.WeekDayIndex = this.ShowDay.getDay();
this.DayList = previousWeek.concat(thisWeek.concat(nextWeek));
this.ShowWeekIndex = 1;
this.ShowDayIndex = WEEKDAY_NUMBER + this.WeekDayIndex;
}
build() {
Column({ space: 5 }) {
Swiper(this.weekSwiperController) {
ForEach(this.CalendarLists, (item: Array<Date>, index) => {
Grid() {
ForEach(item, (oneDay: Date, dayIndex) => {
GridItem() {
this.OneDayBuilder(dayIndex, oneDay)
}
})
}
.columnsTemplate(‘1fr 1fr 1fr 1fr 1fr 1fr 1fr’)
})
}
.index(this.ShowWeekIndex)
.width(“100%”)
.height(65)
.loop(false)
.indicator(false)
.onAnimationEnd((index) => {
this.ShowWeekIndex = index;
if (index === 0) {
this.AddPreviousWeekDay();
} else if (index == this.CalendarLists.length - 1) {
this.AddNextWeekDay();
}
let tempShowDay: Date = this.CalendarLists[this.ShowWeekIndex][this.WeekDayIndex];
this.UpdateShowDayIndex(tempShowDay);
})
.margin({ top: 20 })
  Swiper(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.daySwiperController) {
    ForEach(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.DayList, (oneDay: <span class="hljs-built_in"><span class="hljs-built_in">Date</span></span>, dayIndex) =&gt; {
      Column() {
        Text(oneDay.toString())
          .fontSize(<span class="hljs-number"><span class="hljs-number">30</span></span>)
      }
      .height(<span class="hljs-string"><span class="hljs-string">"100%"</span></span>)
      .justifyContent(FlexAlign.Center)
    })
  }
  .loop(<span class="hljs-literal"><span class="hljs-literal">false</span></span>)
  .index(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.ShowDayIndex)
  .width(<span class="hljs-string"><span class="hljs-string">"100%"</span></span>)
  .indicator(<span class="hljs-literal"><span class="hljs-literal">false</span></span>)
  .layoutWeight(<span class="hljs-number"><span class="hljs-number">1</span></span>)
  .onAnimationStart((start, end, event) =&gt; {
    <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.DayStartIndex = start;
  })
  .onAnimationEnd((end, event) =&gt; {
    <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.DayEndIndex = end;
    <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.DaySwitch();
  })
}
.height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
}
/**

日程切换事件
*/
private DaySwitch() {
if (this.DayStartIndex == this.DayEndIndex) {
return;
}
//往右滑，临界值滑动，需要修改week的展示索引
if (this.DayStartIndex > this.DayEndIndex) {
this.WeekDayIndex–;
if (this.WeekDayIndex == -1) {
this.weekSwiperController.showPrevious();
this.WeekDayIndex = WEEKDAY_NUMBER - 1;
this.ShowDay = this.CalendarLists[this.ShowWeekIndex-1][this.WeekDayIndex];
}
}
//往左滑,临界值滑动，需要修改week的展示索引
else {
this.WeekDayIndex++;
if (this.WeekDayIndex == WEEKDAY_NUMBER) {
this.weekSwiperController.showNext();
this.WeekDayIndex = 0;
this.ShowDay = this.CalendarLists[this.ShowWeekIndex+1][this.WeekDayIndex];
}
}

}
/**

添加上一周
*/
private AddPreviousWeekDay() {
let previousWeek: Array<Date> = DateUtil.GetWeekDateList(DateUtil.GetNextDay(this.CalendarLists[0][0], -1));
this.CalendarLists.unshift(previousWeek);
this.weekSwiperController.changeIndex(1);
this.ShowWeekIndex = 1;
this.DayList = previousWeek.concat(this.DayList);
this.UpdateShowDayIndex();
}

/**

添加下一周
*/
private AddNextWeekDay() {
let nextWeek: Array<Date> =
DateUtil.GetWeekDateList(DateUtil.GetNextDay(this.CalendarLists[this.CalendarLists.length - 1][WEEKDAY_NUMBER -
1], 1));
this.CalendarLists.push(nextWeek);
this.DayList = this.DayList.concat(nextWeek);
this.UpdateShowDayIndex()
}

/**

更新显示日期
@param nwDate
*/
private UpdateShowDayIndex(nwDate?: Date) {
if (nwDate != undefined) {
this.ShowDay = nwDate;
}
this.WeekDayIndex = this.ShowDay.getDay();
let showDayIndex = this.DayList.findIndex(x =>
x.getFullYear() == this.ShowDay.getFullYear() &&
x.getMonth() == this.ShowDay.getMonth() &&
x.getDate() == this.ShowDay.getDate());
if (showDayIndex == -1) {
return;
}
this.daySwiperController.changeIndex(showDayIndex, false);
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

DateUtil

export class DateUtil {
  /**
   * 通过一天获得一周的date集合
   * [@param](/user/param) oneDay
   * [@returns](/user/returns)
   */
  public static GetWeekDateList(oneDay: Date): Array<Date> {
    let dataList: Array<Date> = [];
    let dayNumber: number = oneDay.getDay();
    for (let index = 0; index < 7; index++) {
      let tempDate: Date = new Date(oneDay);
      tempDate.setDate(tempDate.getDate() + (index - dayNumber));
      dataList.push(tempDate);
    }
    return dataList;
  }
public static GetNextDay(oneDay: Date, index: number): Date {
let tempDay: Date = new Date(oneDay);
tempDay.setDate(tempDay.getDate() + index);
return tempDay;
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>