利用element-ui的日历组件el-calendar改造为月

先上效果图

image.png

• 下面是DOM

 <el-calendar>
      <template slot="dateCell" slot-scope="{ data }">
        <div
          slot="reference"
          class="div-Calendar"
          @click="calendarOnClick(data)"
        >
          <p :class="data.isSelected ? 'is-selected' : ''">
            <span :class="(data.day>=startTime&&data.day<=endTime)||data.day==startTime?'active':''">{{
              data.day.split("-").slice(2).join("-")
            }}</span>
          </p>
        </div>
      </template>
    </el-calendar>

• data

  data() {
    return {
      startTime: "",
      endTime: "",
      nowDate: new Date(),
      clickcount: 0,
      clickitem: "",
    };
  },

• methods

  calendarOnClick(e) {
      this.clickcount++;
      this.clickitem = e.day;
      //开始日期
      if (this.clickcount % 2 == 1) {
        this.startTime = this.clickitem;
        this.endTime = "";
      } else {
        this.endTime = this.clickitem;
        if (this.startTime > this.endTime) {
          this.endTime = this.startTime;
          this.startTime = this.clickitem;
        }
      }
      console.log(this.startTime);
      console.log(this.endTime);
    },

• css

  ::v-deep .el-calendar__header {
    justify-content: center;
    user-select: none;
    // display: none;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
    padding: 0;
    .el-calendar__title {
      margin-bottom: 8px;
    }
    .el-button-group {
      display: flex;
    }
  }
  ::v-deep .el-calendar-table .el-calendar-day {
    height: 10px;
    text-align: center;
  }

  ::v-deep .el-calendar__body {
    padding: 12px 5px 20px;
  }
  ::v-deep thead {
    font-size: 12px;
    th {
      padding: 0;
    }
  }
  ::v-deep .el-calendar-table tr td {
    border: 0;
    user-select: none;
    // line-height: 20px;
    font-size: 13px;
  }
  ::v-deep .el-calendar-table .el-calendar-day {
    padding: 0;
  }
  ::v-deep .el-calendar-table td.is-selected {
    background-color: transparent;
  }
  ::v-deep .el-calendar-table .el-calendar-day:hover {
    background-color: transparent;
  }

  ::v-deep .el-checkbox__label {
    white-space: initial;
    padding: 10px;
  }
  .is-selected {
    background: #54ad8d;
    display: inline-block;
    width: 20px;
    border-radius: 2px;
    color: #fff;
  }
  .active {
    background: #54ad8d;
    display: inline-block;
    width: 20px;
    border-radius: 2px;
    color: #fff;
  }