在el-calendar基础上表头修改的地方

Question

饿了么的日历组件

设计图

我想把饿了么日历组件更改成设计图那样。
第一，上个月/下个月更改成箭头
第二，一到日更改成周一到周日

这些怎么改？

Answer 1

<!-- HTML -->
<el-calendar v-model="value" :first-day-of-week="7"></el-calendar>

<!-- CSS -->
.el-calendar__header .el-calendar__title {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    font-size: 20px;
    color: #4e8cda;
}
.el-calendar-table thead th:before{
    content: '周';
}

.el-calendar__button-group {
    width: 100%;
}

.el-button-group {
    display: flex;
    justify-content: space-between;
}

.el-button-group::after, .el-button-group::before {
    content: unset;
}

.el-button-group>.el-button:not(:first-child):not(:last-child) {
    display: none;
}

.el-button-group>.el-button:first-child:before{
    content: '<';
}

.el-button-group>.el-button:last-child:before{
    content: '>';
}

.el-button-group>.el-button:first-child span, .el-button-group>.el-button:last-child span{
    display: none;
}

点击预览