<template>
     <div class="app-container">
   <el-calendar v-model="value" id="calendar">
     <template slot="dateCell" slot-scope="{date, data}">
       <p>{{ data.day.split('-').slice(2).join('-') }}日</p>
       <div v-for="(item,index) in calendarData" :key="index">
         <div v-if="data.day == item.day">
               <el-button size="mini" round>{{item.times}}分钟</el-button>
               <el-button size="mini" round type="success">{{item.num}}次</el-button>
         </div>
       </div>
    </template>
  </el-calendar>
     </div>
</template>

<script>
import { Pou_SumByCanendar } from "@/api/chart";
import moment from 'moment'
export default{
    data() {
    return {
      calendarData:[],
      value: moment().format('YYYY-MM-DD'),
    };
  },
  created() {
    this.Bind();
    this.$nextTick(() => {
        // 点击前一个月
        let prevBtn = document.querySelector(
          ".el-calendar__button-group .el-button-group>button:nth-child(1)"
        );
        prevBtn.addEventListener("click", e => {
          let d = new Date(this.value);
          this.value =  moment(d).add(-1,"MM").format('YYYY-MM-DD');
        })
        //点击下一个月
        let nextBtn = document.querySelector(
          ".el-calendar__button-group .el-button-group>button:nth-child(3)"
        );
        nextBtn.addEventListener("click", e => {
          let d = new Date(this.value);
          this.value =  moment(d).add(1,"MM").format('YYYY-MM-DD');
        })
        //点击今天
        let todayBtn = document.querySelector(
          ".el-calendar__button-group .el-button-group>button:nth-child(2)"
        );
        todayBtn.addEventListener("click", e => {
          this.value =  moment(new Date()).format('YYYY-MM-DD');
        })

      });  
  },
  methods: {
    async Bind() {
      await Pou_SumByCanendar(this.value).then((res)=>{
        console.log(JSON.stringify(res.data));
          this.calendarData=res.data;
      });
      
    },
    dateFormat:function(date){
        return moment(date).format("YYYY-MM-DD")//格式化日期
      }
  },
  watch:{
    value(){
      this.Bind();//监听日期变化绑定数据
    }
  }
}



</script>
<style>
.is-selected {
  color: #1989fa;
}
.el-calendar{
    background-color: transparent;
}

.el-calendar-day p{ color:cornflowerblue; font-weight: bold; font-size: 20px;}
.is-today .el-calendar-day p{ color:red}
.el-calendar-table thead th{ color:cornflowerblue}
.el-calendar-table .el-calendar-day:hover {
  background: yellow;  background-color:rgba(255, 255, 0, 0.1)
}
.el-calendar-table tr td .el-calendar-day{ height: auto;}
.el-calendar-table tr  .is-selected{
  background: yellow;  background-color:rgba(43, 41, 168, 0.3)
}
.el-calendar-table tr td .el-calendar-day button{ margin: 5px 10px 0px 0px}

.el-calendar-table tr .next p,.el-calendar-table tr .prev p{ color:slategray; opacity: 0.3;}
#calendar .el-calendar__body .el-calendar-table,#calendar .el-calendar__body .el-calendar-table tr td{border-color:#1478bb; border-collapse: collapse;}
#calendar .el-calendar__header{border-color:#1478bb;}
.el-calendar__button-group .el-button-group button{ border:solid 1px #1478bb; background: transparent; color:#1478bb}
</style>

• 本文标题： ElementUI之calendar自定义日历的使用
• 文章分类：【VueJS】
• 非特殊说明，本文版权归【胡同里的砖头】个人博客 所有，转载请注明出处.

• 上一篇：ElementUI之Calendarv鼠标热点Hover设置背景色半透明
• 下一篇： Vue表格如何去掉最下面和右边的边框