flylocal-web/components/Calendar.vue

<template>
  <div>
    <h1>
      {{ new Date(date).toLocaleString("default", { month: "long" }) }}
    </h1>
    <ul class="calendar">
      <li
        v-for="dow in daysOfWeek"
        :key="dow"
        :class="['calendar__day', 'calendar__day--dow']"
      >
        {{ dow }}
      </li>
      <li
        v-for="index in getDayOfWeekOffset(date)"
        :key="index + 'o'"
        class="calendar__day"
      >
        <span class="day__date--blank" />
      </li>
      <li
        v-for="day in getDaysInMonth(date)"
        :key="day.toString()"
        class="calendar__day"
      >
        <span class="day__date"> {{ day.getDate() }} </span>
        <button
          v-if="selectedDays.find( sched => sched['num'] == day.getDay() )"
          @click="book(day)"
        >
          book
        </button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    date: {
      type: [Date],
      default () {
        return new Date()
      }
    },
    selectedDays: {
      type: [Array],
      default () {
        return []
      }
    }
  },
  data () {
    return {
      daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
    }
  },
  methods: {
    getDayOfWeekOffset (thisDate) {
      const dow = new Date(thisDate.getFullYear(), thisDate.getMonth(), 1).getDay()
      return dow
    },
    getDaysInMonth (thisDate) {
      const daysInMonth = new Date(thisDate.getFullYear(), thisDate.getMonth() + 1, 0).getDate()
      const days = []

      for (let index = 1; index < daysInMonth + 1; index++) {
        days.push(new Date(thisDate.getFullYear(), thisDate.getMonth(), index))
      }

      return days
    },
    book (thisDate) {
      this.$emit('book', thisDate)
    }
  }
}
</script>

<style>
.calendar {
  display: grid;
  width: 300px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
}
</style>