• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2024 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import Constants from '../constant/Constants';
17import { CalendarController, CalendarViewType, DayInfo } from '../components/CustomCalendar';
18import { CalendarData, CalendarStyle, Day } from '../model/CalendarModel';
19import { StyleUtils } from '../utils/StyleUtils';
20import { TimeUtils } from '../utils/TimeUtils'; // 时间计算工具类
21
22/**
23 * 周视图子组件
24 */
25@Component
26export struct WeekViewItem {
27  // 周视图日期数据
28  @State @Watch('getFirstDayData') weekDays: Day[][] = [];
29  // 当前选中的日期
30  @State currentSelectDay: DayInfo =
31    new DayInfo(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate(), 0); // 当前选中的日期
32  // 当前选中的日期，格式'year-month-date'
33  @Link @Watch('OnChangeSelectDate') currentSelectDate: string;
34  // 表示周视图第几周
35  @Prop @Watch('updateWeekData') weekNum: number;
36  private month: number = Constants.TODAY_MONTH;
37  // 自定义日历样式
38  calendarStyle: CalendarStyle = {};
39  // 周视图数据切换回调，返回一周中第一天的数据
40  onWeekSwitch: (item: CalendarData) => void = () => {
41  };
42  // 日期点击回调
43  onDateClick: (year: number, month: number, date: number) => void = () => {
44  };
45  // 日历控制器。这里用于控制添加日程后月视图数据刷新
46  controller?: CalendarController;
47
48  /**
49   * 日期选择监听
50   */
51  OnChangeSelectDate() {
52    const PARTS: string[] = this.currentSelectDate.split('-');
53    this.currentSelectDay.year = Number(PARTS[0]);
54    this.currentSelectDay.month = Number(PARTS[1]);
55    this.currentSelectDay.date = Number(PARTS[2]);
56  }
57
58  /**
59   * 周视图切换时，将当前周数据的第一天（周日）日期数据传出去
60   */
61  getFirstDayData() {
62    if (this.weekDays && this.weekDays[0][0].dayInfo) {
63      this.onWeekSwitch({
64        date: this.weekDays[0][0].dayInfo.date,
65        month: this.weekDays[0][0].dayInfo.month,
66        year: this.weekDays[0][0].dayInfo.year
67      })
68    }
69  }
70
71  /**
72   * 更新周数据
73   */
74  updateWeekData() {
75    this.getWeekViewData(this.weekNum);
76  }
77
78  /**
79   *  获取指定周数据
80   */
81  getWeekViewData(weekNum: number) {
82    this.weekDays = [...TimeUtils.getWeekDays(weekNum)];
83  }
84
85  aboutToAppear() {
86    if (this.controller) {
87      this.controller.schedulePointRefresh = this.schedulePointRefresh;
88    }
89    this.getWeekViewData(this.weekNum);
90  }
91
92  /**
93   * 刷新日程点数据
94   */
95  private schedulePointRefresh = () => {
96    this.updateWeekData();
97  }
98
99  /**
100   * 周视图一天的子组件
101   * @param day 日期
102   */
103  @Builder
104  weekDayBuilder(day: Day) {
105    Column() {
106      Text(day.dayNum + '')
107        .fontColor(StyleUtils.getColor(day, this.month, this.currentSelectDay, CalendarViewType.WEEK,
108          this.calendarStyle))
109        .fontSize(Constants.DAY_FONT_SIZE *
110          (this.calendarStyle.textScaling ? this.calendarStyle.textScaling : Constants.FONT_MULTIPLIER))
111        .fontWeight(FontWeight.Medium)
112      Text(day.lunarDay)
113        .fontColor(StyleUtils.getLunarDayColor(day, this.month, this.currentSelectDay, CalendarViewType.WEEK,
114          this.calendarStyle))
115        .fontSize(Constants.LUNAR_DAY_FONT_SIZE *
116          (this.calendarStyle.textScaling ? this.calendarStyle.textScaling : Constants.FONT_MULTIPLIER))
117    }
118    .width($r('app.integer.calendar_switch_size_forty'))
119    .height($r('app.integer.calendar_switch_size_forty'))
120    .borderRadius($r('app.integer.calendar_switch_size_forty'))
121    .borderColor($r('app.color.calendar_switch_border_color'))
122    .borderWidth(StyleUtils.getBorderWidth(day, this.month, this.currentSelectDay, CalendarViewType.WEEK))
123    .backgroundColor(StyleUtils.getBackgroundColor(day, this.currentSelectDay, this.calendarStyle))
124    .justifyContent(FlexAlign.Center)
125    .alignItems(HorizontalAlign.Center)
126    .onClick(() => {
127      // 获取年月日信息
128      this.onDateClick(day.dayInfo.year, day.dayInfo.month, day.dayInfo.date);
129      this.currentSelectDate = day.dayInfo.year + '-' + day.dayInfo.month + '-' + day.dayInfo.date;
130      this.currentSelectDay.year = day.dayInfo.year;
131      this.currentSelectDay.month = day.dayInfo.month;
132      this.currentSelectDay.date = day.dayInfo.date;
133    })
134  }
135
136  build() {
137    Column() {
138      ForEach(this.weekDays, (items: Day[]) => {
139        Row() {
140          ForEach(items, (item: Day) => {
141            Column() {
142              this.weekDayBuilder(item)
143              if (item.isShowSchedulePoint) {
144                // 日程点
145                Circle({ width: Constants.SCHEDULE_POINT_DIAMETER, height: Constants.SCHEDULE_POINT_DIAMETER })
146                  .fill($r('app.color.calendar_switch_schedule_point_color'))
147                  .margin({ top: $r('app.integer.calendar_switch_size_one') })
148              }
149            }
150            .height($r('app.integer.calendar_switch_size_forty_six'))
151          }, (item: Day, index: number) => {
152            return item.dayNum + '' + index + item.isShowSchedulePoint;
153          })
154        }
155        .width($r('app.string.calendar_switch_full_size'))
156        .justifyContent(FlexAlign.SpaceBetween)
157      }, (item: Day[], index: number) => {
158        return item.reduce((item1, item2) => {
159          return item1 + item2.dayInfo.year + item2.dayInfo.month + item2.dayInfo.date + item2.isShowSchedulePoint
160        }, '') + index;
161      })
162    }.width($r('app.string.calendar_switch_full_size'))
163  }
164}