カレンダーのカスタマイズ方法

現在、Vueを用いてカレンダーを作成しているのですが、日付がずれて表示されてしまっている為、こちらを修正したいと考えています。
現状の問題点として、2023年1月の日付がずれ、1日には日曜日がくるはずですが、土曜日が来てしまっています。
また、前月及び翌月の日付は表示しないようにしたいです。

javascript
1<template>
2  <div
3    class="w-60 bg-white dark:border-[1px] dark:border-gray_border dark:bg-gray_800 rounded-lg shadow-lg"
4  >
5    <div class="flex justify-center space-x-2 py-3 items-center rounded-lg">
6      <button
7        type="button"
8        class="-my-1.5 flex flex-none items-center justify-center p-1.5"
9        @click="toPreviousMonth"
10      >
11        <span class="sr-only">Previous month</span>
12        <!-- Heroicon name: solid/chevron-left -->
13        <svg
14          class="h-5 w-5 icon"
15          xmlns="http://www.w3.org/2000/svg"
16          viewBox="0 0 20 20"
17          fill="currentColor"
18          aria-hidden="true"
19        >
20          <path
21            fill-rule="evenodd"
22            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
23            clip-rule="evenodd"
24          />
25        </svg>
26      </button>
27      <h2 class="font-normal text-gray_800 text-sm dark:text-white font-inter">
28        {{ format(currentDate, 'MMMM yyyy') }}
29      </h2>
30      <button
31        type="button"
32        class="-my-1.5 -mr-1.5 ml-2 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500"
33        @click="toNextMonth"
34      >
35        <!-- Heroicon name: solid/chevron-right -->
36        <svg
37          class="h-5 w-5 icon"
38          xmlns="http://www.w3.org/2000/svg"
39          viewBox="0 0 20 20"
40          fill="currentColor"
41          aria-hidden="true"
42        >
43          <path
44            fill-rule="evenodd"
45            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
46            clip-rule="evenodd"
47          />
48        </svg>
49      </button>
50    </div>
51    <div class="mt-2 grid grid-cols-7 text-center text-sm">
52      <div class="text-gray_500 font-inter dark:text-white">Mo</div>
53      <div class="text-gray_500 font-inter dark:text-white">Tu</div>
54      <div class="text-gray_500 font-inter dark:text-white">We</div>
55      <div class="text-gray_500 font-inter dark:text-white">Th</div>
56      <div class="text-gray_500 font-inter dark:text-white">Fr</div>
57      <div class="text-gray_500 font-inter dark:text-white">Sa</div>
58      <div class="text-gray_500 font-inter dark:text-white">Su</div>
59    </div>
60    <div class="mt-2 grid grid-cols-7 text-sm font-inter">
61      <button
62        v-for="(day, index) in days"
63        :key="`day-${index}`"
64        type="button"
65        class="mx-auto flex h-8 w-8 items-center justify-center rounded-lg"
66        :class="{ 'bg-blue_400 justify-center rounded-lg': day.isCurrent }"
67        @click="currentDate = day.date"
68      >
69        <time
70          :class="{
71            'text-number_calendar': !day.isCurrentMonth,
72            'text-gray_800 dark:text-white': day.isCurrentMonth,
73          }"
74        >
75          {{ format(day.date, 'd') }}
76        </time>
77      </button>
78    </div>
79  </div>
80</template>
81
82<script setup lang="ts">
83  import {
84    subDays,
85    addDays,
86    eachDayOfInterval,
87    format,
88    startOfMonth,
89    compareAsc,
90    startOfDay,
91    addMonths,
92    subMonths,
93    getDay,
94  } from 'date-fns'
95  import { computed, ref } from 'vue'
96  // 日本時間の0時
97  const currentDate = ref(startOfDay(new Date()))
98  console.log('currentDate', currentDate)
99  const monthStart = startOfMonth(currentDate.value)
100  console.log(getDay(monthStart))
101
102  const days = computed(() => {
103    //今月1日を取得
104    const monthStart = startOfMonth(currentDate.value)
105
106    //曜日を取得(日曜日は0)
107    const dayNumInWeek = getDay(monthStart)
108
109    const calendarStart = subDays(
110      monthStart,
111      dayNumInWeek !== 0 ? dayNumInWeek - 1 : 6
112    )
113
114    //eachDayOfIntervalは指定期間内の各日付を配列に格納して返却します
115    return eachDayOfInterval({
116      start: calendarStart,
117      end: addDays(calendarStart, 41),
118    }).map((date) => {
119      {
120        return {
121          isCurrent: compareAsc(currentDate.value, date) === 0,
122          isCurrentMonth: date.getMonth() === currentDate.value.getMonth(),
123          date: date,
124        }
125      }
126    })
127  })
128
129  function toNextMonth() {
130    currentDate.value = addMonths(startOfMonth(currentDate.value), 1)
131  }
132
133  function toPreviousMonth() {
134    currentDate.value = subMonths(startOfMonth(currentDate.value), 1)
135  }
136</script>
137