fix(Calendar): sometimes first day of next month is missing (#1029)

* fix(Calendar): sometimes first day of next month is missing * chore(Calendar): extend fixedWeeks test case * chore(Calendar): add story for fixedWeeks * refactor(date): use endOfMonth * refactor(Calendar): update slow test * chore(Calendar): use edge case date for test --------- Co-authored-by: Eduard Predescu <[email protected]>
unovue · Jun 23, 2024 · 3d3e3c9 · 3d3e3c9
1 parent de1340c
commit 3d3e3c9
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 2 deletions.
diff --git a/packages/radix-vue/src/Calendar/Calendar.test.ts b/packages/radix-vue/src/Calendar/Calendar.test.ts
@@ -241,7 +241,7 @@ describe('calendar', async () => {
   it('always renders six weeks when `fixedWeeks` is `true`', async () => {
     const { getByTestId, calendar, user } = setup({
       calendarProps: {
-        modelValue: calendarDate,
+        modelValue: new CalendarDate(2024, 8, 1),
         fixedWeeks: true,
       },
     })
@@ -252,11 +252,15 @@ describe('calendar', async () => {
 
     const nextButton = getByTestId('next-button')
 
+    expect(getByTestId('date-8-1')).toHaveTextContent('1')
+
     for (let i = 0; i < 12; i++) {
       expect(getNumberOfWeeks()).toBe(6)
       await user.click(nextButton)
     }
 
+    expect(getByTestId('date-9-1')).toHaveTextContent('1')
+
     for (let i = 0; i < 24; i++) {
       expect(getNumberOfWeeks()).toBe(6)
       await user.click(nextButton)

diff --git a/packages/radix-vue/src/Calendar/story/CalendarFixedWeeksForLocales.story.vue b/packages/radix-vue/src/Calendar/story/CalendarFixedWeeksForLocales.story.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import Calendar from './_DummyCalendar.vue'
+import { BuddhistCalendar, CalendarDate, HebrewCalendar, JapaneseCalendar, PersianCalendar, TaiwanCalendar } from '@internationalized/date'
+
+const gregorian = new CalendarDate(2024, 8, 31)
+
+const persian = new CalendarDate(
+  new PersianCalendar(),
+  1404,
+  5,
+  31,
+)
+const japanese = new CalendarDate(
+  new JapaneseCalendar(),
+  'heisei',
+  31,
+  4,
+  30,
+
+)
+const buddhist = new CalendarDate(
+  new BuddhistCalendar(),
+  2563,
+  10,
+  31,
+)
+const taiwan = new CalendarDate(
+  new TaiwanCalendar(),
+  109,
+  10,
+  31,
+)
+
+const hebrew = new CalendarDate(
+  new HebrewCalendar(),
+  5781,
+  6,
+  29,
+)
+</script>
+
+<template>
+  <Story
+    title="Calendar/Fixed Weeks For Locales"
+    :layout="{ type: 'grid', width: '50%' }"
+  >
+    <Variant title="Gregorian">
+      <Calendar
+        :default-value="gregorian"
+        fixed-weeks
+        locale="en"
+      />
+    </Variant>
+
+    <Variant title="Japanese">
+      <Calendar
+        :default-value="japanese"
+        fixed-weeks
+        locale="ja"
+      />
+    </Variant>
+
+    <Variant title="Persian">
+      <Calendar
+        :default-value="persian"
+        fixed-weeks
+        locale="fa-IR"
+      />
+    </Variant>
+
+    <Variant title="Taiwan">
+      <Calendar
+        :default-value="taiwan"
+        fixed-weeks
+        locale="zh-TW"
+      />
+    </Variant>
+
+    <Variant title="Buddhist">
+      <Calendar
+        :default-value="buddhist"
+        fixed-weeks
+        locale="th"
+      />
+    </Variant>
+
+    <Variant title="Hebrew">
+      <Calendar
+        :default-value="hebrew"
+        fixed-weeks
+        locale="he"
+      />
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/radix-vue/src/date/calendar.ts b/packages/radix-vue/src/date/calendar.ts
@@ -78,7 +78,7 @@ export function createMonth(props: CreateMonthProps): Grid<DateValue> {
     let startFrom = nextMonthDays[nextMonthDays.length - 1]
 
     if (!startFrom)
-      startFrom = dateObj.add({ months: 1 }).set({ day: 1 })
+      startFrom = endOfMonth(dateObj)
 
     const extraDaysArray = Array.from({ length: extraDays }, (_, i) => {
       const incr = i + 1