I have been attempting to customize my bootstrap vue calendar in a way that allows me to color the start and end dates with specific classes when they are selected, while also adding another class called .inTrip to all the days in-between. It seems like I'm making progress, but I've run into an issue where adding one class inside my function removes the others. For instance, my start date can't seem to have both the start class and the intrip class applied simultaneously, even though it should.
If you'd like to see the calendar component, you can find it here.
I'm hoping there's a different way to write the ternary statement so that all classes can be included without canceling each other out.
Thank you for any advice. I'll also provide an example of how it currently looks – you can see that the lines for the .intrip class show up, but if I click again, my .start class shows and the intrip class does not :/
https://i.sstatic.net/WAXaa.png
<template>
<b-row>
<b-col md="auto">
<b-calendar v-model="value" weekday-header-format="short" hide-header nav-prev-year="disable" :date-info-fn="dateClass" @context="onContext" locale="en-US"></b-calendar>
</b-col>
<b-col>
<p>Value: <b>'{{ value }}'</b></p>
<p class="mb-0">Context:</p>
<pre class="small">{{ context }}</pre>
</b-col>
</b-row>
</template>
<script>
export default {
name: 'calendar',
data() {
return {
value: '',
values: [],
context: null
}
},
methods: {
onContext(ctx) {
this.context = ctx
if(this.values.length < 2){
this.values.push(this.context.selectedYMD.split('-')[2])
}else{
this.values=[]
this.values[0] = this.context.selectedYMD.split('-')[2]
}
console.log(this.values)
},
dateClass(ymd, date) {
const day = date.getDate()
console.log('VALUES', this.values)
return day >= parseInt(this.values[0]) && day <= parseInt(this.values[1]) ? 'inTrip' : day == parseInt(this.values[0]) ? 'start' :day == parseInt(this.values[0]) ? 'end':''
}
}
}
</script>
<style>
.inTrip{
border-top:1px solid black;
border-bottom:1px solid black;
}
.start{
background-color: #2E9CFF;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border:1px solid black
}
.end{
background-color: #2E9CFF;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border:1px solid black
}
</style>