diff --git a/.changeset/shaggy-coins-enjoy.md b/.changeset/shaggy-coins-enjoy.md
new file mode 100644
index 0000000000..a3977204e4
--- /dev/null
+++ b/.changeset/shaggy-coins-enjoy.md
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": minor
+---
+
+Deprecated the Calendar component's `calendar` prop since support for the `gregory` calendar system wasn't fully tested and is partially broken. Use the default `iso8601` calendar system instead. The prop will be removed in the next major version.
diff --git a/.changeset/sour-llamas-check.md b/.changeset/sour-llamas-check.md
new file mode 100644
index 0000000000..c0ee386662
--- /dev/null
+++ b/.changeset/sour-llamas-check.md
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": patch
+---
+
+Fixed the display order of the Calendar component's month headline on Node 22.12 and above.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 740f9f05c8..f3a10fd4a9 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -7,7 +7,7 @@ jobs:
runs-on: ubuntu-latest
strategy:
matrix:
- node: [20, 22.11]
+ node: [20, 22]
steps:
- name: Checkout repository
uses: actions/checkout@v4
diff --git a/.github/workflows/templates.yml b/.github/workflows/templates.yml
index 36cd7ba753..7c94261b65 100644
--- a/.github/workflows/templates.yml
+++ b/.github/workflows/templates.yml
@@ -11,7 +11,7 @@ jobs:
strategy:
# https://docs.github.com/en/actions/using-jobs/using-a-matrix-for-your-jobs
matrix:
- node: [20, 22.11]
+ node: [20, 22]
template: [astro, nextjs, remix]
include:
- template: astro
diff --git a/packages/circuit-ui/components/Calendar/Calendar.mdx b/packages/circuit-ui/components/Calendar/Calendar.mdx
index 5891326cba..fccf20c945 100644
--- a/packages/circuit-ui/components/Calendar/Calendar.mdx
+++ b/packages/circuit-ui/components/Calendar/Calendar.mdx
@@ -28,7 +28,7 @@ Dates are formatted using the [`Intl.DateTimeFormat` API](https://developer.mozi
Use the `firstDayOfWeek` prop to set the first day of the week for the locale, either `1` (Monday) or `7` (Sunday). This information can be obtained using the [`Intl.Locale.prototype.getWeekInfo()` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getWeekInfo#firstday) in supported browsers.
-Only `iso8601` and `gregory` [calendars](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getCalendars#supported_calendar_types) and the left-to-right [writing direction](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) are currently supported.
+Only the `iso8601` [calendar](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getCalendars#supported_calendar_types) and the left-to-right [writing direction](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) are currently supported.
diff --git a/packages/circuit-ui/components/Calendar/Calendar.tsx b/packages/circuit-ui/components/Calendar/Calendar.tsx
index dc2e17fe73..7af750f28d 100644
--- a/packages/circuit-ui/components/Calendar/Calendar.tsx
+++ b/packages/circuit-ui/components/Calendar/Calendar.tsx
@@ -92,6 +92,10 @@ interface SharedProps {
*/
locale?: Locale;
/**
+ * @deprecated Support for the `gregory` calendar has been removed since it
+ * never fully worked. The `calendar` prop will be removed in the next major
+ * version.
+ *
* The identifier for the used [calendar](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar). Default: `iso8601`.
*/
calendar?: 'iso8601' | 'gregory';
@@ -150,7 +154,6 @@ export const Calendar = forwardRef(
nextMonthButtonLabel,
modifiers,
numberOfMonths = 1,
- calendar = 'iso8601',
...rest
} = useI18n(props, translations);
const [{ months, focusedDate, hoveredDate, today }, dispatch] = useReducer(
@@ -311,7 +314,6 @@ export const Calendar = forwardRef(
firstDayOfWeek={firstDayOfWeek}
daysInWeek={daysInWeek}
locale={locale}
- calendar={calendar}
modifiers={modifiers}
onFocus={handleFocusDate}
onSelect={onSelect}
@@ -358,17 +360,16 @@ function Month({
firstDayOfWeek = 1,
daysInWeek,
locale,
- calendar,
}: MonthProps) {
const descriptionIds = useId();
const headlineId = useId();
const headline = useMemo(
- () => getMonthHeadline(yearMonth, locale, calendar),
- [yearMonth, locale, calendar],
+ () => getMonthHeadline(yearMonth, locale),
+ [yearMonth, locale],
);
const weekdays = useMemo(
- () => getWeekdays(firstDayOfWeek, daysInWeek, locale, calendar),
- [firstDayOfWeek, daysInWeek, locale, calendar],
+ () => getWeekdays(firstDayOfWeek, daysInWeek, locale),
+ [firstDayOfWeek, daysInWeek, locale],
);
const weeks = useMemo(
() => getViewOfMonth(yearMonth, firstDayOfWeek, daysInWeek),
diff --git a/packages/circuit-ui/components/Calendar/CalendarService.ts b/packages/circuit-ui/components/Calendar/CalendarService.ts
index 37916a80b5..8b087135d2 100644
--- a/packages/circuit-ui/components/Calendar/CalendarService.ts
+++ b/packages/circuit-ui/components/Calendar/CalendarService.ts
@@ -143,7 +143,6 @@ export function getWeekdays(
firstDayOfWeek: FirstDayOfWeek = 1,
daysInWeek: DaysInWeek = 7,
locale?: Locale,
- calendar?: string,
) {
return Array.from(Array(daysInWeek)).map((_, index) => {
// 1973 started with a Monday
@@ -151,11 +150,11 @@ export function getWeekdays(
return {
narrow: formatDateTime(date, locale, {
weekday: 'narrow',
- calendar,
+ calendar: date.calendarId,
}),
long: formatDateTime(date, locale, {
weekday: 'long',
- calendar,
+ calendar: date.calendarId,
}),
};
}) as Weekdays;
@@ -164,12 +163,17 @@ export function getWeekdays(
export function getMonthHeadline(
yearMonth: Temporal.PlainYearMonth,
locale?: Locale,
- calendar = 'iso8601',
) {
- return formatDateTime(yearMonth, locale, {
+ // Temporal objects use the `iso8601` calendar system by default, which
+ // (incorrectly?) renders the year before the month since Node 22.12
+ // (e.g. "2020 March" instead of "March 2020").
+ // A `PlainYearMonth` has to be converted to a `PlainDate` to be able to
+ // change its calendar system.
+ const date = yearMonth.toPlainDate({ day: 1 }).withCalendar('gregory');
+ return formatDateTime(date, locale, {
year: 'numeric',
month: 'long',
- calendar,
+ calendar: date.calendarId,
});
}