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

Question

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 )

Answer 1

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

Answer 2

I came up with a snippet to show you things simpler. I put a setTimeout in mounted to simulate a request from the server, and after 1 second, the response will come from the server and fill the disable_dates with date objects.

I used the simplest way to map the strings to the date objects, and you can also use map or normal for to achieve this goal.

new Vue({
  el: '#app',
  data: {
    date: null,
    disable_dates: [],

  },
  mounted() {
    setTimeout(() => {
      let string_dates_from_srver = ['2021-05-05', '2021-05-08']
      string_dates_from_srver.forEach((item) => {
        this.disable_dates.push(new Date(item))
      })
    }, 1000)
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<link href="https://unpkg.com/[email protected]/lib/v-calendar.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/lib/v-calendar.umd.min.js"></script>
<div id='app'>

  <v-date-picker class="date-picker" v-model="date" :disabled-dates="disable_dates" color="blue" is-range></v-date-picker>

  {{date}}
</div>