Element-UI el-calendar樣式如何修改日歷

更新時間：2024年08月06日 09:07:55 作者：A_Hawthorn

這篇文章主要介紹了Element-UI el-calendar樣式如何修改日歷問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Element-UI el-calendar樣式修改日歷

注：本人水平有限，僅供參考,有所意見和建議歡迎指出

效果展示

代碼實現(xiàn)

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;
}