element-ui日历样式修改

最新推荐文章于 2025-03-30 23:15:24 发布

绵绵ﻌﻌﻌ

最新推荐文章于 2025-03-30 23:15:24 发布

阅读量1.4w

点赞数 9

本文链接：https://blog.csdn.net/baidu_39084727/article/details/107958299

版权

本文详细介绍如何使用ElementUI的日历组件实现日期显示的自定义，包括修改日期格式、添加特殊标记、设置周日为一周之始、改变周末背景色、自定义上月和下月按钮，并附带代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果图：
XIAN==
1、日期的修改以及日期下面小圆点的添加：
elementui支持使用slot对日期中的参数进行修改。通过设置名为 dateCell 的 scoped-slot 来自定义日历单元格中显示的内容。在 scoped-slot 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。
在这里插入图片描述

<div class="left-wrap">
	<div class="calendar-wrap">
		<el-calendar :first-day-of-week=7>
                        <template
                                slot="dateCell"
                                slot-scope="{date, data}">
                            <p>
                                {{ data.day.split('-').slice(2).join('-') }}<br />     
                            </p>
                            <!--标记-->
                            <div v-if="data.day=='2020-08-23'||data.day=='2020-08-19'" class="red budge"></div>
                            <div v-if="data.day=='2020-08-09'||data.day=='2020-08-13'" class="green budge"></div>
                            <div v-if="data.day=='2020-08-12'||data.day=='2020-08-22'" class="orange budge"></div>
                        </template>
		</el-calendar>
	</div>
</div>

CSS代码：

<style>
.left-wrap /deep/ .el-calendar-table .el-calendar-day{
        padding: 22px;
    }
    .left-wrap /deep/ .el-backtop, .el-calendar-table td.is-today p{
        height: 30px;
        width: 30px;
        color: white;
        border-radius: 15px;
        line-height: 30px;
        margin: 0 auto;
        margin-top: -6px;
        background-image: linear-gradient(to right, #2160dc, #4880f0);
    }
.budge{
        width: 10px;
        height: 10px;
        border-radius: 5px;
        margin: 5px auto;
    }
.red{
    background-color: #c9413f;
}
.green{
    background-color: #25b591;
}
.orange{
    background-color: #ee915c;
}
</style>

2、每周开始第一天设置为周日
在elementui中，每周开始第一天默认为周一，在官网中提供修改方法：在这里插入图片描述

<el-calendar :first-day-of-week=7>

3、给周末设置不同颜色的背景
一开始被这个地方卡住了，后来去看了一下日历的html源码结构：在这里插入图片描述
每一行日历单元格都是包裹在<tr class="el-calendar-table__row">中的，而周日、周六正好是该节点的第一个、最后一个孩子节点，于是我灵机一动：

.calendar-wrap /deep/ .el-calendar-table tr td:first-child,
    .calendar-wrap /deep/ .el-calendar-table tr td:last-child{
        background-color: #f9f8fe;
    }

这样就OK了
4、上个月、下个月按钮
这是elementui的默认样式，按钮在日历的左上方，
在这里插入图片描述
先把默认的按钮隐藏掉：

    .left-wrap /deep/ .el-calendar__button-group{
        display: none;
    }

添加自定义的按钮：

<el-button class="but prev"><i class="el-icon-arrow-left"></i></el-button>
<el-button class="but next"><i class="el-icon-arrow-right"></i></el-button>

设置CSS样式：

.calendar-wrap /deep/ .el-button{
        height: 30px;
        width: 30px;
        border-radius: 15px;
        padding: 0;
        background-color: #aec7fc;
        color: white;

    }
    .calendar-wrap /deep/ .el-icon-arrow-left,
    .calendar-wrap /deep/ .el-icon-arrow-right{
        font-weight:900 !important;
    }

5、给自定义按钮添加绑定事件：
由于没能在源码中找到对应的方法，我想到了另一个办法，就是通过点击一个按钮触发另一个按钮的点击事件，即模拟点击事件。网上有方法说可以通过给另一个按钮添加ref="uploadImgBtn"然后使用this.$refs.uploadImgBtn[0].$el.click()触发事件。但是按钮默认隐藏在日历组件中，我没找到给按钮添加ref的方法。最后我使用了jquery：

            $(".prev").click(function(){
                $(".el-button-group>.el-button:first-child").trigger('click');
            }),
                $(".next").click(function(){
                    $(".el-button-group>.el-button:last-child").trigger('click');
                })

大功告成