1.首先，安装 lunar-calendar 库：

npm install lunar-calendar

完整代码

<template>
  <div class="calendar">
    <div class="header">
      <div class="weekdays">
        <span v-for="day in weekdays" :key="day" class="weekday">{{ day }}</span>
      </div>
    </div>
    <div class="body">
      <div v-for="item in days" :key="item.day" class="day">
        <p v-if="item.type == 1" class="dayView green">
          {{ item.day }}
        </p>
        <p v-else-if="item.type == 2 && item.type != 1" class="dayView red">
          {{ item.day }}
        </p>
        <p v-else class="dayView">
          {{ item.day }}
        </p>
        <p class="lunarView"
          @click="getDateils(item.lunarFestival ? item.lunarFestival : item.solarFestival ? item.solarFestival :  item.term ? item.term : item.lunarDayName,item.type == 2 && item.type != 1)">
          {{ item.lunarFestival ? item.lunarFestival : item.solarFestival ? item.solarFestival :  item.term ? item.term : item.lunarDayName}}
        </p>
        <p class="dakaTextGreen" v-if="item.type == 1">已打卡</p>
        <p class="dakaTextRed" v-else-if="item.type == 2 && item.type != 1">未打卡</p>
      </div>
    </div>
  </div>
</template>  
  
<script>  
import LunarCalendar from 'lunar-calendar';

export default {
  data() {
    return {
      date: new Date(), // 当前日期  
      weekdays: ['日', '一', '二', '三', '四', '五', '六'], // 一周的日期（中文）  
      days: [], // 当前月份的日期列表（按照中国日历形式）  
      rows: [
        {
          complete_score: 2,
          completionLevelMessage: "较认真完成今日护肤打卡",
          continuity_days: 0,
          createdate: "2023-12-19 10:56:23",
          id: 9156406,
          images: [],
          remark: "dsadasd",
          vip_id: 4017427,
        }, {
          complete_score: 2,
          completionLevelMessage: "较认真完成今日护肤打卡",
          continuity_days: 0,
          createdate: "2023-12-20 10:56:23",
          id: 9156406,
          images: [],
          remark: "dsadasd",
          vip_id: 4017427,
        }
      ],//已打卡日期
    };
  },
  computed: {},
  mounted() {
    let date = new Date();
    // this.calendarData(2024, 12, 15)
    this.calendarData(date.getFullYear(), date.getMonth() + 1, date.getDate())
  },
  methods: {
    getDateils(e, type) {
      if (type) {
        this.is_tab = false;
      } else {
        this.$toast(e);
      }
    },
    calendarData(years, months, days) {
      const year = years;
      const month = months;
      const calendar = LunarCalendar.calendar(year, month);
      let time = new Date(`${years}-${months}-${days}`)
      let timeList = calendar.monthData
      // 判断当月1号是礼拜几
      time.setDate(1)
      for (let i = 0; i < time.getDay(); i++) {
        timeList.unshift({
          is_punch: false,
        })
      }
      this.days = timeList
      console.log('??', timeList)
      this.getAjax()
    },
    getAjax() {
      let arr = [];
      for (let i = 0; i < this.rows.length; i++) {
        let dateTime = this.rows[i].createdate.replace(/-/g, "/");
        let date = new Date(dateTime);
        this.rows[i].day = date.getDate() >= 10 ? date.getDate() : "0" + date.getDate();
        arr.push({
          day: this.rows[i].day
        });
      }
      let arry = this.days
      for (let j = 0; j < arry.length; j++) {
        if (arry[j].day == new Date().getDate()) {
          arry[j].type = 2
        }
        for (let a = 0; a < arr.length; a++) {
          if (arry[j].day === arr[a].day) {
            arry[j].type = 1
          }
        }
      }
      this.days = arry
    },
  }
};  
</script>  
  
<style lang="less" scoped>
.calendar {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  margin: 0 auto;
}
.header {
  background-color: #f5f5f5;
  padding: 10px;
}
.weekdays {
  display: flex;
  flex-direction: row;
  font-size: 14px;
}
.body {
  padding: 10px;
  display: flex;
  flex-flow: row wrap;
}
.weekday {
  width: 53px;
  text-align: center;
}
.day {
  width: 50px;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  border-bottom: 1px solid #f5f5f5;
  margin-bottom: 5px;
  .dayView {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
  }
  .lunarView {
    margin-top: 3px;
    font-size: 10px;
    color: #aaa;
    width: 100%;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .dakaTextGreen {
    color: #006c4a;
    font-size: 10px;
    margin-top: 5px;
  }
  .dakaTextRed {
    color: red;
    font-size: 10px;
    margin-top: 5px;
  }
  .green {
    background: #006c4a;
    color: #fff;
    font-weight: bold;
  }
  .red {
    background: red;
    color: #fff;
    font-weight: bold;
  }
}
</style>