如何給vant的Calendar日歷組件添加備注

更新時間：2022年04月25日 16:57:12 作者：行行吶

這篇文章主要介紹了如何給vant的Calendar日歷組件添加備注，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

給vant的Calendar日歷組件添加備注

先引入Calendar組件哦可以查看vant官方 https://youzan.github.io/vant/#/zh-CN/calendar

最近做的一個項目有用到日歷需要自定義日期文案

poppable設(shè)置為false，代表日歷會直接平鋪展示在頁面中，不是以彈層的形式出現(xiàn)
show-confirm設(shè)置為false，代表是不顯示日歷的確定按鈕，用戶點(diǎn)擊任意日期就立即觸發(fā)confirm事件
min-date最小日期段
max-date最大日期段
formatter自定義日期文案我用來給每個日期添加備注
className 額外類名

<!-- 日期表格 -->
<van-calendar
? title="日歷"
? :poppable="false"
? :show-confirm="false"
? :style="{ height: '10.666667rem' }"
? :min-date="minDate"
? :max-date="maxDate"
? @confirm="confirmFn"
? :formatter="formatter"
? :className="'van-calendar__top-info'"
/>

export default {
? name: 'DoctorData',
? data() {
? ? return {
? ? ? // 醫(yī)生id
? ? ? doctorId: '',
? ? ? // 姓名信息
? ? ? doctorInfo: {},
? ? ? // 所點(diǎn)擊的時間
? ? ? timeValue: '',
? ? ? // 醫(yī)生排班預(yù)約次數(shù)和day值
? ? ? curNums: [],
? ? ? // 最小時間值 ?當(dāng)前時間
? ? ? minDate: new Date()
? ? }
? },
? created() {
? ? // 接受上一層傳來的數(shù)據(jù)
?
? ? this.doctorId = this.$route.params.doctorId
? ? this.doctorInfo = this.$route.params.doctorInfo
?
? ? // ?獲取醫(yī)生排版日期預(yù)約次數(shù)
? ? this.getDoctorData()
? },
? methods: {
? ? // 獲取醫(yī)生排版日期預(yù)約次數(shù)
? ? async getDoctorData() {
? ? ? // 發(fā)送請求獲取后臺數(shù)據(jù)
? ? ? const data = await this.$http.get(`doctorScheduleDataJson?id=${this.doctorId}&openId=123213`)
?
? ? ? if (data.status !== 200) {
? ? ? ? return this.$Toast.fail('獲取醫(yī)生排版預(yù)約次數(shù)失敗')
? ? ? }
?
? ? ? // ?取出剩余次數(shù)和day的值
? ? ? let b = []
? ? ? for (let a in data.data) {
? ? ? ? console.log(data.data[a].day)
? ? ? ? console.log(data.data[a].cur_num)
?
? ? ? ? b = { key: data.data[a].day, value: data.data[a].cur_num }
? ? ? ? this.curNums.push(b)
? ? ? }
?
? ? ? console.log(this.curNums); ?
? ? ? // 打印的格式 ?[0:{key:14,value:57},1:{key:15,value:57},2:{key:16,value:0}] ?
? ? ??
? ? },
? ? // 日期添加備注
? ? formatter(day) {
? ? ? // 當(dāng)前月份的日
? ? ? var date = day.date.getDate()
?
? ? ? for (let i = 0; i < this.curNums.length; i++) {
? ??
? ? ? ? // 當(dāng)前點(diǎn)擊的日相同
? ? ? ? if (date == this.curNums[i].key) {
?
? ? ? ? ? // 判斷預(yù)約次數(shù)是否為0
? ? ? ? ? if (this.curNums[i].value == 0) {
?
? ? ? ? ? ? // 日期添加備注
? ? ? ? ? ? day.topInfo = '已約滿'
? ? ? ? ? } else {
? ? ? ? ? ? // 日期添加備注
? ? ? ? ? ? day.topInfo = '可預(yù)約'
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? ? return day
? ? },
? ? // 點(diǎn)擊任意日期
? ? confirmFn(data) {
? ? ? console.log(data);
? ? ??
? ? ? this.timeValue = this.timeFormat(data)
?
? ? ? for (let i = 0; i < this.curNums.length; i++) {
? ? ? ? // 如果當(dāng)前點(diǎn)擊的日 相同
? ? ? ? if (this.timeValue == this.curNums[i].key) {
?
? ? ? ? ? // 當(dāng)前日期的預(yù)約次數(shù)為0 ?提示用戶并不可跳轉(zhuǎn)
? ? ? ? ? if (this.curNums[i].value == 0) {
? ? ? ? ? ? return this.$Toast.fail('當(dāng)前日期已約滿')
? ? ? ? ? }
?
? ? ? ? ? this.$router.push({
? ? ? ? ? ? name: 'Registration',
? ? ? ? ? ? params: {
? ? ? ? ? ? ? data: data
? ? ? ? ? ? }
? ? ? ? ? })
? ? ? ? }
? ? ? }
? ? },
? ? // 時間格式化 2019-09-08
? ? timeFormat(time) {
? ? ? let year = time.getFullYear()
? ? ? let month = time.getMonth() + 1
? ? ? let day = time.getDate()
? ? ? return day
? ? },
? },
? computed: {
? ? // 最大日期為當(dāng)前時間日期+預(yù)約時間段
? ? maxDate() {
? ? ? let curDate = new Date().getTime()
? ? ? // 后臺返回的預(yù)約天數(shù)(7) - 1 ? 因為不減一 會多出一天 預(yù)約天數(shù)為7 頁面會顯示8天?
? ? ? let one = (this.doctorInfo.bookDayNum - 1) * 24 * 3600 * 1000
? ? ? let oneYear = curDate + one
? ? ? return new Date(oneYear)
? ? }
? }
}

<style lang="less" scoped>
// 日歷備注
.van-calendar__top-info {
? background: linear-gradient(86deg, rgba(212, 165, 116, 0.98), rgba(238, 202, 163, 0.98));
}
</style>

效果圖：

橫向的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){
? ? ? ? ? ??
? ? ? ? },
? ? ? ? // 當(dāng)前月上一個月
? ? ? ? deMonth() {
? ? ? ? ? ? this.monthCont--;
? ? ? ? ? ? this.defaultDate = new Date(
? ? ? ? ? ? ? ? this.year,
? ? ? ? ? ? ? ? this.month + this.monthCont,
? ? ? ? ? ? ? ? 1
? ? ? ? ? ? );
? ? ? ? },
? ? ? ? // 當(dāng)前月下一個月
? ? ? ? adMonth() {
? ? ? ? ? ? this.monthCont++;
? ? ? ? ? ? this.defaultDate = new Date(
? ? ? ? ? ? ? ? this.year,
? ? ? ? ? ? ? ? this.month + this.monthCont,
? ? ? ? ? ? ? ? 1
? ? ? ? ? ? );
? ? ? ? },
? ? ? ? // 當(dāng)前年上一個年
? ? ? ? deYear() {
? ? ? ? ? ? this.yearCont--;
? ? ? ? ? ? this.defaultDate = new Date(
? ? ? ? ? ? ? ? this.year+ this.yearCont,
? ? ? ? ? ? ? ? this.month,
? ? ? ? ? ? ? ? 1
? ? ? ? ? ? );
?
? ? ? ? },
? ? ? ? // 當(dāng)前年下一個年
? ? ? ? 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個單箭頭組合一下

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: