基于element 日历组件写了一个简单的日志

比如我们要统计过去每日做了什么，加了两个事件显示，每日是否做了什么，加了颜色，还加了气泡提示，可以自定义，我在这里写的是一个具体日期提示。
换上data里的arr就可以显示出效果啦！
也参考了https://blog.csdn.net/qq493820798/article/details/106858962博主的优秀文章，加了上个月下个月按钮的点击事件，
​​
话不多说，上代码吧：

<!--
 * @Author: lzy
 * @Date: 2020-08-10 18:10:31
 * @FilePath: \lcfc_code\lcfc_code\src\components\calendar2\index.vue
-->
<template>
  <div class="calen">
    <div class="tagging">
      <div>
        <div class="red colorBox"></div>
        <div style='margin-top:5px'>待<br />保<br />养</div>
      </div>
      <div>
        <div class="blue colorBox"></div>
        <div style='margin-top:5px'>部<br />分<br />保<br />养</div>
      </div>
      <div>
        <div class="green colorBox"></div>
        <div style='margin-top:5px'>保<br />养<br />完<br />成</div>
      </div>
    </div>
    <div class="calendar">
      <el-calendar v-model="value">
        <template
          slot="dateCell"
          slot-scope="{date, data}">
          <el-tooltip class="item" effect="dark" :content="data.day" placement="top-start">
            <div @click="handleDate(data)" :class="isDate(data.day) ==1 ? 'red' :isDate(data.day) ==2 ?'blue':isDate(data.day) ==3?'green':'white'">
              <div style="text-align :center;">{{isnum1(data.day)}}</div>
              <div style="text-align :center;">{{isnum2(data.day)}}</div>
            </div>
          </el-tooltip>
        </template>
      </el-calendar>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    dataArr:{
      type:Array
    }
  },
  data(){
    return {
      value:new Date(),
    }
  },
  created () {
    this.$nextTick(() => {
      // 点击前一个月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", e => {
        // this.$notify({
        //   title: "上一月",
        //   message: "上个月头天：" + this.value,
        //   type: "success",
        //   position: "top-left"
        // });
        this.$emit('handlePrev',this.value)
      });
 
      //点击下一个月
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextBtn.addEventListener("click", () => {
        // this.$notify({
        //   title: "下一月",
        //   message: "下个月头天：" + this.value,
        //   type: "warning",
        //   position: "top-left"
        // });
        this.$emit('handleNext',this.value)
      });
 
      //点击今天
      let todayBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      todayBtn.addEventListener("click", () => {
        this.$notify.info({
          title: "今天",
          message: "今天：" + this.value,
          position: "top-left"
        });
      });
    });
  },
  methods:{
    isDate(opt){
      let obj = Object.assign({},this.dataArr.filter((item)=>{return item.date == opt })[0])
      // console.log(obj.status)
      return  obj.status
    },
    isnum1(opt){
      let obj = Object.assign({},this.dataArr.filter((item)=>{return item.date == opt })[0])
      // console.log(obj.num1)
      return  obj.num1
    },
    isnum2(opt){
      let obj = Object.assign({},this.dataArr.filter((item)=>{return item.date == opt })[0])
      // console.log(obj.num2)
      return  obj.num2
    },
    handleDate(opt){
      console.log(opt)
    }
  }
}
</script>
<style lang="stylus" scoped>
.calen{
  display:flex;
}
.tagging{
  margin:20px;
}
.tagging>div{
  margin-top 10px;
  text-align center;
}
.is-selected {
  color: #1989FA;
}
.calendar{
  width :50%;
}
/deep/.el-calendar-day{
  height :42px;
}
/deep/.el-calendar-table thead th{
  padding:0 !important;
}
/deep/.prev{
  border:0;
  pointer-events:none;
  visibility hidden;
}
/deep/.next{
  border:0;
  pointer-events:none;
  visibility hidden;
}
/deep/.current{
  border:1px solid #EBEEF5
}
/deep/.el-calendar__body{
  padding:10px;
}
/deep/.el-calendar-day{
  padding:4px;
}
/deep/.el-calendar__header{
  padding:10px;
}
.colorBox{
  display:inline-block;
  width :20px;
  height 20px;
}
.red{
  background-color :red;
}
.blue{
  background-color :blue;
}
.green{
  background-color :green;
}
.white{
  background-color :white;
}
</style>

使用：

复制粘贴即用，有问题即可以随时联系我哦
​​​​​​​​​​​​​​​​​​​​