默认样式
更改后样式
代码如下
<el-calendar v-model="calendar" class="calendar" :first-day-of-week="7"></el-calendar>
css页面相对定位
.calendar {
width: 100%;
font-size: 14px;
position: relative;
}
element-ui中公共样式
// 日历格式修改
.el-calendar {
background-color: transparent;
color: #fff;
}
.el-calendar-table .el-calendar-day {
text-align: center;
margin: auto 0;
line-height: 10px;
border: none;
height: 22px;
// padding-right: 5px;
padding-bottom: 5px;
text-align: center;
}
.el-calendar__header {
border-bottom: none;
}
// 头部文字定位样式设设置
.el-calendar__header .el-calendar__title {
position: absolute;
left: 120px;
top: 15px;
transform: translate(-50%);
font-size: 14px;
color: #fff;
z-index: 999;
background-color: #010812;
border: 1px solid #2f3135;
border-radius: 5px;
padding: 5px 10px 5px 10px;
}
// .el-calendar-table thead th:before{
// 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 {
background-color: transparent;
border: none;
}
// 更改上月和下月样式
.el-button-group>.el-button:first-child:before {
content: '<';
border: none;
font-size: 20px;
}
.el-button-group>.el-button:last-child:before {
content: '>';
border: none;
font-size: 20px;
}
// 按钮隐藏
.el-button-group>.el-button:first-child span,
.el-button-group>.el-button:last-child span {
display: none;
}
.el-calendar__body {
padding-top: 0;
}
// 去除日期内边框
.el-calendar-table tr td {
border: none;
}
// 去除左侧和上部边框
.el-calendar-table tr td:first-child {
border-left: none;
}
.el-calendar-table tr:first-child td {
border-top: none;
}
// 选择日期设置
.el-calendar-table td.is-selected {
background-color: #16def0;
color: #fff;
border-radius: 70%;
}
.el-calendar-table .el-calendar-day:hover {
background-color: #16def0;
color: #fff;
border-radius: 100px;
}