Vant 日历组件改造，增加农历，左右点击按钮上一个月，下一个月

在网上找了一个vant 日历改造的文章vant 日历改造上一月 ,下一月 , 农历 ,节气, 节日 ,月份联动_李泽举的博客-CSDN博客_vant日历添加农历

感谢作者！ 经改造后可以正常运行，但测试后发现一个问题：

今天是2022年11月30号，点击到2023年2月的时候，发现并不是2月，而是2023年3月，错误如下所示：

到2023年2月份显示错误了， 因为2023年2月份有28天，我们传入的天数是30天，超出了2月份最大天数，所以出错了。修改的代码如下：

    arrowRight() {
      this.cont++;
      const days = this.getMonthDays(this.year, this.month + this.cont)
      this.defaultDate = new Date(
        this.year,
        this.month + this.cont,
        this.nowDay > days ? days : this.nowDay  //在此处修改
      );
      this._setMinMaxDay();
      // this.getNowDuty();
    },

 全部源码如下：

<template>
  <div class="be-on-duty">
    <!--nav-->
    <!-- <van-nav-bar title="值班" left-text="返回" class="nav" :fixed="true">
      <template #left>
        <i class="icon-home" @click="goHome()"></i>
      </template>
    </van-nav-bar> -->
    <!--calendar-->
    <div class="calendar mb-10">
      <van-calendar
        ref="calendars"
        :poppable="false"
        :show-confirm="false"
        :default-date="defaultDate"
        :style="{ height: '500px' }"
        :formatter="formatter"
        :min-date="minDate"
        :max-date="maxDate"
      >
      </van-calendar>
      <van-icon name="arrow-left" @click="arrowLeft" />
      <van-button type="danger" @click="goNow">回今天</van-button>
      <van-icon name="arrow" @click="arrowRight" />
    </div>
    <!--remind-->
    <!-- <ul class="remind">
      <li
        class="mt-10 pt-10 pb-10"
        v-for="(item, index) in dutyList"
        :key="index"
      >
        <div class="remind-left">
          <span class="remind-left ml-15 mr-15">{{ item.dutyDateShow }}</span>
          <span>{{ item.dutyWeek }}</span>
        </div>
        <div
          class="remind-right"
          :style="{ color: item.dutyPeriod == '白班' ? '#F8960B' : '#027DB4' }"
        >
          <span class="mr-15">●</span
          ><span class="mr-20">{{ item.dutyPeriod }}</span>
        </div>
      </li>
    </ul> -->
  </div>
</template>

<script>
// import { queryDutySchedule } from "@/api/system/beOnDuty";
import { calendar } from "js-calendar-converter";
import { Calendar, Button, Icon } from "vant";
export default {
  name: "beOnDuty",
  components: {
    VanCalendar: Calendar,
    VanButton: Button,
    VanIcon: Icon,
  },
  data() {
    return {
      minDate: new Date(),
      maxDate: new Date(),
      defaultDate: new Date(),
      dutyList: [],
      cont: 0,
      year: new Date().getFullYear(),
      month: new Date().getMonth(),
      nowDay: new Date().getDate(),
    };
  },
  created() {
    // this.getNowDuty();
    this._setMinMaxDay();
  },
  methods: {
    // 返回首页
    goHome() {},
    // 回到今天
    goNow() {
      this.defaultDate = new Date();
      this.minDate = new Date();
      this.maxDate = new Date();
      this.cont = 0;
      this._setMinMaxDay();
      // this.getNowDuty();
    },
    _setMinMaxDay() {
      this.showYear = this.defaultDate.getFullYear();
      this.showMonth = this.defaultDate.getMonth();
      var firstDay = new Date(this.defaultDate);
      firstDay.setDate(1);
      this.minDate = new Date(
        this.showYear,
        this.showMonth,
        firstDay.getDate()
      );
      var endDay = new Date(this.showYear, this.showMonth + 1, 1);
      endDay.setDate(0);
      this.maxDate = new Date(this.showYear, this.showMonth, endDay.getDate());
    },
    // 设置显示月份可选择的天数区间
    setMinMaxDay() {
      var firstDay = new Date(this.defaultDate);
      firstDay.setDate(1);
      this.minDate = new Date(
        this.year,
        this.month + this.cont,
        firstDay.getDate()
      );

      var endDate = new Date(this.defaultDate);
      endDate.setMonth(this.defaultDate.getMonth() + 1);
      endDate.setDate(0);
      this.maxDate = new Date(
        this.year,
        this.month + this.cont,
        endDate.getDate()
      );
    },
    // 当前月上一个月
    arrowLeft() {
      this.cont--;
      const days = this.getMonthDays(this.year, this.month + this.cont)
      this.defaultDate = new Date(
        this.year,
        this.month + this.cont,
        this.nowDay > days ? days : this.nowDay
      );
      this._setMinMaxDay();
      // this.getNowDuty();
    },
    getMonthDays(year, month) {
      let days = new Date(year, month + 1, 0).getDate();
      return days;
    },
    // 当前月下一个月
    arrowRight() {
      this.cont++;
      const days = this.getMonthDays(this.year, this.month + this.cont)
      this.defaultDate = new Date(
        this.year,
        this.month + this.cont,
        this.nowDay > days ? days : this.nowDay
      );
      this._setMinMaxDay();
      // this.getNowDuty();
    },
    getNowDuty() {
      // var y = this.defaultDate.getFullYear();
      // var m = this.defaultDate.getMonth() + 1;
      // m = m < 10 ? "0" + m : m;
      // const obj = {
      //   month: y + "-" + m,
      // };
      // queryDutySchedule(obj).then((res) => {
      //   this.dutyList = res.data;
      // });
    },
    // Vant日历日期添加法定节假日以及24节气
    formatter(day) {
      const _time = new Date(day.date);
      const y = _time.getFullYear();
      const m = _time.getMonth() + 1;
      const d = _time.getDate();
      const w = _time.getDay();
      const info = calendar.solar2lunar(y, m, d);
      //   改变周六周日显示颜色
      if (w === 0 || w === 6) {
        day.className = "weekendRed";
      }
      // var mm = m;
      // mm = m < 10 ? "0" + m : m;
      // var dd = d;
      // dd = d < 10 ? "0" + d : d;
      // var nowDate = y + "-" + mm + "-" + dd;
      // this.dutyList.forEach((item) => {
      //   if (item.dutyDate == nowDate) {
      //     if (item.dutyPeriod == "白班") {
      //       day.topInfo = "白";
      //     } else if (item.dutyPeriod == "夜班") {
      //       day.topInfo = "夜";
      //     }
      //   }
      // });
      //   优先级:节日>节气>农历
      if (info.festival != null && info.festival != "") {
        day.bottomInfo = info.festival;
      } else if (info.Term != null && info.Term != "") {
        day.bottomInfo = info.Term;
      } else if (info.IDayCn != null && info.IDayCn != "") {
        day.bottomInfo = info.IDayCn;
      }
      return day;
    },
  },
};
</script>

<style scoped lang="scss">
// @import "@/assets/style/variables.scss";
::v-deep.be-on-duty {
  background-color: gray;
  // .icon-home {
  //   display: block;
  //   width: 1.0625rem;
  //   height: 1.125rem;
  //   background: url(../../../assets/image/icon_home.png) no-repeat center;
  //   background-size: 100%;
  // }
  .calendar {
    .van-button--danger {
      height: 1.475rem;
      padding: 0.3125rem;
      position: absolute;
      top: 3.4rem;
      right: 4rem;
    }
    .van-icon-arrow {
      position: absolute;
      top: 3.6rem;
      right: 1.2rem;
      font-size: 1.3rem;
    }
    .van-icon-arrow-left {
      position: absolute;
      top: 3.6rem;
      left: 1.2rem;
      font-size: 1.3rem;
    }
    .van-calendar {
      .van-calendar__header {
        .van-calendar__header-subtitle {
          font-size: 1rem;
        }
        .van-calendar__weekdays {
          :nth-child(1),
          :nth-child(7) {
            color: red;
          }
        }
      }
    }
    .van-calendar__body {
      .van-calendar__month {
        .van-calendar__days {
          .van-calendar__day {
            font-size: 1.125rem;
            .van-calendar__top-info {
              padding-right: 0.625rem;
              text-align: right;
            }
          }
          .weekendRed {
            color: red !important;
          }
        }
      }
    }
  }
  .remind {
    li {
      background-color: red;
      display: flex;
      justify-content: space-between;
      .remind-left,
      .remind-right {
        text-align: left;
      }
    }
  }
}
</style>

 注意：记得安装获取农历的一个插件  npm i  js-calendar-converter