日歷功能

1.日歷點擊選中
2.每天的狀態(tài)下標(biāo)

組件樣式

b39bb1826ad7054915a5b12a001ef9e.png

頁面部分

    <div class="calendar">
        <div class="title">
            <div class="btn" @click="Monthchange(1)">
                <van-icon name="arrow-left" />
            </div>
            <span>{{months}}</span>
            <div class="btn" @click="Monthchange(2)">
                <van-icon name="arrow" />
            </div>
        </div>
        <ul class="weeks">
            <li v-for="(v,i) in weeks" :key="i">{{v}}</li>
        </ul>
        <ul class="days">
            <li v-for="(v,i) in days" :key="i" @click="selectDay(v.date)"
                :style="i == 0?`margin-left: ${14.285 * Week}%`:''">
                <div :class="v.selected?'selected':''">
                    {{v.text}}
                    <div class="bottomInfo" v-if="v.bottomInfo"></div>
                </div>
            </li>
        </ul>
    </div>

js部分

      // 獲取月份的每天的狀態(tài)
      getMettingAndDay(type) {
        if (type == 1) {
          var time = new Date()
        } else {
          var time = new Date(this.months)
        }
        var YY = time.getFullYear()
        var MM = (time.getMonth() + 1)
        MM < 10 ? MM = '0' + MM : MM
        // 根據(jù)當(dāng)前月份 獲取當(dāng)前月份的天數(shù) 是30 還是31
        var num = new Date(time.getFullYear(), time.getMonth() + 1, 0).getDate()
        var all_day = []
        for (let i = 0; i < num; i++) {
          let str = new Date(`${YY}/${MM}/${i + 1} 00:00:00`).getTime()
          all_day.push(str / 1000)
        }
        this.$http.post(CONFIG.get_meeting_by_day, {
          all_day: all_day
        })
          .then(res => {
            if (res.data.code != 0) return this.$toast(res.data.msg)
            this.daysBottomInfo = res.data.data
            this.daysBottomInfo.forEach(element => {
              element.day_date = element.day_date.replace(/-/g, '/')
            });
            this.getDayAndWeek(type)
          }).catch(err => {
            console.log(err)
          })
      },
      // 獲取月份對應(yīng)天數(shù)與一號對應(yīng)星期幾
      getDayAndWeek(type) {
        if (type === 1) {
          var time = new Date()
          var YY = time.getFullYear()
          var MM = (time.getMonth() + 1)
          MM < 10 ? MM = '0' + MM : MM
          var DD = time.getDate()
          DD < 10 ? DD = '0' + DD : DD
          this.months = YY + '/' + MM
          this.selected = this.months + '/' + DD
          this.selectDay(this.selected)
        } else {
          var time = new Date(this.months)
        }
        // 根據(jù)當(dāng)前月份 獲取當(dāng)前月份的天數(shù) 是30 還是31
        var num = new Date(time.getFullYear(), time.getMonth() + 1, 0).getDate();
        var obj = {}
        this.days = []
        for (let i = 0; i < num; i++) {
          obj.text = i + 1
          obj.text < 10 ? obj.date = this.months + '/0' + obj.text : obj.date = this.months + '/' + obj.text
          obj.bottomInfo = false
          this.daysBottomInfo.forEach(element => {
            if (obj.date === element.day_date && element.status == 1) obj.bottomInfo = true
          })
          obj.selected = false
          if (obj.date === this.selected) obj.selected = true
          this.days.push(JSON.parse(JSON.stringify(obj)))
        }
        // console.log(this.months, this.days)
        // 根據(jù)當(dāng)前月份 獲取當(dāng)前月份一號星期幾
        this.Week = new Date(time + "-1").getDay()
      },
      // 月份切換 
      Monthchange(val) {
        let time = new Date(this.months)
        var YY = time.getFullYear()
        var MM = time.getMonth()
        if (val == 1) {
          if (MM) {                                       //  != 0  前一月
            MM < 10 ? this.months = `${YY}/0${MM}` : this.months = `${YY}/${MM}`
          } else {                                        // 月份 == 0后切換到上前一年的12月
            this.months = `${YY - 1}/12`
          }
        } else {
          if (MM == 11) {                                 // 月份滿 11 后年份加 一 月份變成 1 月
            this.months = `${YY + 1}/01`
          } else {                                        // 月份 正常 ++
            (MM + 2) < 10 ? this.months = `${YY}/0${MM + 2}` : this.months = `${YY}/${MM + 2}`
          }
        }
        this.getMettingAndDay(2); // 刷新日歷
      },

csss部分

        .calendar {
            width: 100%;
            height: 6.48rem;
            margin-top: 0.4rem;
            padding: 0px 0.2rem;
            background: #fff;

            .title {
                height: .88rem;
                padding: 0 .3rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;

                .btn {
                    width: .5rem;
                    height: .5rem;
                    background: rgba(0, 69, 147, 0.9);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    color: #fff;
                }
            }

            .weeks {
                display: flex;
                line-height: .6rem;
                font-size: 12px;
                text-align: center;

                li {
                    width: 14.285%;
                }
            }

            .days {
                display: flex;
                flex-wrap: wrap;
                line-height: .8rem;
                font-size: 16px;
                text-align: center;

                li {
                    width: 14.285%;
                    height: .8rem;
                    position: relative;

                    .selected {
                        margin: 0 auto;
                        width: .8rem;
                        height: .8rem;
                        background: rgb(0, 69, 147);
                        border-radius: 20%;
                        color: #fff;

                        .bottomInfo {
                            background: #fff;
                        }
                    }

                    .bottomInfo {
                        position: absolute;
                        right: 0;
                        left: 0;
                        bottom: .1rem;
                        width: .1rem;
                        height: .1rem;
                        background: #F77200;
                        margin: 0 auto;
                        border-radius: 50%;
                    }
                }
            }
        }

借鑒https://blog.csdn.net/weixin_46544600/article/details/117394859