(精华2020年5月14日更新) vue实战篇 element-ui日历实现日程安排和区间查询

首先在template加如下代码

<el-calendar v-model="日期">
        <template slot="dateCell" slot-scope="{date, data}">
          <div class="date-cell" :class="data.isSelected ? 'is-selected' : ''">
            <div class="calendar-day">
              {{
              data.day
              .split('-')
              .slice(2)
              .join('-')
              }}{{ data.isSelected ? '✔️' : ''}}
            </div>
            <div
              v-for="(item, index) in formatSchedule(data)"
              :key="index"
              class="subject_info"
            >{{item.工作内容}}</div>
          </div>
        </template>
      </el-calendar>

监听日历的各种点击事件

mounted() {
    this.$nextTick(() => {
      // 点击前一个月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", () => {
        if (this.Jobdata.部门id == "") {
          return;
        }
        this.GetJobset();
      });
    });
    this.$nextTick(() => {
      // 点击今天
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      prevBtn.addEventListener("click", () => {
        if (this.Jobdata.部门id == "") {
          return;
        }
        this.GetJobset();
      });
    });

    this.$nextTick(() => {
      // 点击后一个月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:last-child"
      );
      prevBtn.addEventListener("click", () => {
        if (this.Jobdata.部门id == "") {
          return;
        }
        this.GetJobset();
      });
    });
    this.$nextTick(() => {
      // 点击日历单元格
      let prevBtn = document.querySelectorAll(".el-calendar-table__row td");
      prevBtn.forEach(element => {
        element.addEventListener("click", () => {
          if (this.Jobdata.部门id == "") {
            return;
          }
          this.GetJobset();
        });
      });
    });
  },

监听值的变化和日程展示数据

//监听日历点击变化
  watch: {
    日期: function(newVal, oldVal) {
      this.Jobdata.日期 = moment(newVal).format("YYYY-MM-DD");
    }
  },
  computed: {
    formatSchedule() {
      return data => {
        return this.list.filter(ele => {
          let time = ele.日期; // 将时间戳转格式
          return moment(time).isSame(data.day); // 日历的时间是否和返回数据里的数据一样,返回的是布尔值
        });
      };
    }
  }

相关函数

/**
 *获得本月的开始日期和结束日期
 */
export function getMonthStartDateAndDateRange(time) {
    let oneDayLong = 24 * 60 * 60 * 1000;
    let now = time;
    let year = now.getFullYear();
    let monthStartDate = new Date(year, now.getMonth(), 1); //当前月1号
    let nextMonthStartDate = new Date(year, now.getMonth(), 1); //下个月1号
    let days = (nextMonthStartDate.getTime() -
        monthStartDate.getTime()) / oneDayLong; //计算当前月份的天数
    let monthEndDate = new Date(year, now.getMonth() + 1, days);
    let monthRange = [moment(monthStartDate).format("YYYY-MM-DD"), moment(monthEndDate).format("YYYY-MM-DD")];
    return monthRange;
}

GetJobset() {
      //获取当前日历页面日期区间axio请求后端数据自己替换
      Personnel.GetJobcontext(
        getMonthStartDateAndDateRange(this.日期)[0],
        getMonthStartDateAndDateRange(this.日期)[1],
        this.Jobdata.部门id
      ).then(response => {
        this.list = response.data.data;
      });
    },