element-ui 的el-calendar日历组件样式修改

 <div style="width:100%;height:calc(100% - 35px);margin-top: 5px;"><el-calendar v-model="calendar" style="height: 100%;"></el-calendar></div>

css部分

<style>/* 去除底色 */
/deep/ .el-calendar {background: none !important;
}/deep/ .el-calendar-table thead th {color: #68a8d0 !important;text-align: center;
}
/* 高度调整为了让内部自适应 */
/deep/ .el-calendar__body {height: 90% !important;
}/deep/ .el-calendar__body table thead th {color: #68a8d0;
}/deep/ .el-calendar-table {height: 100% !important;
}
/* 内部小方格，可直接控制显示 */
/deep/ .el-calendar-table .el-calendar-day {height: 100% !important;color: #FFF;text-align: center;font-weight: 600;
}
/* 非本月部分的文字灰色 */
/deep/ .el-calendar-table .next .el-calendar-day {color: #7d7979 !important;
}/deep/ .el-calendar-table .prev .el-calendar-day {color: #7d7979 !important;
}/deep/ .el-calendar-table td.is-selected .el-calendar-day {color: #fff !important;/* background: none !important; */
}
/* 选中的效果 */
/deep/ .el-calendar-table td.is-selected {background: rgba(37, 182, 255, 1) !important;
}
/* 移动的效果 */
/deep/ .el-calendar-table .el-calendar-day:hover {background: rgba(65, 105, 225, 0.7) !important;/* color: #fff; */
}
/* 边框颜色 */
/deep/ .el-calendar-table tr td:first-child {border-left: 1px solid #888 !important;
}/deep/ .el-calendar-table tr:first-child td {border-top: 1px solid #888 !important;
}/deep/ .el-calendar-table td {border-bottom: 1px solid #888 !important;border-right: 1px solid #888 !important;
}/deep/ .el-calendar__title {color: #68a8d0 !important;
}
/* 分割线的颜色 */
/deep/ .el-calendar__header {border-bottom: 1px solid #68a8d0 !important;
}
/* 月份选择的按钮 */
/deep/ .el-button-group>.el-button {background: none !important;color: #68a8d0 !important;border-color: #68a8d0 !important;
}
</style>