一、使用技术
Vue
二、实现思路
1、一个月最多占用的是6周，因此日历表是日期分为6组。
2、获得当前月份有多少天，当前月份第一天是星期几。
3、获得上一个月份有多少天，根据获得的当前月份第一天来计算当前月份第一周从上个月几号开始。
4、第一周第一天到当前月的第一天即为上个月日期，然后根据当前月份的天数依次排开，剩余的天数即为下个月的日期。
5、判断今天日期是不是在当前月中，在的话标红。
三、注意事项
1、具体的颜色样式需求可以根据自己的需要进行更改。
2、想要获取点击的日期只需要添加点击事件进行获取即可。
四、效果图

calender.png

<div class="operation">
      <div @click="beforeDate">上一个月</div>
      <div>{{ currentYear + "-" + currentMonth }}</div>
      <div @click="afterDate">下一个月</div>
    </div>
    <div class="calender-container">
      <div class="calender-title">
        <span class="title-item" v-for="item in weekDays" :key="item">{{ item}}</span>
      </div>
      <div
        class="calender-title1"
        v-for="(week, index) in monthDays"
        :key="index"
      >
        <!-- 不是当前月份置灰显示 -->
        <!-- 是今天的话颜色为红色 -->
        <span
          v-for="(dayObj, index1) in week"
          :class="[
            'title-item',
            dayObj.month != 'current' ? 'not-current-month' : '',
            isToday(currentYear, currentMonth, dayObj.day),
          ]"
          :key="index1"
          >
            <span>{{ dayObj.day }}</span>
        </span>
      </div>
    </div>

六、JS代码

data() {
    return {
      // 当前年
      currentYear: 0,
      // 当前月
      currentMonth: 0,
      // 当前日
      currentDay: 0,
      weekDays: ["日", "一", "二", "三", "四", "五", "六"],
      // 月份日期数组
      monthDays: null,
      // 今天日期
      today: "",
    };
  },
created() {
    // 获得今天日期
    let currentDate = new Date();
    // 获得当前年
    this.currentYear = currentDate.getFullYear();
    // 获得当前月
    this.currentMonth = currentDate.getMonth() + 1;
    // 获得今天日期
    this.today =
      this.currentYear + "-" + this.currentMonth + "-" + currentDate.getDate();
      this.monthDays = this.getCurrentDateArray(
      this.currentYear,
      this.currentMonth
    );
  },
methods: {
 // 判断切换的日期中哪一天是今天
    isToday(year, month, day) {
      return this.today === year + "-" + month + "-" + day ? "is_today" : "";
    },
    // 上一个月份
    beforeDate() {
      if (this.currentMonth == 1) {
        this.currentYear = this.currentYear - 1;
        this.currentMonth = 12;
      } else {
        this.currentYear = this.currentYear;
        this.currentMonth = this.currentMonth - 1;
      }
      this.monthDays = this.getCurrentDateArray(this.currentYear,this.currentMonth);
    },
    // 下一个月份
    afterDate() {
      if (this.currentMonth == 12) {
        this.currentYear = this.currentYear + 1;
        this.currentMonth = 1;
      } else {
        this.currentYear = this.currentYear;
        this.currentMonth = this.currentMonth + 1;
      }
      this.monthDays = this.getCurrentDateArray(this.currentYear,this.currentMonth);
    },
    // 获得当前月的日期数组
    // {
    //   first:[1,2,3,4,5,6,7],
    //   second:[8,9,10,11,12,13,14],
    //   ...
    // }
    getCurrentDateArray(year, month) {
      // 获得当前月多少天以及当前月第一天是周几
      let { monthDaysCount, firstDayWeek } = this.getCurrentMonthDayNum(year,month);
      // 获得当前月份第一天所在周的上个月起始日期
      let beforeMonthDays =
        this.getBeforeMonth(year, month).monthDaysCount - firstDayWeek + 1;
      let days = [];
      var afterDay = 0;
      // 一个月份的时间跨度最多不超过六周即42天
      for (let index = 0; index < 42; index++) {
        // 上一个月日期 当前月份1号之前的天数都是上个月的日期
        if (index < firstDayWeek) {
          days.push({ day: beforeMonthDays++, month: "before" });
          // 当前月日期
        } else if (index >= firstDayWeek &&index < firstDayWeek + monthDaysCount) {
          days.push({ day: index - firstDayWeek + 1, month: "current" });
          // 下一个月日期
        } else {
          days.push({ day: ++afterDay, month: "after" });
        }
      }
      // 日期分组分为6组
      let daysObj = {};
      daysObj.first = days.slice(0, 7);
      daysObj.second = days.slice(7, 14);
      daysObj.third = days.slice(14, 21);
      daysObj.forth = days.slice(21, 28);
      daysObj.fifth = days.slice(28, 35);
      daysObj.sixth = days.slice(35, 42);
      return daysObj;
    },
    // 获得前一个月天数
    getBeforeMonth(year, month) {
      let beforeYear = undefined;
      let beforeMonth = undefined;
      if (month == 1) {
        beforeYear = year - 1;
        beforeMonth = 12;
      } else {
        beforeYear = year;
        beforeMonth = month - 1;
      }
      return this.getCurrentMonthDayNum(beforeYear, beforeMonth);
    },
    // 获得后一个月天数
    getAfterMonth(year, month) {
      let afterYear = undefined;
      let afterMonth = undefined;
      if (month == 12) {
        afterYear = year + 1;
        afterMonth = 1;
      } else {
        afterYear = year;
        afterMonth = month + 1;
      }
      return this.getCurrentMonthDayNum(afterYear, afterMonth);
    },
    // 获得当前月天数
    getCurrentMonthDayNum(year, month) {
      let leapYear = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
      let notLeapYear = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
      // 获得当前月份第一天是周几
      let firstDayWeek = new Date(year + "-" + month + "-" + "1").getDay();
      return {
        monthDaysCount: this.isLeapYear(year)
          ? leapYear[month - 1]
          : notLeapYear[month - 1],
        firstDayWeek,
      };
    },
    // 判断是否是闰年
    isLeapYear(year) {
      return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
    },
  },

七、css代码

.operation {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
}
.operation > div {
  border: solid 1px #cccccc;
  padding: 5px 8px;
  font-size: 8px;
  border-radius: 5px;
}
.calender-title {
  display: flex;
  justify-content: space-around;
  background: #ccc;
  padding-top: 5px;
  padding-bottom: 5px;
}
.calender-title1 {
  display: flex;
  justify-content: space-around;
  background: white;
  padding-top: 5px;
  padding-bottom: 5px;
}
.title-item {
  color: #666;
  display: block;
  width: 14%;
  text-align: center;
}
.not-current-month {
  color: #ccc;
}
.is_today {
  background: #eb4450;
  color: white;
  border-radius: 5px;
}
.mouse-hover:hover {
  background: wheat;
}