ManukMinasyan / vue-functional-calendar

Vue.js Functional Calendar | Component/Package
https://vue-functional-calendar.now.sh/
MIT License
468 stars 84 forks source link

Programmatic setting of selected dates #97

Closed TobiasWeis closed 4 years ago

TobiasWeis commented 4 years ago

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 :)

TobiasWeis commented 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>
TobiasWeis commented 4 years ago

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" } 
                                        };