Closed TobiasWeis closed 4 years ago
Here is a minimum example of my effort (point a) above):
<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>
Found out myself: One has to set the other options to false, then the selectedDates-array will be marked in the calendar as expected:
this.calendarData.selectedDates.push({ "date": "21/7/2020", "dateTime": false, "hour": "00", "minute": "00" });
this.calendarData.selectedDate = false;
this.calendarData.selectedDateTime = false;
this.calendarData.selectedHour = "00";
this.calendarData.selectedMinute = "00";
this.calendarData.selectedDatesItem = "";
this.calendarData.dateRange = { "start":
{ "date": false, "dateTime": false, "hour": "00", "minute": "00" },
"end": { "date": false, "dateTime": false, "hour": "00", "minute": "00" }
};
First off, thanks a lot for this awesome calendar!
Could you provide an example on how to programmatically set selected days of the calendar for isMultipleDatePicker=true? I have tried the following with version 2.8.84:
a) to set the "selectedDates"-array of calendarData in the methods-section: this.calendarData["selectedDates"] = [{ "date": "21/7/2020", "dateTime": false, "hour": "00", "minute": "00" }]; -> no calendar-update, no error
b) directly connect the marked-dates-array (<FunctionalCalendar v-model="calendarData" :marked-dates="markedDates" :isMultipleDatePicker=true) and set said array in the methods-section via this.markedDates = ['28/07/2020', '14/07/2020']; -> no calendar-update, no error
I am lost here and would appreciate your help very much :)