js获取当前月有几周（附带一个小组件）

要求

①出一个日历组件

②只显示当前月份

③点击日期和右边列表联动，

④当前天有预警时，日历出现小红点 

 按照我的思路来看必须要求当前月有几周啊，代码如下

 //获取当前月有几周  百度的别人的代码 但是它从第一个周一开始算该月第一周，所以下面有处理
   getWeeks(year, month) {
        var d = new Date();
        // 该月第一天
        d.setFullYear(year, month-1, 1);
        var w1 = d.getDay();
        if (w1 == 0){
          w1 = 7;
        } 
        // 该月天数
        d.setFullYear(year, month, 0);
        var dd = d.getDate();
        // 第一个周一
        let d1;
        if (w1 != 1){//第一天不是星期一
          d1 = 7 - w1 + 2;
        }else{
          d1 = 1;
        }
        let week_count = Math.ceil((dd-d1+1)/7);
        if(w1 == 1){//我的处理
          return week_count;
        }else{
          return week_count+1;
        }
        
    },

完整组件如下

<template>
  <div class="subCalendar allHeight">
    <div class="calendar-box allHeight">
      <div class="calendar-header">
          <div class="flex">
              <div class="flex-1">{{currentDate}}</div>
              <div class="flex-1" @click="choseTodayTask" style="cursor:pointer">今天</div>
          </div>
         
      </div>
      <div class="calendar-body">
        <table class="table table-bordered calendar-table" :class="weekTotal==6?'calendar-moreTable':''">
          <thead>
            <tr>
              <th>
                <div class="calendar-th">周一</div>
              </th>
              <th>
                <div class="calendar-th">周二</div>
              </th>
              <th>
                <div class="calendar-th">周三</div>
              </th>
              <th>
                <div class="calendar-th">周四</div>
              </th>
              <th>
                <div class="calendar-th">周五</div>
              </th>
              <th>
                <div class="calendar-th">周六</div>
              </th>
              <th>
                <div class="calendar-th">周日</div>
              </th>
            </tr>
          </thead>
          <tbody style="">
            <tr v-for="(tr,r) in weekArray" :key="r">
              <td v-for="(td,d) in tr" :key="d" :class="selectDate==$moment(td.time).date()?'activeTd':''">
                <div class="calendar-td calendarEnable"  v-if="td.time" @click="choseDate(td)">
                    <span v-if="td.task&&td.task.length>0">
                        <i class="i_red"></i>
                    </span>
                     <span style="display:inline-block;width:15px;">{{$moment(td.time).date()}}</span>
                </div>
                <!-- <div v-else-if="td.time">
                    {{$moment(td.time).date()}}
                </div> -->
                <div class="calendar-td" v-else></div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectDate:'',
      currentDate: "",
      weekArray: [],
      weekTotal:6
    };
  },
  methods: {
    //获取当前日期
    getCurrentDate() {
      this.currentDate = this.$moment().format("YYYY年MM月"); //获取当前月
    },
    //获取当前月的第一天是星期几
    getFirstDay() {
      var firstDate = new Date();
      firstDate.setDate(1); //第一天
      var firstDay = firstDate.getDay(); //获取当前月的第一天是星期几 2019年5月的第一天是星期三
      return firstDay;
    },
    //获取当前月有几周
   getWeeks(year, month) {
        var d = new Date();
        // 该月第一天
        d.setFullYear(year, month-1, 1);
        var w1 = d.getDay();
        if (w1 == 0){
          w1 = 7;
        } 
        // 该月天数
        d.setFullYear(year, month, 0);
        var dd = d.getDate();
        // 第一个周一
        let d1;
        if (w1 != 1){//第一天不是星期一
          d1 = 7 - w1 + 2;
        }else{
          d1 = 1;
        }
        let week_count = Math.ceil((dd-d1+1)/7);
        if(w1 == 1){
          return week_count;
        }else{
          return week_count+1;
        }
        
    },
    dealWidthDays(calendarData) {
      var dateArray = [];
      var nowDate = new Date()
      var week_count = this.getWeeks(
        nowDate.getFullYear(),
        nowDate.getMonth()+1,
      ); //获取当前月有几周
      this.weekTotal = week_count;
      var firstDay = this.getFirstDay(); //本月一号是星期几
      var firtWeek_count = 7 - firstDay + 1; //第一周有几天
      for (let i = 0; i < week_count; i++) {
        if (i == 0) {
          //第一周
          dateArray[i] = calendarData.slice(0, firtWeek_count);
          for (let j = 0; j < 7 - firtWeek_count; j++) {
            dateArray[i].unshift({
              time: "",
              task: []
            });
          }
        } else if (i == week_count - 1) {
          //最后一周
          dateArray[i] = calendarData.slice(
            firtWeek_count + (week_count - 2) * 7
          );
          var lastWeek_count = dateArray[i].length;
          for (let j = 0; j < 7 - lastWeek_count; j++) {
            dateArray[i].push({
              time: "",
              task: []
            });
          }
        } else {
          //除了第一周以及最后一周
          dateArray[i] = calendarData.slice(
            firtWeek_count + (i - 1) * 7,
            firtWeek_count + i * 7
          );
        }
      }
      //console.log(dateArray);
      this.weekArray = dateArray;
    },
    choseDate(data){
        this.selectDate = this.$moment(data.time).date();
        this.$emit('changeTask',data)
    },
    choseTodayTask(){
        this.selectDate = this.$moment().date();
        this.$emit("getTodayTask")
    }
  },

  created() {
      this.selectDate = this.$moment().date();
    this.getCurrentDate();
    // this.dealWidthDays();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.calendar-box {
  width: 340px;
   .i_red {
    display: inline-block;
    width:10px;
    height:10px;
    background:rgba(252,12,89,1);
    border:2px solid #4c183c;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 2px;
  }
  .calendar-header {
    height: 30px;
    font-size: 12px;
    text-align: center;
    color: #4cbdfe;
    border-left: 1px solid rgba(46, 73, 112, 0.5);
    border-right: 1px solid rgba(46, 73, 112, 0.5);
  }
  .calendar-body {
    height: calc(100% - 30px);
    overflow: hidden;

    .calendar-moreTable tbody {
        display: block;
        height:calc(232px - 53px);
        overflow-y: auto;
    }
    .calendar-moreTable thead,
    .calendar-moreTable tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;/*重要  表格固定算法*/
    }
    .calendar-table {
      height: 100%;
      tr {
        .calendar-td {
          height: 20px;
          line-height: 20px;
          padding: 0 6px;
          text-align: right;
        }
        .calendar-th{
          height: 23px;
          line-height: 23px;
          padding: 0 6px;
        }
        .activeTd{
            box-shadow: inset 0px 0px 20px rgba(255,255,255,.5);
        }
        .calendarEnable{
            cursor: pointer;
        }
      }
    }
    // .calendar-week {
    //   //周
    //   background: rgba(29, 40, 77, 0.5);
    //   color: #4cbdfe;
    //   height: 30px;
    // }
    // .calendar-days {
    //   height: calc(100% - 64px);
    //   .flex-cell {
    //     height: 25px;
    //   }
    // }
    // .flex-cell {
    //   width: 14%;
    //   text-align: center;
    //   font-size: 12px;
    //   border-right: 1px solid rgba(46, 73, 112, 0.5);
    //   border-bottom: 1px solid rgba(46, 73, 112, 0.5);
    // }
  }
}
</style>