类似于课程表切换上下周的日历

如下图

周数算法是从这个月第一个周一开始算第一周开始

 

<template>
  <div class="calendar1">
    <p>第一个日历</p>

    <div>
      <p>
        <span>总共{{week_counts}}周</span>
      </p>

      <div class="row">
        <span>{{nowYear}}年{{nowmonth}}月</span>
      </div>

      <div class="row">
        <span @click="lastWeek">上一周</span>
        <span>第{{nowWeek}}周</span>
        <span @click="nextWeek">下一周</span>
      </div>
      <div class="calendar">
        <div class="calendartittle">日历区域-----周</div>

        <div class="calendarwrap">
          <div class="calendarList" v-for="(val) in nav" :key="val">{{val}}</div>
          <div class="calendarList" v-for="(item,index) in weeks " :key="index">{{item.Date}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "calendar1",
  data() {
    return {
      nav: [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日"
      ],

      nowYear: new Date().getFullYear(),
      nowmonth: new Date().getMonth() + 1,
      nowDay: new Date().getDate(),
      nowWeek: 1,

      calendarList: [
        {
          value: "",
          count: ""
        }
      ],
      weeks: [],
      week_counts: null
    };
  },
  components: {},
  created() {},
  mounted() {
    this.week_counts = this.getWeeks(this.nowYear, this.nowmonth); //总周数
    this.nowWeek = this.getweek(this.nowYear, this.nowmonth, this.nowDay); //当前是几周
    this.DrawWeeks(this.nowYear, this.nowmonth, this.nowWeek); //周数
  },
  methods: {
    DrawWeeks(year, month, week) {
      this.weeks = this.getweekArr(year, month, week);
    },

    //判断当前日期是第几周
    getweek(year, month, data) {
      var date = new Date(year, month - 1, data),
        w = date.getDay(), //表示是周几 0-6
        d = date.getDate(); //表示是几号  1-31
      return Math.ceil((d - w) / 7); //当前日期加上本周未过的时间除以7向上取整得到本月是第几周
    },

    lastWeek() {
      this.nowWeek--; //周数减少
      //如果当前周数小于等于0时  周数为上一个月的周数  月份减1  月份小于0时变成12
      if (this.nowWeek <= 0) {
        this.nowmonth--;
        if (this.nowmonth <= 0) {
          this.nowmonth = 12;
          this.nowYear--;
        }
        this.nowWeek = this.getWeeks(this.nowYear, this.nowmonth); //更新第几周
        this.week_counts = this.getWeeks(this.nowYear, this.nowmonth); //更新本月周数
      }

      this.DrawWeeks(this.nowYear, this.nowmonth, this.nowWeek);
    },
    nextWeek() {
      this.nowWeek++;

      //如果当前周数大于本周周数时  周数为1 月份加1
      if (this.nowWeek > this.week_counts) {
        this.nowmonth++;
        if (this.nowmonth > 0) {
          this.nowmonth = 1;
          this.nowYear++;
        }
        this.nowWeek = 1;
        this.week_counts = this.getWeeks(this.nowYear, this.nowmonth);
      }

      this.DrawWeeks(this.nowYear, this.nowmonth, this.nowWeek);
    },

    //获取本月第一个周一是几号
    get_firstDay(year, month) {
      // 一般顺序是[1,2,3,4,5,6,7]
      // 该月第一天是周几  转换成1-7   如果是周1那就是1号  否则就往后推迟（一周有7天当前周几距离下一个周一有几天）
      var w1 = new Date(year, month - 1, 1).getDay();
      if (w1 == 0) w1 = 7;

      // 第一个周一是几号  (7-w1代表这周还有几天过完  2是代表周一新的一天+1号当天)
      let d1;
      if (w1 != 1) d1 = 7 - w1 + 2;
      else d1 = 1;

      return d1;
    },

    //获取当前周周一到周天的数组
    getweekArr(year, month, week) {
      let firstday = this.get_firstDay(year, month);
      let week_firstdate = firstday + (week - 1) * 7;
      let result = [1, 2, 3, 4, 5, 6, 7];

      console.log("本周的周一是" + week_firstdate + "号");

      let now_time = new Date(year, month - 1, week_firstdate).getTime(); //第week周第一个星期一的时间戳

      return result.map(i => {
        let curyear = new Date(
          now_time + 24 * 60 * 60 * 1000 * (i - 1)
        ).getFullYear();
        let curmonth = new Date(
          now_time + 24 * 60 * 60 * 1000 * (i - 1)
        ).getMonth();
        let curdate = new Date(
          now_time + 24 * 60 * 60 * 1000 * (i - 1)
        ).getDate();

        // return curyear + '-' + curmonth + '-' + curdate;
        return {
          Year: curyear,
          Month: curmonth,
          Date: curdate
        };
      });
    },

    //根据年月获取周数
    getWeeks(year, month) {
      // 该月第一天是周几  转换成1-7
      var w1 = new Date(year, month - 1, 1).getDay();
      if (w1 == 0) w1 = 7;

      // 第一个周一是几号  (7代表一周有7天  w1表示是周几  2代表的是周一在第二格)
      let d1;
      if (w1 != 1) d1 = 7 - w1 + 2;
      else d1 = 1;

      // 该月天数
      var dd = new Date(year, month, 0).getDate();

      //从第一个周一是几号开始算起距离本月结束有多少天除以7向上取整
      let week_count = Math.ceil((dd - d1 + 1) / 7);
      return week_count;
    }
  },

  //计算属性
  computed: {},

  watch: {}
};
</script>

<style scoped lang="scss">
@import "../../common/common.css";

.row {
  display: flex;
  flex-wrap: nowrap;
  background: #fff;
  margin-bottom: 10px;
  line-height: 30px;

  span {
    flex: 1;
    text-align: center;
  }
}

.calendar {
  background: #fff;

  .calendartittle {
    text-align: center;
    color: red;
    line-height: 30px;
  }

  .calendarwrap {
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .calendarList {
      width: 14%;
      line-height: 30px;
      text-align: center;
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>