自定义日历

1.引入库

npm install moment --save //日历
npm install vue-lunar-calendar --save //农历转换

2.在使用的文件中引入（也可在main.js中全局引入，具体看需求）

import moment from "moment"
//Vue.prototype.$moment = moment;

import lunarCalendar from 'vue-lunar-calendar'
//Vue.component('lunar-calendar', lunarCalendar)

3.在需要使用日期的地方使用

<template>
  <div class="canlendar-right">
    <div class="header">
      <div> {{ filterTime(selectMonth) }} </div>
      <div>
        <el-button
          @click="handlePrev"
          icon="el-icon-arrow-left"
          circle
        ></el-button>
        <el-button
          @click="handleNext"
          icon="el-icon-arrow-right"
          circle
        ></el-button>
      </div>
    </div>
    <div class="calendar">
      <div class="specific-date"> {{ lunarDate(selectMonth) }}<span>{{ week(selectMonth) }}</span> </div>
    </div>
    <div class="week-header">
      <div v-for="item in weekData" :key="item"> {{ item }} </div>
    </div>
    <div class="week-day">
      <div
        class="day"
        v-for="item in calendarArr"
        :key="item.value"
        @click="handleChangeCalendar(item)"
      >
        <span
          :class="[
            item.isNow ? 'currentDay' : 'otherDay',
            { active: item.value === selectDate },
          ]"
        > {{ item.label }} </span>
      </div>
    </div>
  </div>
</template>

<script>
import LunarCalendar from "lunar-calendar";
import moment from "moment";
const weekData = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
export default {
  data() {
    return {
      weekData,
      calendarArr: [],
      selectDate: moment().format("YYYY-MM-DD"),
    };
  },
  computed: {
    selectMonth() {
      return moment(this.selectDate).format("YYYY-MM-DD");
    },
    //获取当月第一天是星期几
    beginDay() {
      // return new Date(this.year, this.month - 1, 1).getDay();
      let date = new Date(this.selectMonth);
      date.setMonth(date.getMonth(), 1);
      return date.getDay();
    },
    //获取当月最后一天
    curDays() {
      let date = new Date(this.selectMonth);
      date.setMonth(date.getMonth() + 1, 0);
      return date.getDate();
    },
    //获取上月最后一天
    prevDays() {
      let date = new Date(this.selectDate);
      date.setDate(0);
      return date.getDate();
    },
  },
  mounted() {
    this.getInitDate();
  },
  methods: {
    handlePrev() {
      this.selectDate = moment(this.selectDate)
        .subtract(1, "month")
        .format("YYYY-MM-DD");
      this.getInitDate();
    },
    handleNext() {
      this.selectDate = moment(this.selectDate)
        .add(1, "month")
        .format("YYYY-MM-DD");
      this.getInitDate();
    },
    getInitDate() {
      let calendarArr = new Array(42);
      this.calendarArr = [];
      const date = new Date(this.selectDate);
      this.year = date.getFullYear();
      this.month = date.getUTCMonth() + 1;
      this.day = date.getDate();
      for (let i = 1; i <= 42; i++) {
        if (i - this.beginDay > 0 && i - this.beginDay <= this.curDays) {
          calendarArr[i] = {
            label: i - this.beginDay,
            value: moment(
              `${this.year}-${this.month}-${i - this.beginDay}`
            ).format("YYYY-MM-DD"),
            isNow: true,
          };
        } else if (i - this.beginDay <= 0) {
          let year = this.year;
          let month = this.month - 1;
          if (this.month === 1) {
            year = year - 1;
            month = 12;
          }
          calendarArr[i] = {
            label: i - this.beginDay + this.prevDays,
            value: moment(
              `${year}-${month}-${i - this.beginDay + this.prevDays}`
            ).format("YYYY-MM-DD"),
          };
        } else {
          let year = this.year;
          let month = this.month + 1;
          if (this.month === 12) {
            year = year + 1;
            month = 1;
          }
          calendarArr[i] = {
            label: i - this.beginDay - this.curDays,
            value: moment(
              `${year}-${month}-${i - this.beginDay - this.curDays}`
            ).format("YYYY-MM-DD"),
          };
        }
      }
      this.calendarArr = calendarArr.filter((v) => v.label);
    },
    handleChangeCalendar(item) {
      this.selectDate = item.value;
    },
    filterTime(value) {
      const moon = [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月", ];
      let date = new Date(value);
      let y = date.getFullYear();
      let m = date.getMonth();
      // let m = date.getMonth() + 1;
      // m = m < 10 ? "0" + m : m;
      let time = y + ", " + moon[m];
      return time;
    },
    lunarDate(value) {
      const date = new Date(value);
      const lunar = LunarCalendar.solarToLunar(
        date.getFullYear(),
        date.getMonth() + 1,
        date.getDate()
      );
      return (
        lunar.GanZhiYear +
        "年" +
        " " +
        "农历" +
        lunar.lunarMonthName +
        lunar.lunarDayName
      );
    },
    week(value) {
      const date = new Date(value);
      const weekdays = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", ];
      return weekdays[date.getDay()];
    },
  },
};
</script>

<style lang="scss" scoped>
.canlendar-right {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 31px 0;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    font-family: HONOR Sans CN, HONOR Sans CN;
    font-weight: 500;
    color: #242731;
    line-height: 24px;
    width: 100%;
    .el-button {
      border: none;
    }
    .el-button:hover {
      color: #ffae95;
      background-color: rgba(255, 190, 156, 0.3);
    }
    ::v-deep .el-icon-arrow-left:before {
      font-style: 18px;
    }
    .el-button--medium {
      font-size: 14px;
    }
  }
  .calendar {
    width: 100%;
    font-size: 14px;
    font-family: HONOR Sans CN, HONOR Sans CN;
    font-weight: 400;
    color: #707070;
    line-height: 27px;
    margin: 10px 0 0;
    .specific-date {
      padding: 0 20px;
      background-color: #f9fafb;
      display: inline-block;
      span {
        padding-left: 10px;
      }
    }
  }
}
.week-header {
  font-size: 14px;
  font-family: HONOR Sans CN, HONOR Sans CN;
  font-weight: 300;
  color: #c3c3c3;
  line-height: 21px;
  text-align: center;
  width: 100%;
  display: flex;
  margin: 15px 0;
}
.week-header div {
  width: 100px;
}
.week-day {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.day {
  height: 40px;
  width: calc(100% / 7);
  text-align: center;
  line-height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 5px 0;
}
.currentDay {
  font-size: 16px;
  font-family: HONOR Sans CN, HONOR Sans CN;
  font-weight: 400;
  color: #5f6165;
  line-height: 30px;
  display: inline-block;
  width: 30px;
  height: 30px;
}
.otherDay {
  color: #c9cdd4;
  font-size: 16px;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
}
.active {
  border-radius: 50%;
  background: #ff7e86;
  color: #fff;
  box-shadow: 0px 6px 20px 1px rgba(255, 126, 134, 0.4);
}
.task-height {
  width: 100%;
  height: 20px;
  background: rgba(233, 247, 255, 0.6);
  border-top: 2px solid rgba(24, 144, 255, 1);
  position: relative;
}
.task-height span {
  position: absolute;
  top: -39px;
  transform: translateX(-50%);
  display: inline-block;
  width: 100%;
  text-align: center;
  font-weight: 400;
  font-size: 12px;
  color: #5698d6;
  font-family: MiSans-Normal;
}
.over-load {
  background: rgba(255, 242, 232, 1);
  border-top: 2px solid rgba(255, 122, 69, 1);
}
.over-load span {
  color: #fa8c16;
}
</style>

效果图片：