自定义日历

<template>
  <div class="calendar">
    <div class="calendar-header">{{ year }} 年 {{ month }} 月</div>
    <div class="calendar-row-header">
      <div class="row-item" v-for="(item, index) in weekList" :key="index">{{ item }}</div>
    </div>
    <div class="calendar-row">
      <div v-for="(item, index) in dateArr" :key="index" class="row-item-wrap">
        <div class="row-item" :class="describe == item.describe ? 'nowDay' : ''">{{ item.dateNum }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      year: 0,
      month: 0,
      describe: '',
      weekList: ['日', '一', '二', '三', '四', '五', '六'],
      dateArr: []
    }
  },
  methods: {
    dateInit(setYear, setMonth) {
      // 全部时间的月份都是按0~11基准，显示月份才+1
      let dateArr = [];// 需要遍历的日历数组数据
      let arrLen = 0;// dateArr的数组长度
      let now = setYear ? new Date(setYear, setMonth) : new Date();
      let year = setYear || now.getFullYear();
      let nextYear = 0;
      let month = setMonth || now.getMonth();// 没有+1方便后面计算当月总天数
      let nextMonth = (month + 1) > 11 ? 1 : (month + 1);
      let startWeek = new Date(year + ',' + (month + 1) + ',' + 1).getDay();// 目标月1号对应的星期
      let dayNums = new Date(year, month, 0).getDate();//获取目标月有多少天
      let obj = {};
      let num = 0;
 
      if (month + 1 > 11) {
        nextYear = year + 1;
        dayNums = new Date(nextYear, nextMonth, 0).getDate();
      }
      arrLen = startWeek + dayNums;
      for (let i = 0; i < arrLen; i++) {
        if (i >= startWeek) {
          num = i - startWeek + 1;
          obj = {
            describe: year + '-' + (month + 1) + '-' + num,
            dateNum: num
          }
        } else {
          obj = {};
        }
        dateArr[i] = obj;
      }
      console.log(dateArr, 'dateArr');
      this.dateArr = dateArr;
    },
    lastMonth() {
      // 全部时间的月份都是按0~11基准，显示月份才+1
      const year = this.month - 2 < 0 ? this.year - 1 : this.year;
      const month = this.month - 2 < 0 ? 11 : this.month - 2;
      this.year = year;
      this.month = month + 1;
      this.dateInit(year, month);
    },
    nextMonth() {
      // 全部时间的月份都是按0~11基准，显示月份才+1
      const year = this.month > 11 ? this.year + 1 : this.year;
      const month = this.month > 11 ? 0 : this.month;
      this.year = year;
      this.month = month + 1;
      this.dateInit(year, month);
    }
  },
  created() {
    const now = new Date();
    this.year = now.getFullYear();
    this.month = now.getMonth() + 1;
    this.describe = this.year + '-' + this.month + '-' + now.getDate();
    this.dateInit();
  }
}
</script>
<style lang="scss">
.calendar {
  margin: 20rpx auto 40rpx;
  width: 690rpx;
  min-height: 588rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  .calendar-header {
    font-size: 36rpx;
    font-weight: 500;
    color: #2F3133;
    line-height: 40rpx;
    margin: 40rpx 0 30rpx;
    text-align: center;
  }
  .calendar-row-header, .calendar-row {
    display: flex;
    flex-wrap: wrap;
    .row-item-wrap {
      overflow: hidden;
    }
    .row-item {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      margin: 0 18rpx;
      font-size: 24rpx;
      color: #5F6165;
      line-height: 60rpx;
      text-align: center;
    }
  }
  .calendar-row {
    .row-item {
      margin: 8rpx 18rpx 14rpx;
      font-size: 30rpx;
      color: #2F3133;
    }
  }
}
</style>

实现效果：