0
点赞
收藏
分享

微信扫一扫

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

Jonescy 2022-04-27 阅读 171

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

效果展示
在这里插入图片描述

代码实现
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;
}
举报

相关推荐

0 条评论