最近做了一个需求，根据日历点击某一天，某一月来触发一些时间，经过查询资料，写出了以下的东西。

<template>
<div>
  <div class="calendar-select">
    <el-date-picker
        v-model="monthValue"
        type="month"
        size="mini"
        style="width:150px"
        @change="changeMonth"
        :clearable="false"
    ></el-date-picker>
  </div>
  <el-calendar v-model="selectDate" class="calendar-main">
    <template
        class="template-content"
        #dateCell="{date, data}"
    >
      <div class="calendar-item">
        {{ data.day.split('-').slice(2).join('-') }}
      </div>
    </template>
  </el-calendar>
</div>
</template>

<script>
export default {
  name: 'MyCalendar',
  data(){
    return {
      // 查询的年月
      monthValue: '',
      // 选中的时间
      selectDate: '',
    }
  },
  created() {
    this.monthValue = new Date()
    this.$emit('changeCalendar',new Date())
  },
  watch: {
    selectDate: {
      handler(newVal) {
        if (newVal) {
          this.$emit('changeCalendar',newVal)
          this.monthValue = newVal
        }
      }
    }
  },
  methods: {
    //年月下拉选框
    changeMonth(){
      this.selectDate = new Date(this.monthValue);
    },
  }
}
</script>

<style lang="scss">
.calendar-select{
  top: 40px;
  position: relative;
  text-align: left;
  padding-left: 16px;
}
.calendar-main {
  width: 100%;
  margin: 0 auto;
.el-calendar__title {
  visibility: hidden;
}
  .el-calendar__header {
    border-bottom:none;
  }

.el-calendar-table .el-calendar-day {
  height: 50px;
  padding: 0;
}

.calendar-item {
  justify-content: center;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.el-calendar-table td.is-today {
  background-color: #F2F8FE;
}

.el-calendar-table td.is-selected {
  border: 1px solid #1890ff;
}
}
</style>

在父组件使用的时候，可以获取到点击事件的时间

 <my-calendar @changeCalendar="changeTime"></my-calendar>

// time 是选中的日期时间
changeTime(time){
}