效果图

代码

<template>
    <div class="app">
        <div class="calendar">
            <div class="prov" @click="provClick">
                <img src="@/common/images/icon/arrow2.png">
            </div>
            <div class="next" @click="nextClick">
                <img src="@/common/images/icon/next.png">

            </div>
            <van-calendar :title="title" :poppable="false" :row-height="40" :show-confirm="false" :show-title="true"
                :show-subtitle="false" :min-date="minDate" :max-date="maxDate" :show-mark="false" @select="seleDate"
                :formatter="formatter" @month-show="monthShow" :style="{ height: '320px' }" />

        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            minDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
            maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate()),
            defaultDate: new Date(),
            title: new Date().getFullYear() + '年' + (new Date().getMonth() + 1) + '月'
        }
    },
    methods: {
        //月份加一
        nextClick () {
            let currentYear = this.minDate.getFullYear()
            let currentMonth = this.minDate.getMonth() + 1
            if (currentMonth >= 12) {
                this.minDate = new Date(currentYear + 1, 1, 1)
                this.maxDate = new Date(currentYear + 1, 2, new Date(currentYear + 1, 2).getDate())
                this.title = (currentYear + 1) + '年' + '1月'
            } else {
                this.minDate = new Date(currentYear, currentMonth, 1)
                this.maxDate = new Date(currentYear, currentMonth, new Date(currentYear, currentMonth + 1, 0).getDate())
                this.title = currentYear + '年' + (currentMonth + 1) + '月'
            }
        },
        // 月份减一
        provClick () {
            let currentYear = this.minDate.getFullYear()
            let currentMonth = this.minDate.getMonth()
            if (currentMonth <= 0) {
                this.minDate = new Date(currentYear - 1, 11)
                this.maxDate = new Date(currentYear - 1, 12)
                this.title = (currentYear - 1) + '年' + '12月'
            } else {
                this.minDate = new Date(currentYear, currentMonth - 1, 1)
                this.maxDate = new Date(currentYear, currentMonth - 1, new Date(currentYear, currentMonth, 0).getDate())
                this.title = currentYear + '年' + (currentMonth) + '月'
            }
        },
        // 选择日期
        seleDate (date) {
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let day = date.getDate()
            console.log(year + '-' + month + '-' + day);
        },
        // 标记点
        formatter (day) {
            const month = day.date.getMonth() + 1
            const date = day.date.getDate()
            if (date <= 15) {
                day.bottomInfo = '.'
            }
            return day
        },
        // 切换月份
        monthShow (month) {
            console.log(month);
        }
    }
}
</script>

<style lang="less" scoped>
.app {
    width: 100%;
    height: 100vh;
    background-color: #f6f6f6;

    .calendar {
        position: relative;
        width: 90%;
        margin: 20px auto;
        border-radius: 8px;
        overflow: hidden;

        .prov {
            position: absolute;
            left: 20%;
            top: 10px;
        }

        .next {
            position: absolute;
            top: 10px;
            left: 70%;
        }
    }

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

    :deep(.van-calendar__selected-day) {
        background: linear-gradient(180deg, #ffc58f, #ffa654);
        border-radius: 50%;
        box-shadow: 0px 2px 4px 0px rgba(255, 171, 93, 0.31);
    }

    :deep(.van-calendar__bottom-info) {
        font-size: 50px;
        color: #26BA42;
    }
}
</style>