van-calendar 实现移动端日历效果

   
        

          
          
        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

methods:{
 onClickDate(date) {
      this.selectedData = this.timeData[moment(date).format("YYYY-MM-DD")];
    },
        // 日期添加备注
    formatter(day) {
      // 当前月份的日
      const _time = new Date(day.date);
      const year = _time.getFullYear();
      const month = (_time.getMonth() + 1).toString().padStart(2, "0");
      const oneday = _time.getDate().toString().padStart(2, "0");
      const staDays = `${year}-${month}-${oneday}`;
      if (isHoliday(staDays)) {
        // 日期添加备注
        day.bottomInfo = "休";
        day.className = "holiday";
      }
      for (const key in this.timeData) {
        if (staDays == key) {
          if (this.timeData[key]["member_9898cif2"].length !== 0) {
            day.topInfo = "排班";
          } else {
            // 日期添加备注
            // day.topInfo = '排班'
          }
        }
      }
      this.timeData.forEach((item) => {
        // 当前点击的日相同
        if (date == this.timeData[i].key) {
          // console.log(this.timeData[i]['member_9898cif2'])
          // 判断预约次数是否为0
          if (
            this.timeData[i]["member_9898cif2"].length !== 0 &&
            this.timeData[i]["member_9898cif2"] != null
          ) {
            //值班领导

            // 日期添加备注
            day.topInfo = "已约满";
          } else {
            // 日期添加备注
            day.topInfo = "可预约";
          }
        }
      });
      return day;
    },
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

日历所需数据格式如下：

实现效果如下：

其中重要的几点：1.isHoliday(staDays) 判断是否是节假日

 if (isHoliday(staDays)) {
        // 日期添加备注
        day.bottomInfo = "休";
        day.className = "holiday";
      }
1
2
3
4
5