fix(ui): use Monday as the first day of the week

Fixes #6715.
This commit is contained in:
Lukasz Mierzwa
2026-05-15 17:00:19 +01:00
committed by Łukasz Mierzwa
parent b87b6f4e21
commit e5b021ba88
4 changed files with 94 additions and 85 deletions

View File

@@ -1,5 +1,11 @@
# Changelog
## v0.130
### Fixed
- Calendar now uses Monday as the first day of the wek - #6715.
## v0.129
### Fixed

View File

@@ -1201,6 +1201,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
<nav
aria-label="Navigation bar"
class="rdp-nav"
data-animated-nav="true"
>
<button
aria-label="Go to the Previous Month"
@@ -1237,9 +1238,11 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
</nav>
<div
class="rdp-month"
data-animated-month="true"
>
<div
class="rdp-month_caption"
data-animated-caption="true"
>
<span
aria-live="polite"
@@ -1260,14 +1263,8 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
>
<tr
class="rdp-weekdays"
data-animated-weekdays="true"
>
<th
aria-label="Sunday"
class="rdp-weekday"
scope="col"
>
Su
</th>
<th
aria-label="Monday"
class="rdp-weekday"
@@ -1310,14 +1307,76 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
>
Sa
</th>
<th
aria-label="Sunday"
class="rdp-weekday"
scope="col"
>
Su
</th>
</tr>
</thead>
<tbody
class="rdp-weeks"
data-animated-weeks="true"
>
<tr
class="rdp-week"
>
<td
class="rdp-day rdp-disabled rdp-hidden rdp-outside"
data-day="2060-01-26"
data-disabled="true"
data-hidden="true"
data-month="2060-01"
data-outside="true"
role="gridcell"
/>
<td
class="rdp-day rdp-disabled rdp-hidden rdp-outside"
data-day="2060-01-27"
data-disabled="true"
data-hidden="true"
data-month="2060-01"
data-outside="true"
role="gridcell"
/>
<td
class="rdp-day rdp-disabled rdp-hidden rdp-outside"
data-day="2060-01-28"
data-disabled="true"
data-hidden="true"
data-month="2060-01"
data-outside="true"
role="gridcell"
/>
<td
class="rdp-day rdp-disabled rdp-hidden rdp-outside"
data-day="2060-01-29"
data-disabled="true"
data-hidden="true"
data-month="2060-01"
data-outside="true"
role="gridcell"
/>
<td
class="rdp-day rdp-disabled rdp-hidden rdp-outside"
data-day="2060-01-30"
data-disabled="true"
data-hidden="true"
data-month="2060-01"
data-outside="true"
role="gridcell"
/>
<td
class="rdp-day rdp-disabled rdp-hidden rdp-outside"
data-day="2060-01-31"
data-disabled="true"
data-hidden="true"
data-month="2060-01"
data-outside="true"
role="gridcell"
/>
<td
aria-selected="true"
class="rdp-day rdp-today rdp-selected rdp-range_start"
@@ -1335,6 +1394,10 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
1
</button>
</td>
</tr>
<tr
class="rdp-week"
>
<td
aria-selected="true"
class="rdp-day rdp-selected rdp-range_middle"
@@ -1431,10 +1494,6 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
7
</button>
</td>
</tr>
<tr
class="rdp-week"
>
<td
aria-selected="true"
class="rdp-day rdp-selected rdp-range_middle"
@@ -1451,6 +1510,10 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
8
</button>
</td>
</tr>
<tr
class="rdp-week"
>
<td
aria-selected="true"
class="rdp-day rdp-selected rdp-range_middle"
@@ -1547,10 +1610,6 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
14
</button>
</td>
</tr>
<tr
class="rdp-week"
>
<td
aria-selected="true"
class="rdp-day rdp-selected rdp-range_middle"
@@ -1567,6 +1626,10 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
15
</button>
</td>
</tr>
<tr
class="rdp-week"
>
<td
aria-selected="true"
class="rdp-day rdp-selected rdp-range_middle"
@@ -1663,10 +1726,6 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
21
</button>
</td>
</tr>
<tr
class="rdp-week"
>
<td
aria-selected="true"
class="rdp-day rdp-selected rdp-range_middle"
@@ -1683,6 +1742,10 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
22
</button>
</td>
</tr>
<tr
class="rdp-week"
>
<td
aria-selected="true"
class="rdp-day rdp-selected rdp-range_middle"
@@ -1779,10 +1842,6 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
28
</button>
</td>
</tr>
<tr
class="rdp-week"
>
<td
aria-selected="true"
class="rdp-day rdp-selected rdp-range_middle"
@@ -1799,66 +1858,6 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
29
</button>
</td>
<td
aria-selected="true"
class="rdp-day rdp-hidden rdp-outside rdp-selected rdp-range_middle"
data-day="2060-03-01"
data-hidden="true"
data-month="2060-03"
data-outside="true"
data-selected="true"
role="gridcell"
/>
<td
aria-selected="true"
class="rdp-day rdp-hidden rdp-outside rdp-selected rdp-range_middle"
data-day="2060-03-02"
data-hidden="true"
data-month="2060-03"
data-outside="true"
data-selected="true"
role="gridcell"
/>
<td
aria-selected="true"
class="rdp-day rdp-hidden rdp-outside rdp-selected rdp-range_middle"
data-day="2060-03-03"
data-hidden="true"
data-month="2060-03"
data-outside="true"
data-selected="true"
role="gridcell"
/>
<td
aria-selected="true"
class="rdp-day rdp-hidden rdp-outside rdp-selected rdp-range_middle"
data-day="2060-03-04"
data-hidden="true"
data-month="2060-03"
data-outside="true"
data-selected="true"
role="gridcell"
/>
<td
aria-selected="true"
class="rdp-day rdp-hidden rdp-outside rdp-selected rdp-range_middle"
data-day="2060-03-05"
data-hidden="true"
data-month="2060-03"
data-outside="true"
data-selected="true"
role="gridcell"
/>
<td
aria-selected="true"
class="rdp-day rdp-hidden rdp-outside rdp-selected rdp-range_middle"
data-day="2060-03-06"
data-hidden="true"
data-month="2060-03"
data-outside="true"
data-selected="true"
role="gridcell"
/>
</tr>
</tbody>
</table>

View File

@@ -228,11 +228,13 @@ describe("<TabContentStart />", () => {
"February 2060",
);
fireEvent.click(container.querySelector("button.rdp-button_next")!);
expect(container.querySelector(".rdp-month_caption")?.textContent).toBe(
const captionsAfterNext = container.querySelectorAll(".rdp-month_caption");
expect(captionsAfterNext[captionsAfterNext.length - 1].textContent).toBe(
"March 2060",
);
fireEvent.click(container.querySelector("button.btn.btn-light.btn-sm")!);
expect(container.querySelector(".rdp-month_caption")?.textContent).toBe(
const captionsAfterToday = container.querySelectorAll(".rdp-month_caption");
expect(captionsAfterToday[captionsAfterToday.length - 1].textContent).toBe(
format(new Date(), "LLLL yyyy"),
);
});

View File

@@ -105,6 +105,8 @@ const TabContentStart: FC<{
start: silenceFormStore.data.startsAt,
end: silenceFormStore.data.endsAt,
}}
weekStartsOn={1}
animate
/>
</div>
<HourMinute