Element-UI el-calendar样式如何修改日历
作者:A_Hawthorn
这篇文章主要介绍了Element-UI el-calendar样式如何修改日历问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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;
}
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
