还是展示下成品效果

image.png

懒得解释了，直接丢源码吧

里面有个农历的js文件，发私信找我索取

<template>
  <div class="rili">
    <div class="change">
      <span>
        <el-button @click="changeMonthFun(1)">上月</el-button>
      </span>
      <el-date-picker :clearable="false" v-model="date" style="width: 120px;" @change="handleChange" type="month" placeholder="选择年月">
      </el-date-picker>
      <el-button @click="changeMonthFun(2)">下月</el-button>
    </div>
    <div class="rili_mouth">
      <!--components/xx-calendar/xx-calendar.wxml-->
      <!-- 头部 -->
      <div class="title-wrap">
        <div class="week">
          <span v-for="(item, index) in weeksArr" :key="index">{{ item }}</span>
        </div>
      </div>
      <!-- 日期 -->
      <div class="date-wrap">
        <!-- 上个月日期 -->
        <div class="mouth-date last-mouth" v-for="(item, index) in lastMonthDays" :key="index + 'a'">
          <span class="day-span">{{ item.date }}</span>
          <span class="day-nongli">十五</span>
          <span class="day-dot"></span>
        </div>

        <!-- 当月日期 -->
        <div class="mouth-date current-mouth" v-for="(item, index) in nowMonthDays" :key="index"
          @click="selectDate(item)">
          <div class="day-box" :class="item.restDay ? 'active' : ''">
            <span class="day-span">{{ item.date }}</span>
            <span class="day-nongli">{{ item.day }}</span>
            <span class="tip" v-if="item.restDay">休</span>
            <span class="tip" v-else>班</span>
          </div>
        </div>
        <!-- 下个月日期 -->
        <div class="mouth-date next-mouth" v-for="(item, index) in nextMonthDays" :key="index + 'b'">
          <span class="day-span">{{ item.date }}</span>
          <span class="day-nongli">十五</span>
          <span class="day-dot"></span>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import calendarFormatter from "@/utils/calendar";
export default {
  data() {
    return {
      restDayArr:[],
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      date: new Date().getFullYear() + '-' + (new Date().getMonth() + 1),
      weeksArr: ['日', '一', '二', '三', '四', '五', '六'],
      nowMonth: new Date().getMonth() + 1, //本月是几月
      nowDay: new Date().getDate(), //本月当天的日期
      lastMonthDays: [], //上一个月
      nowMonthDays: [], //本月 
      nextMonthDays: [], //下一个月
    }
  },
  methods: {
    handleChange(val) {
    this.year = val.getFullYear()
    this.month = val.getMonth() + 1
    this.date = this.year + '-' + this.month
    console.log(this.date);
    this.createDays(this.year,this.month)
    this.getRestDays(this.year,this.month)
  },
    //获取当月天数
    getThisMonthDays(year, month) {
      return new Date(year, month, 0).getDate();
    },
    /** 总方法 */
    //创建日期
    createDays(year, month) {
      this.getLastMonthDays(year, month)
      this.getNowMonthDays(year, month)
      this.getNextMonthDays(year, month)
    },
    /** 获取上个月日期 */
    getLastMonthDays(year, month) {
      let nowMonthFirstDays = new Date(year, month - 1, 1).getDay()
      let lastMonthDays = []
      if (nowMonthFirstDays) { //判断当月的第一天是不是星期天
        //上个月显示多少天
        let lastMonthNums = month - 1 < 0 ? this.getThisMonthDays(year - 1, 12) : this.getThisMonthDays(year, month - 1); //判断是否会跨年
        //上个月从几号开始显示
        for (let i = lastMonthNums - nowMonthFirstDays + 1; i <= lastMonthNums; i++) {
          let time = new Date(year, month - 2, i).toLocaleDateString() //对应的时间
          lastMonthDays.push({
            date: i, //几号
            week: this.weeksArr[new Date(year, month - 2, i).getDay()], //星期几
            time,
            isNowMonthDay: ''
          });
        }
      }
      this.lastMonthDays = lastMonthDays
      console.log(this.lastMonthDays);
    },
    /** 获取当月日期 */
    getNowMonthDays(year, month) {
      let nowMonthDays = []
      let days = this.getThisMonthDays(year, month); //获取当月的天数
      for (let i = 1; i <= days; i++) {
        let d = new Date(year, month - 1, i)
        let years = d.getFullYear()
        let months = d.getMonth() + 1
        let day2 = d.getDate()
        let time = `${years + '/' + months + '/' + day2}` // 2023/3/3
        let timer = time.replace(/\//g, "-")
        let timer2 = timer.split('-')
        var day = calendarFormatter.solar2lunar(timer2[0], timer2[1], timer2[2]);
        let newdate
        if (day.IDayCn == '初一') {
          newdate = day.IMonthCn
        } else {
          newdate = day.IDayCn
        }
        nowMonthDays.push({
          date: i, //几号
          week: this.weeksArr[new Date(year, month - 1, i).getDay()], //星期几
          time,
          restDay: false,
          day: newdate,
        });
      }
      
      this.nowMonthDays = nowMonthDays
      console.log(nowMonthDays);
    },
    /** 获取下个月日期 */
    getNextMonthDays(year, month) {
      let {
        lastMonthDays,
        nowMonthDays,
      } = this
      let nextMonthDays = []
      let nextMonthNums = (lastMonthDays.length + nowMonthDays.length) > 35 ? 42 - (lastMonthDays.length + nowMonthDays.length) : 35 - (lastMonthDays.length + nowMonthDays.length) //下个月显示多少天
      let nowYear = (parseInt(month) + 1) > 12 ? year + 1 : year //下一个月的年份
      let nowMonth = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1 //下一个月的月份
      if (nextMonthNums) { //判断当前天数是否大于零
        for (let i = 1; i <= nextMonthNums; i++) {
          let time = new Date(year, month, i).toLocaleDateString()
          nextMonthDays.push({
            date: i, //几号
            week: this.weeksArr[new Date(nowYear, nowMonth - 1, i).getDay()], //星期几
            time,
            isNowMonthDay: ''
          });
        }
      }

      this.nextMonthDays = nextMonthDays
      console.log(nextMonthDays)
    },
    /** 切换月份 */
    changeMonthFun(e) {
      let {
        year,
        month
      } = this
      let type = e //类型
      if (type == 1) { //上一个月
        year = month - 1 > 0 ? year : year - 1
        month = month - 1 > 0 ? month - 1 : 12
      } else { //next 下个月
        year = (parseInt(month) + 1) > 12 ? year + 1 : year
        month = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1
      }
      this.year = year
      this.month = month
      this.createDays(year, month)
      this.getRestDays(year,month)

    },
    selectDate(item) {
      let date = item.time //选择的下标
      item.restDay = !item.restDay 
      let selectDate = date.replace(/\//g, "-")
      console.log("选择的时间", selectDate)
    },
    dislodgeZero(str) {
      let strArray = str.split("-");
      strArray = strArray.map(function (val) {
        if (val[0] == "0") {
          return (val = val.slice(1));
        } else {
          return val;
        }
      });
      return strArray.join("-");
    },
    getRestDays(year, month) {
      const restDays = [];

      // 获取当月第一天和最后一天的日期对象
      const firstDayOfMonth = new Date(year, month - 1, 1);
      const lastDayOfMonth = new Date(year, month, 0);

      // 循环处理每一天，判断是否为休息日（周六、周日）
      for (let day = 1; day <= lastDayOfMonth.getDate(); day++) {
        const date = new Date(year, month - 1, day);
        const dayOfWeek = date.getDay();

        if (dayOfWeek === 0 || dayOfWeek === 6) {
          // 如果是周六或周日，则将其加入到休息日数组中
          const formattedDate = `${year}-${month}-${day.toString().padStart(2, '0')}`;
          restDays.push(formattedDate);
        }
      }
      console.log(restDays);
      this.restDayArr = restDays
    }
  },
  mounted() {
    this.createDays(this.year, this.month);
    this.getRestDays(2023,5)
  },
  watch: {
    restDayArr(newValue, oldValue) {
      newValue.forEach(ele => {
        ele = this.dislodgeZero(ele).replace(/\-/g, "/")
        this.nowMonthDays.forEach(item => {
          if (ele == item.time) {
            item.restDay = true
          }
        })
      })
    }
  },
 
}
</script>

<style lang="scss" scoped>
.rili {
  border: 1px solid #2ba389;
  background: #eee;
  flex: 1;
  max-width: 544px;
  // min-height: 440px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;

  .change {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
  }

  .rili_mouth {
    border-top: 1px solid #2ba389;
    border-radius: 16px;
    flex: 1;
    background: #fff;
    padding-bottom: 12px;

    /* 头部样式start */
    .week {
      display: flex;
      justify-content: space-around;
      font-size: 14px;
      color: #1F1F1F;
      padding: 15px 0 10px 0;
    }

    /* 头部样式end */
    /* 日期区域样式start */
    .date-wrap {
      display: flex;
      flex-wrap: wrap;
    }

    .mouth-date {
      display: flex;
      font-size: 16px;
      flex-direction: column;
      align-items: center;
      width: calc(100% / 7);
      padding-top: 10px;
      padding-bottom: 10px;
      cursor: pointer;

    }

    .last-mouth span,
    .next-mouth span {
      opacity: 0;
    }

    .mouth-date .day {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #1F1F1F;

    }

    .mouth-date .day-nongli {
      font-size: 12px;
      color: #888888;
      margin: 3px 0 6px 0;
    }

    .tip {
      font-size: 12px;
      position: absolute;
      top: 0;
      right: 0;
      background: #4b9ef2;
      color: #fff;
      padding: 2px;
      border-radius: 3px;
    }

    .mouth-date .color {
      color: #8096F0;
    }

    .mouth-date .day-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: #8096F0;
    }

    .mouth-date .day-box {
      border-radius: 6px;
      padding: 8px 17px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      font-size: 16px;
      min-width: 58px;

    }

    .mouth-date .active {
      background-color: #f7d0cf;
    }

    .mouth-date .active span.tip {
      color: #fff;
      background: red;
    }

    .mouth-date .active span.day-span {
      color: red;
      font-weight: bold;
    }

    .mouth-date .active .day-nongli {
      color: red;
    }

  }
}
</style>