van-calendar 自定义日期上方的提示信息的两种方法

1、常规方法

<van-calendar v-show="tabIndex==1" :formatter="formatter" :min-date="minDate"
 :max-date="maxDate" :default-date="minDate" :row-height="44" :show-title="false" :show-subtitle="false" :show-mark="false" :poppable="false" :show-confirm="false"
 :style="{ height: '575rpx' }"/>

2、插槽（用于多种样式）

<van-calendar v-show="tabIndex==2" :formatter="formatter" :min-date="minDate"
 :max-date="maxDate" :default-date="minDate" :row-height="44" :show-title="false"
:show-subtitle="false" :show-mark="false" :poppable="false" :show-confirm="false"
:style="{ height: '575rpx' }">
           <template #top-info="item">
                  <span v-if="item.topInfo=='请假'" class="mark-green">请假</span>
                   <span v-if="item.topInfo=='迟到'" class="mark-orange">迟到</span>
                   <span v-if="item.topInfo=='旷课'" class="mark-orange">旷课</span>
                    <span v-if="item.topInfo=='早退'" class="mark-orange">早退</span>
                    <span v-if="item.topInfo=='冠军'" class="mark-yellow">冠军</span>
            </template>
</van-calendar>

methods:{

        formatter(day) {
                const year = day.date.getFullYear();
                const month = day.date.getMonth() + 1;
                const monthstr = month < 10 ? '0' + month : month;
                const date = day.date.getDate();
                const datestr = date < 10 ? '0' + date : date;
                const sum = year + '-' + monthstr + '-' + datestr;
                if (this.tabIndex == 1) { 
                    if (this.diningSituations.notRepastDetailsDTOS) {
                        const contrastList = this.diningSituations.notRepastDetailsDTOS.filter(e => e
                            .dayNotEatNumber != 0);
                        contrastList.forEach(item => {
                            if (sum == item.repastDate) {
                                const breakfastTxt = item.breakfastStatus ? '' : '早';
                                const lunchTxt = item.lunchStatus ? '' : '中';
                                const supperTxt = item.supperStatus ? '' : '晚';
                                day.topInfo = breakfastTxt + lunchTxt + supperTxt;
                                day.className = 'notice-day'
                            }
                        })
                    }
                } else if (this.tabIndex == 2) { 
                    if (this.attendanceReport.abnomalDateList && this.attendanceReport.abnomalDateList.length) {
                        const abnomalList = this.attendanceReport.abnomalDateList.filter(e => e.abnomalType == 2 || e
                            .abnomalType == 3 || e.abnomalType == 5);
                        const leaveList = this.attendanceReport.abnomalDateList.filter(e => e.abnomalType == 4);
                        const championList = this.attendanceReport.abnomalDateList.filter(e => e.abnomalType == 6);
                        // 迟到 早退 旷课
                        abnomalList.forEach(item => {
                            if (sum == item.attendDate.slice(0, 10)) {
                                day.topInfo = item.abnomaleName;
                                day.className = 'late-day';
                            }
                        })
                        // 请假
                        leaveList.forEach(item => {
                            if (sum == item.attendDate.slice(0, 10)) {
                                day.topInfo = item.abnomaleName;
                                day.className = 'leave-day';
                            }
                        })
                        // 冠军
                        championList.forEach(item => {
                            if (sum == item.attendDate.slice(0, 10)) {
                                day.topInfo = item.abnomaleName;
                                day.className = 'champion-day';
                            }
                        })
                    }
                }
                return day;
            }

}

<style>

                        .mark-green {
                            color: #04B871;
                        }

                        .mark-orange {
                            color: #F9793F;
                        }

                        .mark-yellow {
                            color: #DAA000;
                        }

                        /deep/ .van-calendar__weekdays {
                            background: #F7FAF8;
                        }

                        /deep/ .van-calendar__weekday {
                            text-align: left;
                            padding-left: 30rpx;
                            box-sizing: border-box;
                        }

                        /deep/ .van-calendar__weekday:first-of-type {
                            color: rgba(0, 0, 0, 0.25);
                        }

                        /deep/ .van-calendar__weekday:last-of-type {
                            color: rgba(0, 0, 0, 0.25);
                        }

                        /deep/ .van-calendar__month-title {
                            display: none;
                        }

                        /deep/ .van-calendar__days {
                            margin: 10rpx 0 0;
                        }

                        /deep/ .van-calendar__day {
                            margin: 0 0 8rpx;
                            border-radius: 22rpx;
                            display: flex;
                            align-items: flex-end;
                        }

                        /deep/ .van-calendar__selected-day {
                            background: rgba(0, 0, 0, .1);
                            color: #F9793F;
                            display: flex;
                            align-items: flex-end;
                            border-radius: 22rpx;
                        }

                        /deep/ .van-calendar__top-info {
                            top: 0;
                            font-size: 20rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #F9793F;
                            line-height: 28rpx;
                            margin: 12rpx 0 4rpx;
                        }

                        /deep/ .late-day {
                            color: #F9793F;
                            background: rgba(249, 121, 63, .1);
                            border-radius: 22rpx;
                            width: 88rpx;
                            height: 88rpx;
                            margin-left: 10rpx;
                        }

                        /deep/ .leave-day {
                            color: #04B871;
                            background: rgba(4, 184, 113, .09);
                            border-radius: 22rpx;
                            width: 88rpx;
                            height: 88rpx;
                            margin-left: 10rpx;
                        }

                        /deep/ .champion-day {
                            color: #DAA000;
                            background: url(图片地址) no-repeat -4rpx center/100%;
                            border-radius: 22rpx;
                            width: 88rpx;
                            height: 88rpx;
                            margin-left: 10rpx;
                        }
                    }

</style>

结果如下