<a-calendar :fullscreen="false">
<template slot="dateCellRender" slot-scope="value">
<div class="active" v-if="showActive(value)">
<span class="day">{{ showActive(value) }}</span
>
</div>
<a-icon type="minus" v-if="isUpdateDay(value)" class="yellowIcon" />
</template>
</a-calendar>
checkDate(date) {
const currentDate = moment().format('YYYY-MM-DD')
let targetDate = moment(date.format('YYYY-MM-DD'))
const daysDifference = targetDate.diff(moment(currentDate), 'days')
const isRate = daysDifference > 0 && daysDifference <= this.form.updateCount * this.form.updateRate
const isRange =
daysDifference % this.form.updateRate === 0 ||
daysDifference % this.form.updateRate > this.form.updateRate - this.form.updateRange
const targetIsWorkday = !this.form.isWorkday || (date.day() !== 0 && date.day() !== 6)
return {
isRange,
isRate,
targetIsWorkday,
targetDate,
daysDifference,
}
},
showActive(date) {
const { isRange, isRate, targetIsWorkday, targetDate } = this.checkDate(date)
if (isRange && isRate && targetIsWorkday) {
return date.date()
}
if (this.form.isWorkday && isRate && !isRange && targetIsWorkday) {
const weekOfday = targetDate.format('E')
const sunday = targetDate.clone().add(7 - weekOfday, 'days')
const saturday = sunday.clone().subtract(1, 'days')
const { isRange: saturdayIsRange, isRate: saturdayIsRate } = this.checkDate(saturday)
const { isRange: sundayIsRange, isRate: sundayIsRate } = this.checkDate(sunday)
let rangeWeekdayCount = 0
if (saturdayIsRange && saturdayIsRate) {
rangeWeekdayCount++
}
if (sundayIsRange && sundayIsRate) {
rangeWeekdayCount++
}
if (rangeWeekdayCount > 0) {
let dateList = []
const dateLength = 5 - weekOfday
for (let i = 1; i <= dateLength; i++) {
const nextDay = targetDate.clone().add(i, 'days')
const { isRange: nextIsRange, isRate: nextIsRate } = this.checkDate(nextDay)
if (nextIsRate && !nextIsRange) {
dateList.push(nextDay)
}
}
if (dateList.length < rangeWeekdayCount) {
return date.date()
}
}
}
return ''
},
isUpdateDay(date) {
const { isRate, daysDifference } = this.checkDate(date)
return isRate && daysDifference % this.form.updateRate === 0
},
.calender {
width: 300px;
margin: 0 auto;
border: 1px solid #d9d9d9;
border-radius: 4px;
.yellowIcon {
color: #f59a23;
bottom: 0;
left: 0;
position: absolute;
z-index: 12;
width: 100%;
font-size: 15px;
}
/deep/ .ant-fullcalendar-date {
position: relative;
}
/deep/ .ant-fullcalendar-content {
top: 0;
}
.active {
position: absolute;
left: 0;
top: -2px;
z-index: 10;
width: 40px;
height: 29px;
background: #eff3ff;
.iconfont {
position: absolute;
font-size: 14px;
bottom: 3px;
left: 21px;
color: #2d67ff;
font-weight: 600;
}
.day {
font-weight: 600;
position: absolute;
color: #2d67ff;
top: 5px;
left: 13px;
}
}
/deep/ .ant-select-selection-selected-value {
font-size: 14px;
color: #333333;
font-weight: 600;
padding-left: 5px;
}
/deep/ .ant-select-selection {
border: 1px solid #dcdee0;
border-radius: 4px;
height: 36px;
padding-right: 15px;
}
/deep/ .ant-select-sm .ant-select-selection__rendered {
line-height: 36px;
}
}