flylocal-web/components/DatePicker.vue

<template>
  <div class="">
    <div class="calendar-wrapper">
      <Calendar
        v-for="date in startingDates"
        :key="date.toString()"
        :date="new Date(date)"
        :selected-dows="selectedDows"
        @book="book"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    startingDate: {
      type: [Date],
      default () {
        return new Date()
      }
    },
    selectedDows: {
      type: [Array],
      default () {
        return []
      }
    }
  },
  data () {
    return {
      numberOfMonths: 4,
      numAdult: 1,
      numChild: 0
    }
  },
  computed: {
    startingDates () {
      const listOfDates = []
      for (let index = 0; index < this.numberOfMonths; index++) {
        const thisDate = new Date(this.startingDate.getUTCFullYear(), this.startingDate.getUTCMonth() + index, 1)
        listOfDates.push(thisDate)
      }
      return listOfDates
    }
  },
  methods: {
    book (thisDate) {
      window.open(`https://www.anrdoezrs.net/links/100449149/type/am/https://www.expedia.com/go/flight/search/oneway/${this.formatDate(thisDate)}/${this.formatDate(thisDate)}?langid=1033&FromAirport=${this.selectedSchedule.Origin_IATA}&FromTime=${this.selectedSchedule.Departure_TimeL}&ToTime=${this.selectedSchedule.Arrival_TimeL}&ToAirport=${this.selectedSchedule.Destination_IATA}&Class=3&NumAdult=${this.numAdult}&NumChild=${this.numChild}`)
    },
    formatDate (thisDate) {
      return thisDate.toLocaleDateString('en-CA')
    }
  }
}
</script>

<style scoped>
.calendar-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: center;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
</style>