[JavaScript知识库] Element-UI el-calendar样式修改—

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Element-UI el-calendar样式修改——日历 -> 正文阅读

[JavaScript知识库]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;
}