1、佈局

<template>
  <div class="WorkCanlender">
    <div class="content not-select" @mouseup="endMove">
      <div
        class="calendBox day"
        v-for="(item, index) in calendarConfig.headerData"
        :key="'header' + index"
      >
        星期{{ item }}
      </div>
      <div
        class="calendBox day"
        v-for="(item, index) in calendarConfig.allData"
        :key="'day' + index"
        :class="item.select ? 'active' : ''"
        @mousedown="startMove($event, item)"
        @mouseover="setStatus($event, item)"
      >
        {{ item.month }}
        -
        {{ item.value }}
      </div>
    </div>
  </div>
</template>
 

2、資料

data() {
    return {
      moveFlag: false, // 是否開始計算移動
      calendarConfig: {
        headerData: ["日", "一", "二", "三", "四", "五", "六"],
        allData: [],
        startData: null,
        startEvent: null
      }
    };
  },

3、方法

methods: {
    getCalendarConfig() {
      // 全部的資料
      const allData = [];

      let weekDayX = 1; // 座標系X
      let weekDayY = 1; // 座標系Y
      let index = 1; // 索引
      function setData(obj) {
        const defaultObj = {
          x: weekDayX,
          y: weekDayY,
          select: false,
          index: index
        };
        allData.push(Object.assign(defaultObj, obj));
        weekDayX++;
        index++;
        if (weekDayX === 8) {
          weekDayY += 1;
          weekDayX = 1;
        }
      }
      const now = new Date(); //當前日期
      const nowMonth = now.getMonth(); //當前月
      const nowYear = now.getFullYear(); //當前年
      const monthStartDate = new Date(nowYear, nowMonth, 1); //本月的開始時間
      const monthEndDate = new Date(nowYear, nowMonth + 1, 0); //本月的結束時間

      // 獲取前空白格
      const beforeMonthDate = new Date(nowYear, nowMonth, 0); //上月的開始時間
      const maxBeforeDate = beforeMonthDate.getDate(); // 上個月總天數
      const maxDay = monthStartDate.getDay()
      if (maxDay > 0) {
        for (let i = 0; i < maxDay; i++) {
          const beforeObj = {
            value: maxBeforeDate - maxDay + i + 1,
            month: nowMonth
          };
          setData(beforeObj);
        }
      }

      // 獲取本月格子
      const endDate = monthEndDate.getDate(); // 本月一共多少天
      for (let i = 0; i < endDate; i++) {
        const calendObj = {
          value: i + 1,
          month: nowMonth + 1
        };
        setData(calendObj);
      }
      const maxAfterDate = weekDayX;
      // 獲取後空白格
      for (let i = 0; i < 8 - maxAfterDate; i++) {
        const afterObj = {
          value: i + 1,
          month: nowMonth + 2
        };
        setData(afterObj);
      }
      this.calendarConfig.allData = allData;
    },
    startMove(event, item) {
      this.calendarConfig.startEvent = event;
      this.calendarConfig.startData = item;
      item.select = !item.select;
      this.moveFlag = true;
    },
    setStatus(event, item) {
      if (this.moveFlag) {
        let startIndex = 0;
        let endIndex = 0;
        if (this.calendarConfig.startData.index > item.index) {
          startIndex = item.index;
          endIndex = this.calendarConfig.startData.index;
        } else {
          endIndex = item.index;
          startIndex = this.calendarConfig.startData.index;
        }
        this.calendarConfig.allData.forEach(i => {
          if (i.index >= startIndex && i.index <= endIndex) {
            i.select = true;
          } else {
            i.select = false;
          }
        });
      }
    },
    endMove(event, item) {
      this.moveFlag = false;
    }
  }
 

4 樣式

<style lang="scss">
.WorkCanlender {
  width: 100%;
  height: 100%;
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    .calendBox {
      width: 14.28%;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #ddd;
    }
    .active {
      background: aquamarine;
    }
  }
}
</style>
 

5 樣例