<template>
<div>
<el-card style="width: 300px; height: 298px" class="position-relative">
<el-calendar
ref="calendar"
v-model="value"
:first-day-of-week="0"
style="--el-calendar-border: #fff !important; height: 298px"
>
<template slot="dateCell" slot-scope="{ data }">
<div class="center">
{{ data.day.split("-").slice(2).join("-") }}
</div>
<div
v-if="handleSelected(data.day) === '2'"
class="error center"
style="padding: 5px"
></div>
<div
v-if="handleSelected(data.day) === '1'"
class="circle"
></div>
</template>
</el-calendar>
<img src="../../assets/images/calendarLeft/left-Arrow.png" alt="" />
</el-card>
</div>
</template>
<script>
export default {
methods: {
// 日历判断显示异常正常
handleSelected(day) {
let res = "";
this.list.map((val) => {
if (val.date === day) {
res = val.status;
}
});
return res;
},
},
data() {
return {
calendarValue: new Date(),
selectedDates: [], // 存储选中的日期数组
hoveredDate: null, // 存储当前悬停的日期
value: new Date(),
list: [
{ date: "2024-05-01", status: "1" },
{ date: "2024-05-02", status: "1" },
{ date: "2024-05-25", status: "1" },
// {date: "2024-05-05",status:"2" }
],
monthDay: "",
};
},
};
</script>
<style lang="scss" scoped>
/deep/.el-card__body {
padding: 0;
}
// 今日按钮样式
.btn-style {
top: 52px;
left: 115px;
.today-btn {
padding: 0px;
width: 32px;
height: 22px;
line-height: 5px;
color: #000;
background: #ffffff;
border-radius: 4px;
font-size: 12px;
border: 1px solid #d9d9d9;
}
}
// 上个月、下个月按钮样式
::v-deep .el-button-group > .el-button:first-child:before {
content: "";
display: inline-block;
width: 20px; /* 设置图片宽度 */
height: 20px; /* 设置图片高度 */
background-image: url("../../assets/images/calendarLeft/left-Arrow.png"); /* 替换 'your-image-url.png' 为你的图片路径 */
background-size: contain; /* 调整图片大小以适应容器 */
background-color: #fff;
}
::v-deep .el-button-group > .el-button:last-child:before {
content: "";
display: inline-block;
width: 20px; /* 设置图片宽度 */
height: 20px; /* 设置图片高度 */
background-image: url("../../assets/images/calendarLeft/right-Arrow.png"); /* 替换 'your-image-url.png' 为你的图片路径 */
background-size: contain; /* 调整图片大小以适应容器 */
background-color: #fff;
}
::v-deep .el-button-group > .el-button:first-child span,
::v-deep .el-button-group > .el-button:last-child span {
display: none;
}
::v-deep .el-button-group > .el-button:not(:last-child) {
margin-right: -15px;
}
::v-deep .el-button-group > .el-button:first-child:before,
::v-deep .el-button-group > .el-button:not(:first-child):not(:last-child) {
span {
display: none;
}
}
::v-deep .el-button-group > .el-button {
border: 0;
background: transparent;
}
::v-deep .current {
width: 24px !important;
}
::v-deep .el-calendar-table {
width: 258px !important;
}
::v-deep .el-calendar-table .el-calendar-day {
border-radius: 20px;
background-color: transparent;
transition: background-color 0.3s;
}
::v-deep .el-calendar-table .el-calendar-day .center {
width: 24px;
height: 24px;
background-color: transparent; // 默认背景色
transition: background-color 0.3s;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
}
::v-deep .el-calendar-table .el-calendar-day .center:hover {
background-color: #eaeced; // 鼠标悬停时的背景色
}
::v-deep .el-calendar-table .is-selected .el-calendar-day .center {
background-color: #025cea;
color: #fff;
}
::v-deep .el-calendar-table .is-selected .el-calendar-day .center:hover {
background-color: #024a8c; // 鼠标悬停时的选中背景色
}
::v-deep .el-calendar-table .is-today .center {
background-color: #e6effd;
}
// 样式适用于其他按钮和布局
::v-deep .el-button-group > .el-button:not(:first-child):not(:last-child) {
display: none !important;
}
::v-deep .el-calendar__header {
display: flex;
justify-content: space-between;
padding: 15px 20px;
border: none;
}
::v-deep .el-button--mini,
.el-button--mini.is-round {
padding: 0 10.7px;
}
::v-deep .el-calendar-table__row{
position: relative;
}
::v-deep .el-calendar-table__row td {
// 去掉边框
border: none !important;
width: 24px !important;
height: 24px !important; /* 设置单元格高度 */
padding: 0 !important; /* 去掉内边距,或根据需要调整 */
border-radius: 20px;
// 缩小高度
.el-calendar-day {
height: 36px;
vertical-align: middle;
text-align: center;
border: #fff;
line-height: 24px !important; /* 确保文本垂直居中 */
text-align: center; /* 水平居中文本 */
font-size: 12px !important; /* 根据空间调整字体大小 */
}
}
// 自定义选中、悬浮颜色
::v-deep .el-calendar-table .el-calendar-day .center:hover {
border-radius: 20px;
background-color: #eaeced;
}
::v-deep .el-calendar-table .is-selected{
background:#fff;
opacity: 1;
}
::v-deep .el-calendar-table .is-selected .el-calendar-day .center{
width: 24px;
height: 24px;
color: #fff !important;
background-color: #025cea !important;
border-radius: 20px;
}
::v-deep .el-calendar-table .is-selected .el-calendar-day .center:hover{
color: #fff !important;
background-color: #025cea !important;
border-radius: 20px;
}
::v-deep .el-calendar-table .is-selected .el-calendar-day .center:hover {
background-color: #025cea;
}
::v-deep .el-calendar-table .is-today {
width: 24px;
height: 24px;
color: #025cea;
// background-color: #e6effd;
}
//把今天按钮隐藏掉
::v-deep .el-button-group > .el-button:not(:first-child):not(:last-child) {
display: none !important;
}
::v-deep .el-calendar__header {
display: flex;
justify-content: space-between;
padding: 15px 20px;
border: none;
}
::v-deep .el-button--mini,
.el-button--mini.is-round {
padding: 0 10.7px;
}
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover,
.el-cascader__dropdown,
.el-color-picker__panel,
.el-message-box,
.el-notification {
-webkit-box-shadow: none;
}
::v-deep.event-dot {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: red;
margin-left: 5px;
}
.has-event {
position: relative;
}
.circle {
width: 4px;
height: 4px;
opacity: 1;
background: #E9E9ED;
margin-left: 10px;
border-radius: 6px;
z-index: 999;
position: relative;
}
</style>