flylocal-web/components/Calendar.vue

<template>
  <div class="calendar-page">
    <h1 class="calendar__month">
      {{ 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 calendar__day--blank"
      />
      <li
        v-for="day in getDaysInMonth(date)"
        :key="day.toString()"
        class="calendar__day"
      >
        <span class="day__date"> {{ day.getDate() }} </span>
        <NuxtLink
          v-if="
            selectedDows.find((sched) =>
              sched.DowsList.find((dow) => dow.num == day.getDay())
            ) && day > new Date()
          "
          class="btn btn--primary btn--day"
          :to="
            '/flights/' +
              $route.params.o +
              '/' +
              $route.params.d +
              '/' +
              day.toLocaleDateString('en-CA')
          "
        >
          <span class="day__date"> {{ day.getDate() }} </span>
        </NuxtLink>
        <span
          v-if="
            selectedDows.find((sched) =>
              sched.DowsList.find((dow) => dow.num == day.getDay())
            ) &&
              day > new Date() &&
              selectedDows.filter((sched) =>
                sched.DowsList.find((dow) => dow.num == day.getDay())
              ).length == 1
          "
          class="badge badge--day badge--count"
        >
          {{ scheduleTime(selectedDows[0]) }}
        </span>
        <span
          v-if="
            selectedDows.find((sched) =>
              sched.DowsList.find((dow) => dow.num == day.getDay())
            ) &&
              day > new Date() &&
              selectedDows.filter((sched) =>
                sched.DowsList.find((dow) => dow.num == day.getDay())
              ).length > 1
          "
          class="badge badge--day badge--count"
        >
          {{
            selectedDows.filter((sched) =>
              sched.DowsList.find((dow) => dow.num == day.getDay())
            ).length + "x"
          }}
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    date: {
      type: [Date],
      default () {
        return new Date()
      }
    },
    selectedDows: {
      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)
    },
    scheduleTime (dow) {
      // console.log(dow)
      const thisDate = new Date(dow.DepartureTimeFormatted)
      const hours = thisDate.getHours() + Math.round(thisDate.getMinutes() / 60)
      return ((hours > 12) ? (hours - 12) + 'pm' : hours + 'am')
    }
  }
}
</script>

<style>
.calendar-page {
  width: min(90vmin, 400px);
}

.calendar {
  display: grid;
  border-radius: 3rem;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.5fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0.75rem;
}

.day__date {
  font-size: 1.4rem;
}

.btn.btn--day {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  background: #007fff;
  color: white;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar__day {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eee;
}

.calendar__day--dow {
  background: transparent;
  aspect-ratio: unset;
  color: gray;
  font-size: 1.2rem;
  font-weight: 300;
}

.calendar__day--blank {
  background: white;
}

h1.calendar__month {
  text-align: center;
  font-size: 2rem;
  margin: 0.5rem 0;
  font-weight: 700;
}

.badge.badge--day {
  position: absolute;
  background: hotpink;
  border: white 0.2rem solid;
  border-radius: 999px;
  color: white;
  padding: 0 0.4em;
  bottom: -0.25rem;
  right: -0.25rem;
  font-size: 0.7rem;
}
</style>