I am trying to set specific dates as selected in the vue functional-calendar (version 2.8.87) component (https://github.com/Digital-Threads/vue-functional-calendar). I have set up the v-model and can successfully detect dates selected by a mouse-click.
However, when I try to set selected dates using a JavaScript function, the calendar does not update to mark or select these dates. The code snippet below illustrates this issue. If anyone has found a solution to this problem, I would greatly appreciate any advice.
<template>
<div>
<FunctionalCalendar
v-model="calendarData"
:configs="calendarConfigs"
ref="Calendar">
</FunctionalCalendar>
<b-form @submit="getCal">
<b-button class="button float-right" type="submit" variant="success">Submit</b-button>
</b-form>
</div>
</template>
<script>
import { FunctionalCalendar } from 'vue-functional-calendar';
export default {
components:{FunctionalCalendar},
name: 'CustomerArea',
data() {
return {
calendarData:{
selectedDates : []
},
calendarConfigs:{
isMultipleDatePicker : true
},
};
},
methods: {
getCal: function(){
console.log("getCal called");
this.calendarData.selectedDates = [{date: '21/7/2020'}];
}
}
};
</script>