使用element ui日历组件实现今天之前都不能点击的功能

需求：如图，假如今天是7月18日，我们要实现今天之前的日子都不能点击，且变为灰色，今天以后的（包括下个月）都正常。之前百度了半天，都没有找到解决的方法，琢磨半天以后找到一个笨方法可以实现。

本文只讲思路和部分项目代码，实现还要靠个人手敲。

1.通过打开f12观察的dom节点，我们可以发现今天的格子是有类名的。所以我们可以从这里入手

ps: 在这里说一下一页日历中禁止非本月日期点击事件的方法:

// 使不是本月的日期不可点击，不会跳转到其他月份
/deep/ .el-calendar-table {
  &:not(.is-range) {
    td.next {
      pointer-events: none;
    }
    td.prev {
      pointer-events: none;
    }
  }

2.如果到此你都能理解下面就开始使用jQuery操纵dom节点进行修改

后两行代码是修改7.18日这一行 (7.12----7.18)
前两行代码是修改7.18日这一行之前的两行(7.1—7.11)
为什么要改两次,因为他们在不同的tr节点下(可能我比较笨不会一次修改完)

//span 是蓝色字体，需要改成灰色
   $('.is-today ').parent().prevAll().find('span').css('color', '#b4b4bb')
    $('.is-today ').parent().prevAll().css('pointer-events', 'none')
    $('.is-today ').prevAll().css('pointer-events', 'none')
    $('.is-today ').prevAll().find('span').css('color', '#b4b4bb')

到此本页日历今天之前都不可点击，且样式为灰色。
但是有个bug ：当点击下个月的时候样式会同步到下个月。所以我们要保证：
今天之前（包括上个月都不可点击且为黑色）
今天之后（包括下个月都正常点击且为正常色）

3.修改bug

直接上部分项目代码，读者可参照注释进行理解：
注意：count 为data中定义好的计数器。

  // 点击前一个月
    this.$nextTick(() => {
      let prevBtn = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:nth-child(1)');
      prevBtn.addEventListener('click', () => {
        // count =0 说明是本月    count 在 data中定义
        this.count--
        this.getMonthInfo(this.count) //获取本月的排班信息
        // 判断 是否月份是上个月还是下个月    
        // count < 0 说明是上个月
        // count >0 说明是下个月
        if (this.count < 0) {
          // 如果是上个月  那就全都不可选  文字变灰
          console.log(this.count);
          $('.current').css('pointer-events', 'none')
          $('.current').find('span').css('color', '#b4b4bb')
        } else if (this.count > 0) {
          // 如果是上个月  那就全都可选  文字变蓝
          $('.current').css('pointer-events', 'auto')
          $('.current').find('span').css('color', '#1c9bf7')
        } else if (this.count == 0) {
          // 如果是 等于七月  那么刷新页面  
          // 毕竟多次操纵dom节点  最开始的月份已经被该乱
          // 这里我直接刷新页面解决初始月份被该乱的问题  简单粗暴
          // 如果有大佬有更简单的办法更好
          location.reload();
        }
      })
    })
    // 点击后一个月
    this.$nextTick(() => {
      let prevBtn = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:last-child');
      prevBtn.addEventListener('click', () => {
        this.count++
        this.getMonthInfo(this.count) //获取本月的排班信息
        // 判断 是否月份是上个月还是下个月    
        // count < 0 说明是上个月
        // count >0 说明是下个月
        if (this.count < 0) {
          // 如果是上个月  那就全都不可选  文字变灰
          console.log(this.count);
          $('.current').css('pointer-events', 'none')
          $('.current').find('span').css('color', '#b4b4bb')
        } else if (this.count > 0) {
          // 如果是上个月  那就全都可选  文字变蓝
          $('.current').css('pointer-events', 'auto')
          $('.current').find('span').css('color', '#1c9bf7')
        } else if (this.count == 0) {
          // 如果是 等于七月  那么刷新页面  
          // 毕竟多次操纵dom节点  最开始的月份已经被该乱
          // 这里我直接刷新页面解决初始月份被该乱的问题  简单粗暴
          // 如果有大佬有更简单的办法更好
          location.reload();
        }
      })
    })
  // 点击今天  刷新页面  回到本日
    this.$nextTick(() => {
      let prevBtn = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:nth-child(2)');
      prevBtn.addEventListener('click', () => {
         location.reload();
      })
    })

总结：到此，需求逻辑已经完全实现，可能方法比较笨，但是想了半天凭自己水平只能这么解决了。如果有大佬有更好的方法欢迎指点。
可能讲的整体思路比较乱，需要自己多思考，我也是想了很久才琢磨明白。
下面上成品图（字体变蓝即可操纵，可点击）

七月：

六月：

八月：

最后，编程最重要的是逻辑思路，希望本文能给有问题的朋友一些启发。每个人都有不同解决问题的方法，也许看到一半你就突然明白该怎么写（因为我就是给朋友打电话问的时候突然有灵感的）。