vue.jsvcalendar

How to select three days using datepicker in vue


Im using VCalendar - datepicker and I want to highlight days which are in my array: ['2022-02-01', '2022-02-08', '2022-02-15'], I cant find this in documentation, there is only single date or range of dates, but not alone dates like in my array, which are all tuesdays for example.


Solution

  • Actually VCalendar has documentation to achieve multiple date selection https://vcalendar.io/examples/datepickers.html#multiple-dates

    new Vue({
      el: "#app",
      data: () => ({
        dates: ['2022-02-01', '2022-02-08', '2022-02-15']
      }),
      
      computed: {
        attributes() {
          return this.dates.map(date => ({
            highlight: true,
            dates: date,
          }));
            }
      }
    })
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <script src="https://unpkg.com/v-calendar@2.4.0/lib/v-calendar.umd.min.js"></script>
    <div id="app">
      <v-calendar :attributes="attributes" />
    </div>