fix: calendar

nemo-shen · Jan 28, 2024 · 8ee9aa5 · 8ee9aa5
1 parent a88250a
commit 8ee9aa5
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 60 deletions.
diff --git a/packages/core/useCalendar/index.ts b/packages/core/useCalendar/index.ts
@@ -139,76 +139,66 @@ export const useCalendar = (options: UseCalendarOptions = {}) => {
       .concat(daysOfWeek.slice(0, firstDayOfWeek))
   })
 
+  const getMonthDays = (year, month): Day[] =>
+    Array.from({ length: getDays(year, month) }, (_, index) => {
+      const date = new Date()
+      date.setFullYear(year)
+      date.setMonth(month - 1)
+      date.setDate(index + 1)
+      const day: Day = {
+        name: index + 1,
+        value: date,
+        week: date.getDay(),
+        disabled: false,
+      }
+      return day
+    })
+
+  const fillPadDates = (days: Day[]): Day[] => {
+    const startDay = days[0]
+    const endDay = days[days.length - 1]
+    const startDate = new Date(startDay.value)
+    const endDate = new Date(endDay.value)
+    return Array.from({ length: startDay.week }, () => {
+      startDate.setDate(startDate.getDate() - 1)
+      return {
+        name: startDate.getDate(),
+        value: startDate,
+        week: startDate.getDate(),
+        disabled: true,
+      } as Day
+    })
+      .concat(days)
+      .concat(
+        Array.from({ length: 6 - endDay.week }, () => {
+          endDate.setDate(endDate.getDate() + 1)
+          return {
+            name: endDate.getDate(),
+            value: endDate,
+            week: endDate.getDay(),
+            disabled: true,
+          } as Day
+        })
+      )
+  }
+
   const getDaysByYear = (
     year: number = new Date().getFullYear(),
     month: number = -1
   ): Day[][] => {
     if (year && month === -1) {
-      const months = Array.from({ length: 12 }, (_, k) => k + 1)
-        .map((m) =>
-          Array.from({ length: getDays(year, m) }, (_, index) => {
-            const date = new Date()
-            date.setFullYear(year)
-            date.setMonth(m - 1)
-            date.setDate(index + 1)
-            const day: Day = {
-              name: index + 1,
-              value: date,
-              week: date.getDay(),
-              disabled: false,
-            }
-            return day
-          })
-        )
-        .map((item) => {
-          const startDay = item[0]
-          const endDay = item[item.length - 1]
-          const startDate = new Date(startDay.value)
-          const endDate = new Date(endDay.value)
-          const fillMonth = Array.from({ length: startDay.week }, () => {
-            startDate.setDate(startDate.getDate() - 1)
-            return {
-              name: startDate.getDate(),
-              value: startDate,
-              week: startDate.getDate(),
-              disabled: true,
-            } as Day
-          })
-            .concat(item)
-            .concat(
-              Array.from({ length: 6 - endDay.week }, () => {
-                endDate.setDate(endDate.getDate() + 1)
-                return {
-                  name: endDate.getDate(),
-                  value: endDate,
-                  week: endDate.getDay(),
-                  disabled: true,
-                } as Day
-              })
-            )
-          return fillMonth
-        })
+      const months = Array.from({ length: 12 }, (_, k) => k + 1).map((m) =>
+        fillPadDates(getMonthDays(year, m))
+      )
 
       return months
     }
-    return [
-      Array.from({ length: getDays(year, month) }, (_, index) => {
-        const date = new Date()
-        date.setFullYear(year)
-        date.setMonth(month - 1)
-        date.setDate(index + 1)
-        const day: Day = {
-          name: index + 1,
-          value: date,
-          week: date.getDay(),
-          disabled: false,
-        }
-        return day
-      }),
-    ]
+    return [getMonthDays(year, month)]
   }
 
   return {
+    currentMonth,
+    currentYear,
     selectedDate,
     currentMonthDays,
     weekDays,

diff --git a/src/demo/UseCalendar.vue b/src/demo/UseCalendar.vue
@@ -4,6 +4,8 @@ import { useCalendar, Locale } from '@noi/core'
 
 const {
   weekDays,
+  currentMonth,
+  currentYear,
   currentMonthDays,
   goToToday,
   goToNextMonth,
@@ -35,7 +37,7 @@ const {
   <br />
   {{ weekDays }}
   <br />
-  <!-- {{ currentMonthDays }} -->
+  <h1>{{ currentYear }} - {{ currentMonth }}</h1>
   <div class="grid grid-cols-7 gap-1 grid-flow-row-dense p-1">
     <div class="text-center" v-for="week in weekDays">{{ week }}</div>
     <template v-for="(days, index) in getDays(2024)" :key="index">