[SOLVED] v-calendar question, how to disable dates based on dates in an object's arraylist

v-calendar question, how to disable dates based on dates in an object's arraylist

i just started to code, and right now we are using v-calendar.io in our airbnb project and we need to disable dates based on a listing's unavailable date arraylist in the backend.

<v-date-picker
  class="date-picker"
  v-model="date"
  :disabled-dates="[new Date(2021, 9, 10)]"
  color="blue"
  is-range
/>

So putting dates in the :disabled-dates works, but how do i do to make it function based on the arraylist instead of hard coded preset dates? ( I've learnt how to fetch data from backend, but i don't know how to code so the :disabled-dates take those info )

Solution

Put your array of dates into Vue components data:

data: () => ({
   disabledDays: [] // later populated from API call
})

Then you can do:

<v-date-picker
  class="date-picker"
  v-model="date"
  :disabled-dates="disabledDays" /*not hardcoded*/
  color="blue"
  is-range
/>

Once you receive date strings from backend, you can convert them into date objects like:

this.disabledDays = response.disabledDates.map(string => new Date(string))`