js realizes month switching, initializes the current month, advances to the previous month, and goes back to the next month.

Month selection, initialize the current month, switch forward to the previous month, and backward to the next month.

1. Initialize the date of the current month and put it in the array dayArr
2. Calculate the day of the week of the first day of the current month
3. Calculate the number of days in the current month
4. Calculate the date of the last day of the previous month
5. Complete the page display The date of the previous month
6. Complete the page to display the date of the next month
7. The detailed steps are in the js comment

Page rendering

code part

<template>
  <div class="monthPage">
    <div class="calendar">
      <!-- 星期 -->
      <div class="weekBox">
        <div v-for="(item, index) in dayArr" :key="index" class="weekTit">
          {
   
   { item }}
        </div>
      </div>

      <!-- 天数 -->
      <div class="itemBox" id="dateBox">
        <div
          v-for="(item, index) in dateArr"
          :key="index"
          class="dateItem">
			<!-- 本月日期-->
          <div class="dateNo">{
   
   { item.No }}</div>
          <!-- 非本月日期 -->
          <div v-show="!item.show" class="oneLabel noData">
            <div class="dateNo">{
   
   { item.No }}</div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import {
      
       onMounted, reactive, toRefs, watch } from "vue";
import {
      
       useCalendarStore } from "@/store/modules/calendar";

export default {
      
      
  setup() {
      
      
    const calendarStore = useCalendarStore();
    let {
      
       pageName, timeMove } = storeToRefs(calendarStore);
    const data = reactive({
      
      
      year: "", // 年
      month: "", // 月
      day: "", // 日
      dayArr: [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ], // 星期数组
      dateArr: [], // 当前月份的天数
      prevMonth: "",
    });

    const addZero = (date) => {
      
      
      return date.toString().padStart(2, "0");
    };

    onMounted(() => {
      
      
      let date = new Date();
      data.year = date.getFullYear();
      data.month = date.getMonth();
      data.prevMonth = date.getMonth();
      data.day = addZero(date.getDate()); // 补零
      initDate();
    });

//初始化月份
   const initDate = () => {
      
      
      data.dateArr = [];
      let firstDay = new Date(data.year, data.month, 1).getDay(); // 当月第一天星期几
      data.lastDay = new Date(data.year, data.month, 0).getDate(); // 当月最后一天

      let prevLastDate = new Date(data.year, data.prevMonth, 0).getDate(); // 上月的最后一天
      let monthNum = new Date(data.year, data.month + 1, -1).getDate() + 1; // 每月天数
       // 页面的文字显示  ==》 2020-11-02
      let dateStr = data.year + "-" + addZero(Number(data.month) + 1) + "-";
      // 当前月的日期添加到数组里
      for (let i = 1; i < monthNum + 1; i++) {
      
      
        let dateS = dateStr + addZero(i);
        data.dateArr.push({
      
       No: i, show: true, punchDate: dateS }); // 遍历添加当前月份的每一天
      }

	  //添加前一个月的日期
      for (let i = 0; i < firstDay; i++) {
      
      
        data.dateArr.unshift({
      
      
          No: prevLastDate - i,
          show: false,
          punchDate: "",
        }); //向前填充日期
      }

	  // 添加后一个月的日期
      let len = 8 - (data.dateArr.length % 7);
      for (let i = 1; i < len; i++) {
      
      
        data.dateArr.push({
      
       No: i, show: false, punchDate: "" }); // 向后填充日期
      }

    };
    watch(
      () => data.timeMove,
      (val) => {
      
      
  			// 监控用户点击了月份后一个月
          if (val === "next") {
      
      
            data.prevMonth++;
            if (Number(data.month) + 1 > 11) {
      
      
              data.month = 0;
              data.year = Number(data.year) + 1;
            } else {
      
      
              data.month = Number(data.month) + 1;
            }
            	// 监控用户点击了月份前一个月
          } else if (val === "prev") {
      
      
            data.prevMonth--;
            if (Number(data.month) - 1 < 0) {
      
      
              data.month = 11;
              data.year = data.year - 1;
            } else {
      
      
              data.month = Number(data.month) - 1;
            }
          }
          initDate ();
        }
      },
      {
      
      
        deep: true,
      }
    );

    return {
      
      
      ...toRefs(data), // 将 data 返回出去，就可以直接使用 data 里面的属性
      initDate ,
    };
  },
};
</script>

<style scoped lang="scss"></style>

Written at the end, if you have any questions, please leave a message~