项目开发中，有需要用到日历的组件，而且需要把某些日期标注起来，在这边标注的小红点我用了
el-badge
具体效果如下图所示：
页面标签：
<div class="data-analysis"><el-calendar v-model="calendarValue1"><!--选中小红点--><templateslot="dateCell"slot-scope="{date, data}"><div><div v-for="(item, key) in activeday" :key="key"><el-badge v-if="data.day == item.dat" is-dot class="item"></el-badge></div><div class="spandate">{{ data.day.split('-').slice(2).join('-') }}</div></div></template></el-calendar></div>
变量声明：
// 日历calendarValue1: new Date(),activeday: [ // 日历组件选中的日期，小红点，时间格式必须为yyyy-MM-dd，比如3月5号要写成03-05而不是3-5{ dat: '-03-21' },{ dat: '-03-15' },{ dat: '-03-05' }],
样式修改：
<style lang='scss' scoped>/*日历样式修改*/.data-analysis /deep/ .el-calendar-table .el-calendar-day{width: 100%;height: 100%;}/*隐藏今天按钮*/>>>.el-button-group>.el-button:not(:first-child):not(:last-child){display: none;}/*去掉原本背景颜色*/.data-analysis >>>.el-calendar{background: transparent;}>>>.el-calendar-table td:hover{background: transparent;}/*去掉选中背景颜色*/.data-analysis >>>.el-calendar-table td.is-selected{background: transparent;}/*修改每一小格大小*/.data-analysis >>>.el-calendar-table .el-calendar-day{position: relative;padding: 10px;}/*小红点样式*/.data-analysis >>>.el-badge{position: absolute;right: 5px;top: 5px;}/*日历边框颜色*/.data-analysis >>>.el-calendar-table tr td:first-child{border-left: 1px solid #666666;}.data-analysis >>>.el-calendar-table tr:first-child td{border-top: 1px solid #666666;}.data-analysis >>>.el-calendar-table td{border-bottom: 1px solid #666666;border-right: 1px solid #666666;}/*表格周一到周日颜色*/.data-analysis >>>.el-calendar-table thead th{color: #68a8d0;}/*头部日期颜色*/.data-analysis >>>.el-calendar__title{color: #68a8d0;}/*头部下面的横线*/.data-analysis >>>.el-calendar__header{border-bottom: 1px solid #666666;}/*鼠标悬停样式*/.data-analysis >>>.el-calendar-table .el-calendar-day:hover{cursor: default;background: transparent;}/*非本月字体颜色*/.data-analysis >>>.el-calendar-table:not(.is-range) td.next, .el-calendar-table:not(.is-range) td.prev{color: #666666;cursor: pointer;}</style>
参考地址
