Element-UI el-calendar样式修改——日历

注: 本人水平有限,仅供参考,有所意见和建议欢迎指出,

效果展示

代码实现
vue:

<template>
   <div class="left_calendar">
        <div class="left_calendar_body">
          <el-calendar>
            <template
              slot="dateCell"
              slot-scope="{data}">
              <div :class="data.isSelected ? 'choseDay' : ''">
                <p>
                  {{ data.day.slice(8) }}
                p>
              div>
              
            template>
          el-calendar>
        div>
   div>
template>
 
<style scoped>
/* 一 二 三 四 五 六 日 */
::v-deep .el-calendar-table thead th {
    padding: 0;
    font-size: 13px;
    color: #9CB2CD;
}
/* 去除边框 */
::v-deep .el-calendar-table tr td:first-child{
  border: none;
}
::v-deep .el-calendar-table tr:first-child td{
  border: none;
}
::v-deep .el-calendar-table__row td{
  border: none;
}
/* 当前月样式 */
::v-deep .el-calendar-table:not(.is-range){
  color: rgba(156, 178, 205, 1);
}
style>

css:

.choseDay {
    position: relative;
    top: -12px;
    width: 36px;
    height: 36px;
    background-color: rgba(83, 143, 255, 1);
    color:#fff;
    border-radius: 30px;
    line-height: 35px;
    z-index: 6;
}

.left_calendar {
    width: 315px;
    height: 395px;
    left: 30px;
    top: 30px;
    position: absolute;
}

.left_calendar_body {
    height: 280px;
    left: 3px;
    top: 85px;
    position: absolute;
}

.el-calendar__header .el-calendar__title {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    font: 17px "OPPOSans-R";
    color: #273142;
}

.el-calendar-table thead th:before{
    color: #9CB2CD;
    font-size: 13px;
    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{
    position: relative;
    left: -18px;
}

.el-button-group>.el-button:last-child{
    position: relative;
    left: 210px;
}

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

.el-calendar .el-calendar-table .el-calendar-day{
    padding: 0px;
    text-align: center;
    font: 13px 'Poppins-Regular';
    background-color: rgb(255, 255, 255);
    height: 23px;
    width: 36px;
}