vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Element-UI el-calendar样式修改日历

Element-UI el-calendar样式如何修改日历

作者:A_Hawthorn

这篇文章主要介绍了Element-UI el-calendar样式如何修改日历问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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

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

效果展示

代码实现

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文