Elementui Calendar日历组件实现在日期上自定义标记

官网链接https://element.eleme.cn/#/zh-CN/component/calendar

效果图

自定义参数使用

dateCell scoped slot 参数 ： data { type, isSelected, day}，

• type 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；
• isSelected 标明该日期是否被选中；
• day 是格式化的日期，格式为 yyyy-MM-dd

显示在日历上日期方法：

  data.day.split('-').slice(2).join('-')

代码

<template>
	<div>
		<el-col class="dayEL" :span="12">
          <el-calendar style="height: 530px;" v-model="nowdate">
            <template
                slot="dateCell"
                slot-scope="{date, data}">
                <div style="width:100%;height: 100%;">
                  <div v-for="item in activeday" style="width: 0;height: 0px;">
                    <el-badge  v-if="data.day == item.dat" :value="item.coun"></el-badge>
                  </div>
                  <div class="spandate">{{ data.day.split('-').slice(2).join('-') }}</div>
                </div>
              </template>
          </el-calendar>
        </el-col>
	</div>
</template>
<script>
  import {getActivityCalendar} from '@/api/policy/home'
  export default {
    data() {
      return {
        activeday:[],
        nowdate:new Date(),
      }
    },
    created() {
      this.getActivityCalendar()
    },
    methods: {
      getActivityCalendar(){
        getActivityCalendar(Object.assign({
          month: ''
        })).then(response => {
          this.activeday = response.data.data
          // console.log(this.activeday)
          //返回数据为日期以及该日期对应的事件个数，用标记显示
        })
      },
    }
  }
<style lang="scss" scoped>
  .dayEL .el-button--small {
    border: none;
  }
  .dayEL .el-button {
    background: transparent;
  }
  .dayEL >>> .el-calendar-table .el-calendar-day {
      height: 70px;
  }
  .spandate {
    margin-top: 10px;
    position: relative;
    top: 10px;
    margin-left: 25px;
    font-weight: bold;
    font-size: 16px;
  }

</style>