前言

最近接了一些外包项目，有些直接外包给第三方，有些自己拉团队写的，其中有一个项目需要我这边亲自上手写一些代码，然后就有了这篇文章，要写一个多选的日历需求，然后要默认选中周一到周五的日期！看了看Element-UI组件库，没有找到合适的，那干脆自己写一个吧！然而就在刚才无邪就发来消息说让我排除一下节假日

哈哈，没问题的

正文

实现这个功能需要用到vue-calendar-componen插件npm-vue-calendar-component

觉得他这个确实扩展性强为他点个赞！

安装vue-calendar-componen插件

npm i vue-calendar-component --save
cnpm i vue-calendar-component --save  //国内镜像速度快一些

详细文档可以自行去这个插件的npm仓库中看

项目中使用

	<div class="mainBox">
        <Calendar
          :textTop="['天','一','二','三','四','五','六']"
          v-on:choseDay="clickDay"
          :markDateMore="selectDate"
          :sundayStart='true'>
        </Calendar>
      </div>

data() {
      return {
      selectDate: [],//选中的日期
      };
},
created() {
 	  this.getWorking();
},
methods: {
	getWorking(){//获取当前月工作日
        let myDate = new Date();
        let tY = myDate.getFullYear();//得到当前年
        let tM = myDate.getMonth();//得到当前月+1
        let tD = new Date(tY,tM+1,0);
        let tT=tD.getDate();//得到当前月的天数

        for(var i=1;i<=tT;i++){
          let week =new Date(tY,tM,i).getDay()
          if(week>=1&&week<=5){
            let dd = tY + "/" + (tM + 1) + "/" + i;
            let temp={className: "mark1",date:dd}
            this.selectDate.push(temp)
          }
        }
        //console.log(JSON.stringify(this.selectDate))
      },
      resetSelect(){//重置选中的日期
        this.selectDate=[]
      },
      clickDay(today) {//选中日期
        // today格式为2020/8/7 改为 20200807
        console.log("当前选中日期===>", today);
        let existDate = this.selectDate;
        let isExist = true;
        for (var i = 0; i < existDate.length; i++) {
          if (existDate[i].date === today) {
            console.log("当前日期存已在===>",today);
            this.selectDate.splice(i,1);
            isExist = false;
          }
        }
        if (isExist) {//当前日期存在移除
          console.log("不存在-添加===>");
          let tempDate = {date: today, className: "mark1"}
          this.selectDate.push(tempDate)
        }
        console.log("this.selectDate===>",JSON.stringify(this.selectDate));
      }
}


<style lang="scss">

  .mark1 {
    color: white !important;
    background: #1890ff !important;
    border-radius: 50%;
  }

  .mainBox {
    .wh_content_all { /*主体*/
      background-color: #ffffff;
      border: 1px silver solid;
      border-radius: 5px;
      .wh_jiantou1{/*左箭头*/
        border-top: 2px solid #000000;
        border-left: 2px solid #000000;
      }
      .wh_jiantou2{/*右箭头*/
        border-top: 2px solid #000000;
        border-right: 2px solid #000000;
      }
      .wh_top_changge li { /*当前年月标题*/
        color: black;
      }
      .wh_content_item {
        margin-top: 5px;
        .wh_top_tag{/*星期标题*/
          color: #000000;
        }
        .wh_item_date {/*当前月*/
          color: #000000;
        }
        .wh_item_date:hover { //悬浮
          color: #1890ff;
          background: #ffffff;
          border-radius: 50%;
        }
        .wh_other_dayhide { /*上月和下月时间*/
          color: #bfbfbf;
        }
        .wh_chose_day { //选中
          background: #ffffff;
          color: #000000;
        }
        .wh_isToday { /*当前天*/
          /*background: #33ad53;*/
          background: #ff4d4d;
          color: #ffffff;
        }
      }

    }
  }

实现效果


然后现在满足一下无邪的节假日需求吧，实现这个功能只需要知道这个月的节假日有哪些，然后在初始化当前月的周一到周五中排除这个日期即可！
这个网站可以提供节假日查询接口 集合数据

申请一下即可

然后得到节假日数据后再排除