vue自定义季度日历

先看效果：

分析：
一年有12个月，有4个季度，每个季度有3个月。对应如下：

众所周知，我们js获取到的月份会比实际月份少1，也就是说获取的月份是从0-11.所以修改一下上图：

为什么季度也从0开始呢—当然是为了在数组中取值和赋值方便呀
由上图很明显的能观察到月份和季度的关系：开始月份=季度3 结束月份=季度3+2
也就是说：根据月份可以知道所在哪个季度，根据季度可以知道包含哪三个月。再计算出每个月1号开始是周几和每个月有多少天，就可以通过循环遍历得到日历啦~；结合实际情况，修改上图的流程图。也是我们接下来的数组结构。。

分析结束，上代码：

// 获取当前的日期
    getCurrentDate() {
      return new Date();
    },
    // 获取月份对应的是哪个季度
    getQuarterSeasonStartMonth(month) {
      var first = 0;
      var second = 1;
      var third = 2;
      var fourth = 3;
      //月份从0-11
      if (month < 3) {
        return first;
      }

      if (month < 6) {
        return second;
      }

      if (month < 9) {
        return third;
      }

      return fourth;
    },
    // 获取月的天数
    getMonthDays(year, month) {
      
      // 获取当前月的第一天是周几
      var beginWeek = new Date(year, month , 1).getDay();
      // 获取当前月份的天数
      var days = new Date(year, month+1, 0).getDate()
      return [beginWeek, days];
    },

 // 获取季度下对应的月份的开始周几和天数
    getQuarterDays(year, quarter) {
      let currentYearDays = this.daysArray.filter((item) => item.year == year);
      let quartrArray; // 当前年度季度的数组
      if (currentYearDays.length > 0) {
        quartrArray = currentYearDays[0].quarter;
      } else {
      // 一年有4个季度先准备好数组哦~
        quartrArray = [[], [], [], []];
      }
      let cuarrentQuarteyArray = quartrArray[quarter];
      if (cuarrentQuarteyArray.length == 3) {
        this.getShowArray();
        return;
      }
      let beginMonth = quarter * 3;
      let endMonth = quarter * 3 + 2;
      for (beginMonth; beginMonth <= endMonth; beginMonth++) {
        let temp = this.getMonthDays(year, beginMonth);
        if (temp.length == 2) {
          cuarrentQuarteyArray.push({ beginWeek: temp[0], days: temp[1] });
        }
      }
      // 存在
      if (this.daysArray.findIndex((item) => item.year == year) != -1) {
        let index = this.daysArray.findIndex((item) => item.year == year);
        this.daysArray[index].quarter = quartrArray;
      } else {
        this.daysArray.push({
          year: year,
          quarter: quartrArray,
        });
      }
      this.getShowArray();
    },

 getShowArray() {
      this.showArray = [];
      let yearDays = this.daysArray.filter(
        (item) => item.year == this.currentYear
      );
      if (yearDays.length > 0) {
        let quarterArray = yearDays[0].quarter;
        this.showArray = quarterArray[this.currentQuarter];
      }
    }

 // 点击上一步
    clickLast() {
      if (this.currentQuarter > 0) {
        this.currentQuarter--;
      } else {
        this.currentQuarter = 3;
        this.currentYear--;
      }
      this.getQuarterDays(this.currentYear, this.currentQuarter);
    },
    // 点击下一步
    clickNext() {
      if (this.currentQuarter < 3) {
        this.currentQuarter++;
      } else {
        this.currentQuarter = 0;
        this.currentYear++;
      }
      this.getQuarterDays(this.currentYear, this.currentQuarter);
    },

数据准备好了，页面渲染就可以

  <div v-for="(item, index) in showArray" :key="index + currentYear">
        <span class="day_div month_div"
          >{{ currentQuarter * 3 + index + 1 }}月</span
        >
        <div class="bottom_line">
          <span
            class="day_div"
            v-for="(week, index) in weekList"
            :key="index * currentYear"
            >{{ week }}</span
          >
        </div>
        <div>
          <span
            class="day_div"
            v-for="(emty, index) in item.beginWeek"
            :key="index * 10 * 2022"
          ></span>
          <span
            class="day_div"
            style="cursor: pointer"
            v-for="(day, dayIndex) in item.days"
            :key="dayIndex"
            >{{ day }}</span
          >
        </div>
      </div>

这里主要是日期的渲染，上个季度、下个季度，只需要修改季度和月份就可以啦。到此结束啦~~
完美，撒花