(精华)2020年7月19日 vue element-ui日历实现日程安排和区间查询

举报
愚公搬代码 发表于 2021/10/18 23:52:43 2021/10/18
【摘要】 首先在template加如下代码 <el-calendar v-model="日期"> <template slot="dateCell" slot-scope="{d...

首先在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>


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

监听日历的各种点击事件

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();
        });
      });
    });
  },


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52

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

//监听日历点击变化
  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); // 日历的时间是否和返回数据里的数据一样,返回的是布尔值
        });
      };
    }
  }


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

相关函数

/**
 *获得本月的开始日期和结束日期
 */
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;
}


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
GetJobset() {
      //获取当前日历页面日期区间axio请求后端数据自己替换
      Personnel.GetJobcontext(
        getMonthStartDateAndDateRange(this.日期)[0],
        getMonthStartDateAndDateRange(this.日期)[1],
        this.Jobdata.部门id
      ).then(response => {
        this.list = response.data.data;
      });
    },


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

文章来源: codeboy.blog.csdn.net,作者:愚公搬代码,版权归原作者所有,如需转载,请联系作者。

原文链接:codeboy.blog.csdn.net/article/details/107440367

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。