客户需求
1.在日历中选择预约日期（可单天选择或者多天选择）
2.在日历中根据预约项来反显已经预约的日期状态（上午可预约，下午可预约，全天可预约，全天不可预约）
3.周六周日非工作日显示全天不可预约

选择预约项，反显日历预约状态，根据现有预约状态去预约可预约时间
功能实现
1.选择日历插件
https://javascript.ctolib.com/xwpongithub-vue-better-calendar.html这里有日历的点击事件、

2.筛选周六周日反显不可预约

// 筛选周六周日
    time(y, m) {
      var tempTime = new Date(y, m, 0);
      var time = new Date();
      var saturday = new Array();
      var sunday = new Array();
      for (var i = 1; i <= tempTime.getDate(); i++) {
        time.setFullYear(y, m - 1, i);
        var day = time.getDay();
        if (day == 6) {
          saturday.push(i);
        } else if (day == 0) {
          sunday.push(i);
        }
      }
      var text =
        y +
        "年" +
        m +
        "月份" +
        "周六" +
        saturday.toString() +
        "周日" +
        sunday.toString();
      let data = saturday.map((key, value) => [key, sunday[value]]);
      return data;
    },
    // 周六周日不可预约反显
    notAppoint(year,month){
      return new Promise((resolve,reject)=>{
              let satSunList=this.time(year,month)
              satSunList.forEach(e=>{
                let sat=year+"-"+month+"-"+e[0]
                this.$set(this.events,sat,{className: 'price',title: '全天不可预约',styles: {background:"#6495ED"}})
                let sun=year+"-"+month+"-"+e[1]
                this.$set(this.events,sun,{className: 'price',title: '全天不可预约',styles: {background:"#6495ED"}})
              })
              resolve(this.events)
              reject("获取失败")
            })
    },

通过这两个函数调用可以筛选出周六周日
但是在写的时候遇到点问题，
遇到问题
saturday,sunday为两个数组，我想直接返回两个数组
解决方案
于是我把两个数组变成了一个二维数组data，这样我遍历二维数组，获取的e[0]，就是我本月周六的日期。**e[1]**就是我本月周日的日期。
在日历初始化，点击下一月按钮，点击上一月按钮都需要调用 notAppoint函数，获取周六周日不可预约的反显数据。
日历中events：{“2020-6-2”：{className: ‘price’,title: ‘全天不可预约’,styles: {background:"#6495ED"}}}为预约反显事件添加样式。所以我需要将e[0]e[1]拼接成yyyy-m-d形式
遇到问题
let sat=year+"-"+month+"-"+e[0]
this.events={sat：{className: ‘price’,title: ‘全天不可预约’,styles: {background:"#6495ED"}}}
这样加进去的events：{sat：{className: ‘price’,title: ‘全天不可预约’,styles: {background:"#6495ED"}}}形式，键名并不是日期
解决方案
所以我用到了es6方法this.events[sat]={className: ‘price’,title: ‘全天不可预约’,styles: {background:"#6495ED"}}这个问题就解决了
遇到问题
但是当我用这种方法给events添加对象时，我发现，数据加入进去，但是页面并没有渲染
解决方案
this.$set(this.events,sun,{className: ‘price’,title: ‘全天不可预约’,styles: {background:"#6495ED"}})
这样就解决这个问题了
events：{“2020-6-2”：{className: ‘price’,title: ‘全天不可预约’,styles: {background:"#6495ED"}}}中键名是yyyy-m-d形式，所以我需要删除掉0

// 日期去掉0
    dislodgeZero(str) {
      let strArray = str.split("-");
      strArray = strArray.map(function(val) {
        if (val[0] == "0") {
          return (val = val.slice(1));
        } else {
          return val;
        }
      });
      return strArray.join("-");
    },

日历bug
我在测试的时候发现，当我只预约周六或者周日的时候，日历并不会反显所预约的时间。但是当我预约一个非周六周日或者预约一个非周六周日和一个周六周日的时候，日历就会反显出预约时间。
我百思不得其解的研究一个下午。我输出this.events我发现，我预约的周六周日样式改变了，但是页面没有改变，我以为还是像原来一样，页面先显示后更新数据。但是我明明已经使用了

this.$set(this.events, appointDate, {
          className: "price",
          title: "下午可预约",
          styles: { background: "#ffd767" }
        });

写进了属性值，但是为什么页面还是没有反显呢。
后来我直接不让dialog框隐藏，当我选择预约项的时候，我发现this.events中已经改变的日期样式和title并没有变，那就是说我走的这个方案并没有奏效

1是当我改变预约项的时候我需要清空events样式。将周六周日样式放进去
2是我需要在他改变预约项的时候进行日历样式反显
但是很明显现在失败了。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
解决方案
后来我发现，可能是我改变预约项->events加入的是周六周日的对象->执行1->当1循环遍历数据库数据时，周六周日日期已经存在，所以无法覆盖掉原本的样式
所以我的2只是一个增的过程，而我现在需要的是改

所以我需要用接口数据跟events进行对比，如果events中有接口数据，那就说明预约时间含有周六周日，我就需要将他原来的日期样式进行更改

bug over