javascript - 选择时，v-calendar 不会突出显示道具内的日期

Question

我正在尝试根据我选择的开始和结束日期突出显示我的 vue 日历。我正在关注文档，但似乎没有提供有关如何选择日期的详细信息https://vcalendar.io/attributes.html

目前我可以使用 dayClicked 方法选择日期并将它们存储到我的状态中，但是当我使用属性内部的 dates 道具来设置突出显示的日期时，什么也没有发生。我注意到如果我只是

代替

dates: { start: new Date(year, month, this.selectedDay.day), end: new Date(year, month, this.endDate.day)},

和

  dates: { start: new Date(year, month, 12), end: new Date(year, month, 14)},

它工作正常，但我已经检查以确保传递的值是整数，所以我假设它只是由于某种原因无法访问 data() ......我希望有人能帮助我找到一种方法解决这个问题并以某种方式将我的日子传递给日历组件

任何帮助表示赞赏:)

<template>
 <div id="calendarContainer">
    
 <DatePicker is-range :attributes='attributes'
 @dayclick='dayClicked'
 />
    
    <button class="arrowBtnsLeft" @click="monthBack">&#60;</button>
    <button class="arrowBtnsRight" @click="monthForward">&#62;</button>
</div>
</template>

<script>
import DatePicker from 'v-calendar/lib/components/calendar.umd'

export default {
  name: 'calendar', 
  components:{
      DatePicker,
},
  data() {
  
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth()

  return {
       selectedDay: {day: 14},
       endDate: {day: 17},
    
        attributes: [
      // This is a single attribute
      {
     
        key: 'today',
        highlight:{
            start: {fillMode: 'outline'},
            end: {fillMode: 'outline'},
            color:'red',
            fillMod:'light'
        },
        dates: { start: new Date(year, month, this.selectedDay.day), end: new Date(year, month, this.endDate.day)},
       
        
      
      }
    ]
    
  }
  
},
onMounted(){
      console.log(this.range)
  },
methods: {
    dayClicked(day) {
    if(this.selectedDay == null){
      this.selectedDay = day;
      //change days styles to be blue
     

    }else if(this.selectedDay!== null && this.endDate == null){
        this.endDate = day;
        //change days styles to be blue
        //change days days inbetween to be outlined
        console.log('start',this.selectedDay, 'end', this.endDate)
        this.selectedDay.classes.push('start')
        this.endDate.classes.push('end')
     }else{
        //remove classes for start and end
         this.selectedDay.classes.pop()
         this.endDate.classes.pop()

        this.selectedDay = day;
         this.endDate = null;
        
     }
     

    },
        
       monthForward(){
        let newtime = this.context.selectedYMD.split('-')
        var timestring = ''
          newtime[1] = parseInt(newtime[1])+1
          newtime[1] = newtime[1].toString()

        for( let i = 0; i < 3; i ++){
          console.log(newtime[i])
          if(i < 2){
          timestring+=newtime[i]+'-'
          }else{
            timestring+=newtime[i]
          }
        }

        this.value = timestring
      
      
       },
       monthBack(){
         let newtime = this.context.selectedYMD.split('-')
        var timestring = ''
          newtime[1] = parseInt(newtime[1])-1
          newtime[1] = newtime[1].toString()


        for( let i = 0; i < 3; i ++){
          console.log(newtime[i])
          if(i < 2){
          timestring+=newtime[i]+'-'
          }else{
            timestring+=newtime[i]
          }
        }

        this.value = timestring
       }
    }
    
    
}
</script>

<style>
#calendarContainer{
  position: relative;
  z-index: 1;
  width: 50%;
  height: 50%;
}
.inTrip{
  border-top:1px solid gray;
  border-bottom:1px solid gray;
}

.start{
border-radius: 20px;
border-left:1px solid gray;
border-right:none;
background-color:#2E9CFF;
color:white;

}
.end{
border-radius: 20px;
border-right:1px solid gray;
border-left:none;
background-color:#2E9CFF;
color:white;

}

.arrowBtnsLeft{
  position:absolute;
  top:.8em;
  left:12em;
  background-color:#afd7f78e;
  color:#2E9CFF;
  border: none;
  margin-left: .5em;
  margin-right: .5em;
  border-radius:5px;
  text-align: center;
}
.arrowBtnsRight{
  position:absolute;
  top:.8em;
  left:14em;
  background-color:#afd7f78e;
  color:#2E9CFF;
  border: none;
  margin-left: .5em;
  margin-right: .5em;
  border-radius:5px;
  text-align: center;
}
</style>

标签： javascriptcssvcalendar

Answer 1

如果有人好奇我找到了解决方案，我使用计算属性返回 2 组天

<template>
 <div id="calendarContainer">
    
 <Calendar :attributes='attr' @dayclick='onDayClick' />
    
    <button class="arrowBtnsLeft" @click="monthBack">&#60;</button>
    <button class="arrowBtnsRight" @click="monthForward">&#62;</button>
</div>
</template>

<script>
import Calendar from 'v-calendar/lib/components/calendar.umd'

export default {
  name: 'calendar', 
  components:{
      Calendar
},
  data() {
  
 
  return {
        days : [],
        counter: 0
    
  };
},
computed:{

dates() {
  return this.days.map(day => day.date);

    },
 
    attr() {
      const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth();
       
     return [this.dates.map(date => ({
        highlight:{class:'start'},
        dates: date,
      })),

      {
      highlight:'blue',
        dates: {
         start: new Date(year, month, 1), end:new Date(year, month, 1)
        }
      }
      ];
  
    },
},
methods: {
   onDayClick(day) {

      const idx = this.days.findIndex(d => d.id === day.id);
      if(this.counter > 1 || this.days.length > 2){
        this.days = []
        this.counter = 0
      }
      this.counter+=1
      if (idx >= 0) {
        this.days.splice(idx, 1);
      } else {
       

        this.days.push({
          id: day.id,
          date: day.date,
        })
        
       
        if(this.days.length == 2){
        this.attr[1].dates.start = this.days[0].date
        this.attr[1].dates.end = day.date
          
        }
      }
      console.log(this.days,'count',this.counter,'attributes',this.attr[1].dates,'days.length',this.days.length)
   }
      

    
    
}
</script>