<template>
<div style="margin-top: 10px">
<el-row>
<el-col :span="24">
<el-calendar v-model="dateValue">
<template #date-cell="{ data }">
<div @click="selectedDate(data)" style="position: relative; height: 100%">
<div class="select" v-for="(item, index) in dateList" :key="index" style="
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
">
<div v-if="data.day == item.MonthDays" style="height: 100%">
<div style="height: 100%" :class="item.TotalCounts > 2 ? 'backYellow' : 'backGreen'">
<!-- <span style="position: absolute ;color: black;">{{ getDate(data.day) }}</span> -->
<div>
<div style="
float: right;
display: flex;
flex-direction: column;
font-size: 12px;
" class="card">
<span>预约:{{ item.YYCounts }} </span>
<span>审批:{{ item.SHCounts }} </span>
<span>通过:{{ item.TGCounts }} </span>
</div>
</div>
</div>
</div>
<div v-else>
<!-- <span style="position: absolute ;color: black;">{{ getDate(data.day) }}</span> -->
</div>
</div>
<div style="color: black;position: relative;">{{ getDate(data.day) }}</div>
</div>
</template>
</el-calendar>
</el-col>
</el-row>
</div>
</template>
<script setup name="Calendar">
import moment from "moment";
import { defineComponent, ref, watch } from "vue";
import router from "@/router";
const dateList = ref([
{
MonthCounts: 9,
MonthDays: "2023-11-01",
SHCounts: 0,
TGCounts: 0,
TotalCounts: 0,
WeekSHCounts: 0,
WeekTGCounts: 0,
WeekTotalCounts: 4,
WeekYYCounts: 4,
YYCounts: 0,
},
{
MonthCounts: 9,
MonthDays: "2023-11-04",
SHCounts: 0,
TGCounts: 0,
TotalCounts: 1,
WeekSHCounts: 0,
WeekTGCounts: 0,
WeekTotalCounts: 0,
WeekYYCounts: 0,
YYCounts: 1,
},
{
MonthCounts: 9,
MonthDays: "2023-11-05",
SHCounts: 0,
TGCounts: 0,
TotalCounts: 4,
WeekSHCounts: 0,
WeekTGCounts: 0,
WeekTotalCounts: 0,
WeekYYCounts: 0,
YYCounts: 4,
},
{
MonthCounts: 9,
MonthDays: "2023-11-06",
SHCounts: 0,
TGCounts: 0,
TotalCounts: 4,
WeekSHCounts: 0,
WeekTGCounts: 0,
WeekTotalCounts: 0,
WeekYYCounts: 0,
YYCounts: 4,
},
{
MonthCounts: 9,
MonthDays: "2023-11-07",
SHCounts: 0,
TGCounts: 0,
TotalCounts: 1,
WeekSHCounts: 0,
WeekTGCounts: 0,
WeekTotalCounts: 0,
WeekYYCounts: 0,
YYCounts: 1,
},
{
MonthCounts: 9,
MonthDays: "2023-11-15",
SHCounts: 0,
TGCounts: 0,
TotalCounts: 2,
WeekSHCounts: 0,
WeekTGCounts: 0,
WeekTotalCounts: 0,
WeekYYCounts: 0,
YYCounts: 2,
},
{
MonthCounts: 9,
MonthDays: "2023-11-16",
SHCounts: 0,
TGCounts: 0,
TotalCounts: 2,
WeekSHCounts: 0,
WeekTGCounts: 0,
WeekTotalCounts: 0,
WeekYYCounts: 0,
YYCounts: 2,
},
{},
]);
const dateValue = ref(); //当前月份
watch(
() => dateValue.value,
(val) => { }
);
//转换为日期
function getDate(day) {
return moment(day).format("DD");
}
//点击事件
function selectedDate(data) { }
</script>
<style lang="scss" scoped>
.card {
position: relative;
background: #86b750 !important;
border: 2px solid #86b750 !important;
z-index: 2;
right: 0px;
}
.backYellow {
height: 100%;
width: 100%;
color: white;
background: #ffeb3b;
border-radius: 5px;
}
.backGreen {
width: 100%;
color: white;
background: #88ea91;
border-radius: 5px;
}
.stopCilck {
pointer-events: none;
background: #e7e3e3;
color: black;
}
// 今日日期样式
:deep(.el-calendar-table td.is-today .card-calendar-text) {
// color: red;#409EFF
color: unset;
}
//悬浮样式
:deep(.el-calendar-table .el-calendar-day:hover) {
cursor: pointer;
background-color: #409eff4f;
}
//选中样式
:deep(.el-calendar-table td.is-selected .el-calendar-day .select) {
color: #fff !important;
background-color: #409eff !important;
padding: 0px;
}
:deep(.is-selected .el-calendar-day .backGreen) {
color: #fff !important;
background-color: #409eff !important;
padding: 8px;
.card {
position: relative;
background: #86b750 !important;
z-index: 99;
}
}
:deep(.is-selected .el-calendar-day .backYellow) {
color: #fff !important;
background-color: #409eff !important;
padding: 8px;
.card {
position: relative;
background: #86b750 !important;
z-index: 99;
}
}
// 表头样式
:deep(.el-calendar-table thead) {
background-color: #d0e9b4;
}
:deep(.el-calendar-table thead th) {
border-right: 1px solid white;
padding: 12px 0;
color: #001528;
font-weight: 600;
}
//上月
//下月
:deep(.el-calendar-table:not(.is-range) td.next .el-calendar-day .backGreen) {
background: #e7e3e3 !important;
}
//周六
//周六表头
:deep(.el-calendar-table thead th:first-child) {
background: #d0e9b4;
}
//周六被默认选择
:deep(.el-calendar-table tr td:first-child) {
.el-calendar-day {
background: #e7e3e3 !important;
.select {
background: #e7e3e3 !important;
}
}
}
//周六背景
:deep(.el-calendar-table tr td:first-child) {
pointer-events: none !important;
background: #e7e3e3 !important;
color: black !important;
//周六有审核数据背景
.backYellow {
pointer-events: none !important;
background: #e7e3e3 !important;
color: white !important;
}
.backGreen {
pointer-events: none !important;
background: #e7e3e3 !important;
color: white !important;
}
}
//周日
//周天表头
:deep(.el-calendar-table thead th:last-child) {
background: #d0e9b4;
}
//周天被默认选中
:deep(.el-calendar-table tr td:last-child) {
.el-calendar-day {
background: #e7e3e3 !important;
.select {
background: #e7e3e3 !important;
}
}
}
//周天有审核数据背景
:deep(.el-calendar-table tr td:last-child) {
pointer-events: none !important;
background: #e7e3e3 !important;
color: black !important;
.backGreen {
pointer-events: none !important;
background: #e7e3e3 !important;
color: white !important;
}
.backYellow {
pointer-events: none !important;
background: #e7e3e3 !important;
color: white !important;
}
.is-selected {
background: #e7e3e3 !important;
}
}
//非本月的禁止点击
:deep(.el-calendar-table) {
width: 100%;
height: 100%;
&:not(.is-range) {
//使不是本月的日期不可点击,不会跳转到其他月份
td.next {
pointer-events: none;
background: #e7e3e3;
color: black;
}
td.prev {
pointer-events: none;
background: #e7e3e3;
color: black;
}
}
}
</style>