您的当前位置:首页正文

Ant Design Calendar 日历实现指定日期背景变色和增加下划线

2024-11-30 来源:个人技术集锦

              <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;
  }
}
显示全文