Weekly calendar Vue Component

Calendar.vue

<template>
  <div class="space-y-4">
    <div class="flex items-center gap-2">
      <h1 class="text-4xl font-bold text-[#1B1D21]">
        {{ formatDate2(selectDate.toLocaleDateString()) }}
      </h1>

      <DatePicker class="shrink-0" v-model="selectDate">
        <template v-slot="{ inputValue, togglePopover }">
          <button @click="togglePopover()">
            <CalendarIcon class="w-7 h-7 text-[#ADA7A7]" />
          </button>
        </template>
      </DatePicker>
    </div>
    <div class="bg-[#F9F9F9] px-2.5 py-5 rounded-lg">
      <ul class="flex">
        <li
          v-for="(item, dInx) in weekDays"
          :key="dInx"
          :class="[
            item.day == selectDay
              ? 'bg-[#E5F1FF] shadow-[0px_1px_8px_rgba(20,46,110,0.1)] text-[#0075FF]'
              : 'bg-transparent text-[#202020]',
            item.day == toDay
              ? '!bg-[#c1deff] shadow-[0px_1px_8px_rgba(20,46,110,0.1)] text-[#0075FF]'
              : '',
            'w-11 h-[60px] flex flex-col justify-center gap-1.5 py-2.5 shrink-0 text-center rounded-2xl relative cursor-pointer transition-all duration-200 select-none',
          ]"
          @click="changeDay(item.day)"
        >
          <p
            :class="[
              item.day == selectDay ? 'text-[#0075FF]' : 'text-[#808080]',
              'text-[9px] font-normal ',
            ]"
          >
            {{ item.dayName }}
          </p>
          <p class="text-base font-medium">
            {{ item.day }}
          </p>

          <p
            v-if="dInx == 2"
            class="absolute -bottom-1 left-1/2 -translate-x-1/2 h-3 w-3 mx-auto border-2 border-[#F1F5F8] rounded-full bg-[#0075FF] inline-block"
          ></p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { formatDate2 } from "@/composable/utils";
import { computed, ref } from "@vue/runtime-core";
import { DatePicker } from "v-calendar";
import CalendarIcon from "../Icon/CalendarIcon.vue";

const selectDate = ref(new Date());

const toDay = ref(new Date().getDate());
const selectDay = ref(new Date().getDate());

const changeDay = (day) => {
  selectDay.value = day;
};

// start day of week
function getFirstDayOfWeek(d) {
  const date = new Date(d);
  const day = date.getDay();
  const diff = date.getDate() - day;

  return new Date(date.setDate(diff));
}

// full days of a week
const weekDays = computed(() => {
  const dayName = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];

  let startOfWeek = getFirstDayOfWeek(selectDate.value);

  // week days
  function days(current) {
    let week = [];
    // Starting Sunday
    let first = current.getDate() - current.getDay();

    let dayStart = first;
    let dayEnd = first + 6;

    while (dayStart <= dayEnd) {
      let date = new Date(current.getFullYear(), current.getMonth(), dayStart);

      let obj = {};

      obj.dayName = dayName[date.getDay()];
      obj.day = date.getDate();

      week.push(obj);

      dayStart++;
    }

    return week;
  }

  let input = new Date(startOfWeek);

  let result = days(input);

  return result;
});
</script>