横向 的vant组件的日历

vant 的日历组建只支持纵向变化，不支持横向，就稍微改变了一下

<template>
    <div class="calendar-wrap" style="positon:relative">
        <div class="month-year">{{showYear}}年{{showMonth+1}}月</div>
        <van-icon class="arrow" @click="deMonth" name="arrow" />
        <van-icon class="arrow-left" @click="adMonth" name="arrow-left" />
        <van-icon class="arrow-year" @click="deYear" name="arrow" />
        <van-icon class="arrow-year-1" @click="deYear" name="arrow" />
        <van-icon class="arrow-left-year-1" @click="adYear" name="arrow-left" />
        <van-icon class="arrow-left-year" @click="adYear" name="arrow-left" />
        <van-calendar class="calendar" ref="calendar"
            color="#399f0e"
            row-height="40" :min-date="minDate" 
            :max-date="maxDate" :default-date="nowDay" 
            :poppable="false"     :show-subtitle="false"
            :show-title="false" :show-mark="false" 
            :show-confirm="false" :formatter="formatterDay" @select="slecetDay"
        >
        <template  #bottom-info="item" >
        <span class="mark-green" v-if="item.bottomInfo==1"></span>
        <span class="mark-red" v-if="item.bottomInfo==2"></span>
        </template>
        </van-calendar>
    </div>
</template>

<script>
export default {
    data(){
        return{
            minDate: new Date(),
            maxDate: new Date(),
            defaultDate: new Date(),
            monthCont: 0,
            yearCont:0,
            year: new Date().getFullYear(),
            month: new Date().getMonth(),
            nowDay:new Date(),
            showYear:    new Date().getFullYear(),
            showMonth:new Date().getMonth(),
        }
    }
    watch:{
        defaultDate(val) {
            this.setMinMaxDay();
        }
    },
    methods:{
        formatterDay(day){
            return day;
        },
        slecetDay(day){
            
        },
        // 当前月上一个月
        deMonth() {
            this.monthCont--;
            this.defaultDate = new Date(
                this.year,
                this.month + this.monthCont,
                1
            );
        },
        // 当前月下一个月
        adMonth() {
            this.monthCont++;
            this.defaultDate = new Date(
                this.year,
                this.month + this.monthCont,
                1
            );
        },
        // 当前年上一个年
        deYear() {
            this.yearCont--;
            this.defaultDate = new Date(
                this.year+ this.yearCont,
                this.month,
                1
            );

        },
        // 当前年下一个年
        adYear() {
            this.yearCont++;
            this.defaultDate = new Date(
                this.year+ this.yearCont,
                this.month ,
                1
            );
        },
        setMinMaxDay(){
            this.showYear= this.defaultDate.getFullYear();
            this.showMonth = this.defaultDate.getMonth();
            var firstDay = new Date(this.defaultDate);
            firstDay.setDate(1)
            var endDay = new Date(this.showYear,this.showMonth+1,1);
            this.minDate =new Date(
                this.showYear,
                this.showMonth,
                firstDay.getDate()
            )
            endDay.setDate(0)
            this.maxDate =new Date(
                this.showYear,
                this.showMonth,
                endDay.getDate()
            )
        }
    }
}
</script>

<style scoped lang='scss'>
.calendar-wrap::v-deep{
	width: 100%;
	position: relative;
	.van-calendar__month-title{
		display: none;
	}
	.mark-red{
		display: block;
		width: 5px;
		height: 5px;
		background-color: #d46b08;
		border-radius: 50%;
		margin: 0 auto;
    }
	.mark-green{
		display: block;
		width: 5px;
		height: 5px;
		background-color: #389e0d;
		border-radius: 50%;
		margin: 0 auto;
	}
	.month-year{
		padding: 10px 0;
		text-align: center;
		font-size: 14px;
	}
	.arrow{
		position: absolute;
		top: 15px;
		right: 10px;
	}
	.arrow-left{
		position: absolute;
		top: 15px;
		left: 10px;
	}
	.arrow-year{
		position: absolute;
		top: 15px;
		right: 30px;
	}
	.arrow-left-year{
		position: absolute;
		top: 15px;
		left: 30px;
	}
	.arrow-year-1{
		position: absolute;
		top: 15px;
		right: 35px;
	}
	.arrow-left-year-1{
		position: absolute;
		top: 15px;
		left: 35px;
	}
}
</style>

vant icon没找到双箭头就用2个单箭头组合一下

附上一下参考的链接 https://blog.csdn.net/mingwang_/article/details/119346031