fix(calendar): fix calendar navigation label (#2996)

Takes over original PR
#2993 as they don't have
community committer rights.

---

Closes #2992

Changed the calendar navigation label to use the calendar year instead
of the local week-numbering year

---------

Co-authored-by: Viktor van Wijk <viktorvanwijk@hotmail.com>
Co-authored-by: Charlotte Gieltjes <charlotte.gieltjes@rebels.io>

Author: 3 people

.changeset/slimy-dolls-wash.md

@@ -0,0 +1,6 @@
+---
+"@utrecht/calendar-react": patch
+"@utrecht/component-library-react": patch
+---
+
+Changed the calendar navigation label to use the calendar year instead of the local week-numbering year

packages/components-react/calendar-react/src/index.test.tsx

@@ -142,4 +142,13 @@ describe('Calendar', () => {
     if (nextMonthButton) fireEvent.click(nextMonthButton);
     expect(currentDateLabel).toContainHTML('april 2023');
   });
+
+  it('shows correct year in navigation label', () => {
+    const currentDate = new Date(2025, 11, 29);
+    const { container } = render(<Calendar onCalendarClick={() => {}} locale={nl} currentDate={currentDate} />);
+
+    let currentDateLabel = container.querySelector('.utrecht-calendar__navigation-label');
+
+    expect(currentDateLabel).toContainHTML('december 2025');
+  });
 });

packages/components-react/calendar-react/src/index.tsx

@@ -147,7 +147,7 @@ export const Calendar = ({
             onNextClick={() => setVisibleMonth(addMonths(visibleMonth, 1))}
           >
             <CalendarNavigationLabel dateTime={format(visibleMonth, 'yyyy-mm')}>
-              {format(visibleMonth, 'LLLL Y', { locale })}
+              {format(visibleMonth, 'LLLL y', { locale })}
             </CalendarNavigationLabel>
           </CalendarNavigationButtons>
         </CalendarNavigationButtons>