layout: post
title: vue element Calendar日历
tags: elementUi Calendar日历
categories: elementUi Calendar
<div class="w-100p flex-column col-b-title " :style="customStyle">需求场景，日历控件显示 每一天的新增客户数量，有客户就显示一个角标有多少人，没有新增客户就是正常显示，控件支持自定义日期高度，边距，标题，自定义格式化数据
带角标的日历控件
```
<div class="w-100p flex-row justify-between align-center" :class="actionBoxClass">
</div>
<span class="month-input m-r-8" :style="dateInputStyle">
<el-date-picker
v-model="taskTime"
v-if="formatType === 'month'"
:format="formatValue"
:format-type="formatType"
class="f-s-16 bold"
>
</el-date-picker>
</span>
<span @click="clickLast" class="month-btn prev-moth ">
<svg-icon icon-class="arrow-left" :class="arrowColor"></svg-icon>
</span>
<span @click="clickNext" class="month-btn next-moth">
<svg-icon icon-class="arrow-right" :class="arrowColor"></svg-icon>
</span>
<span
class="f-s-12 brs4 bor-w-1 bor-c-2 col-b-title-6 text-center align-center calendar-today "
@click="resetCurrentDay"
>今日</span
>
<el-calendar ref="taskMonthCalendar" :value-format="formatValue" v-model="taskTime" :type="formatType">
<template #dateCell="{date, data}">
<div class="time-date" :class="dayClass" :style="dayStyle">
<div
class="time-cadge-box"
@click="handleDateHook(date, data)"
v-if="acceptBadge && data.type === 'current-month'"
v-html="formatDateBadge(date, data)"
>
</div>
</el-calendar>
</div>
</div>
</template>
```