Vue.js - How to set only available dates in V-Calendar?

Question

I'm using the V-Calendar and Vue.js for printing a calendar showing the available dates.

My code:

<v-date-picker
    v-model="date"
    :value="null"
    color="red"
    is-inline
    :available-dates='[
        {start: new Date(2020, 06, 28),end: new Date(2020, 06, 28)},
        {start: new Date(2020, 06, 30),end: new Date(2020, 06, 30)}
    ]'
/>

Script:

<script>
    var app = new Vue({
        el: "#div",
        data: {
            dates: [],
        },
        watch: {
            result: function () {
                app.result.forEach(function(item, index){
                    let formatedDate = moment(item.date).format('YYYY-MM-DD');
                    if(!app.dates.includes(formatedDate)){
                        app.dates.push(formatedDate)
                    }
                });
            }
        }
    });
</script>

This only allow me to select these two dates, but how can I set these values inside the javascript and not the html? I want to load data from API, and this values should not be listed inside the html?

Response from API: [ "2020-09-01", "2020-09-02", "2020-09-03", "2020-09-04", "2020-09-05", "2020-09-06", "2020-09-07" ]

Link to calendar: https://vcalendar.io

how does your API response look? please provide the relevant parts of the script — Boussadjra Brahim, Jul 28 '20 at 10:49
ok, do you mean by that response the available dates so you want to take only the start and the end of that dates ? — Boussadjra Brahim, Jul 28 '20 at 11:00
Only thise days are to be selected. Rest should be "inactive" — sdfgg45, Jul 28 '20 at 11:01
in the example provided you want to only `"2020-09-01"` and `"2020-09-07"`? — Boussadjra Brahim, Jul 28 '20 at 11:02
All of the dates in aray should be available to select, (available date for book in calendar) — sdfgg45, Jul 28 '20 at 11:04
what i understood is the dates set between the start and the end will be available, so you should only mention these two values, am i right? — Boussadjra Brahim, Jul 28 '20 at 11:09
The list could be random, example: 2020-08-25, 2020-09-02 etc.. so only thise spesific dates areavailable to select. — sdfgg45, Jul 28 '20 at 11:12

score 1 · Accepted Answer · answered Jul 28 '20 at 11:26

Try to map the API response, then bind dates property to available-dates prop like :

:available-dates='dates'

if(!app.dates.find(date=>new Date(date).getTime()===new Date(formatedDate).getTime())){
  app.dates.push(  {start: new Date(formatedDate),end: new Date(formatedDate)})
}

Vue.js - How to set only available dates in V-Calendar?

1 Answers1