CSS 修改el-calendar的样式，自定义样式

需求：自定义elementui的日历的样式；给符合条件的时间展示红点。

elementui的原始样式：

目标样式：

代码实现：

html:

<el-calendar v-model="calendarValue"><template slot="dateCell" slot-scope="{date, data}"><div :class="data.isSelected ? '' : ''" class="is-point"><span>{{ Number(data.day.split('-')[2]) }}</span><i v-show="pointList.includes(data.day)" /></div></template>
</el-calendar>

JS：

export default {name: 'Dashboard',data() {return {calendarValue: new Date(),pointList: ['2023-09-12', '2023-09-11', '2023-09-01'],}},
}

css：

<style lang="scss" scoped>
::v-deep .el-calendar {padding-right: 17px;.el-calendar__header {font-size: 16px;font-weight: 700;color: #000000;line-height: 22px;border-bottom: 0;}.el-calendar__body {padding: 0px 0px 30px;thead {th {color: #7f2ca9;font-weight: 600;font-size: 14px;}}.el-calendar-table__row {td {border: 0;height: unset;border-radius: 50%;font-size: 13px;}.el-calendar-day {height: 33px;line-height: 37px;padding: 0;span {height: 24px;line-height: 24px;width: 24px;text-align: center;border-radius: 50%;display: inline-block;}&:hover {background-color: unset;span {background-color: #7f2ca91a;color: #7f2ca9;}}}.is-selected {background-color: unset;.el-calendar-day {span {background-color: #7f2ca9;color: #ffffff;}}}}}.is-point {display: flex;flex-direction: column;justify-content: flex-end;align-items: center;margin: 0;i {margin-top: 1px;display: inline-block;width: 6px;height: 6px;background: #ff0000;border-radius: 50%;}}
}
</style>

在这里小记一下，主要也是为了保留一下这次的修改成果，方便以后使用

有个没改好的地方就是，右上角的选择上下月的按钮不好修改为左右箭头，所以那块就没做优化，大家要是有好方法可以让我借鉴借鉴，ui如下：