element-ui日历组件el-calendar选中特定时间以及样式修改

项目开发中，有需要用到日历的组件，而且需要把某些日期标注起来，在这边标注的小红点我用了

&lt;div class="data-analysis"&gt;
    &lt;el-calendar v-model="calendarValue1"&gt;
       &lt;!--选中小红点--&gt;
          &lt;template
             slot="dateCell"
             slot-scope="{date, data}"
          &gt;
             <div&gt;
               <div v-for="(item, key) in activeday" :key="key"&gt;
                  <el-badge v-if="data.day == item.dat" is-dot class="item"&gt;</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: '2023-03-21' },
   { dat: '2023-03-15' },
   { dat: '2023-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>