@astryxdesign/lab 0.7.9-canary.de1be1f → 0.7.9-canary.e2b522f

package/dist/Chart/formatters.d.ts

@@ -1,10 +1,11 @@
 /**
  * @file formatters.ts
- * @input Tick values and optional BCP 47 locale tags
+ * @input Tick values, optional BCP 47 locale tags, and for dates an optional
+ *   calendar
  * @output Built-in tick format utilities for common data types
  * @position Utility; consumed by ChartAxis via tickFormat prop
  */
-import type { Locale } from '@astryxdesign/core/i18n';
+import type { CalendarSystem, Locale } from '@astryxdesign/core/i18n';
 /**
  * Compact number formatter (e.g. 1200 → "1.2K", 1500000 → "1.5M")
  */
@@ -25,11 +26,13 @@ export declare function currency(symbol?: string, locale?: Locale): (value: unkn
  */
 export declare function percent(value: unknown): string;
 /**
- * Date formatter — short date (e.g. "Jan 5", "Mar 12")
+ * Date formatter — short date (e.g. "Jan 5", "Mar 12"), in `calendar`
+ * (Gregorian by default)
  */
-export declare function shortDate(value: unknown, locale?: Locale): string;
+export declare function shortDate(value: unknown, locale?: Locale, calendar?: CalendarSystem): string;
 /**
- * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025")
+ * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025"), in `calendar`
+ * (Gregorian by default)
  */
-export declare function monthYear(value: unknown, locale?: Locale): string;
+export declare function monthYear(value: unknown, locale?: Locale, calendar?: CalendarSystem): string;
 //# sourceMappingURL=formatters.d.ts.map

package/dist/Chart/formatters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formatters.d.ts","sourceRoot":"","sources":["../../src/Chart/formatters.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAEpD;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAepD;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CACtB,MAAM,SAAM,EACZ,MAAM,GAAE,MAAa,GACpB,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAiB5B;AAQD;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAM9C;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,GAAE,MAAa,GAAG,MAAM,CAUvE;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,GAAE,MAAa,GAAG,MAAM,CAUvE"}
+{"version":3,"file":"formatters.d.ts","sourceRoot":"","sources":["../../src/Chart/formatters.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,cAAc,EAAE,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAGpE;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAepD;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CACtB,MAAM,SAAM,EACZ,MAAM,GAAE,MAAa,GACpB,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAiB5B;AAQD;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAM9C;AAED;;;GAGG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,OAAO,EACd,MAAM,GAAE,MAAa,EACrB,QAAQ,GAAE,cAA0B,GACnC,MAAM,CAUR;AAED;;;GAGG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,OAAO,EACd,MAAM,GAAE,MAAa,EACrB,QAAQ,GAAE,cAA0B,GACnC,MAAM,CAUR"}

package/dist/Chart/formatters.js

@@ -2,11 +2,14 @@
 
 /**
  * @file formatters.ts
- * @input Tick values and optional BCP 47 locale tags
+ * @input Tick values, optional BCP 47 locale tags, and for dates an optional
+ *   calendar
  * @output Built-in tick format utilities for common data types
  * @position Utility; consumed by ChartAxis via tickFormat prop
  */
 
+import { plainDateFormat, plainDateFromDate } from '@astryxdesign/core/utils';
+
 /**
  * Compact number formatter (e.g. 1200 → "1.2K", 1500000 → "1.5M")
  */
@@ -74,31 +77,33 @@ export function percent(value) {
 }
 
 /**
- * Date formatter — short date (e.g. "Jan 5", "Mar 12")
+ * Date formatter — short date (e.g. "Jan 5", "Mar 12"), in `calendar`
+ * (Gregorian by default)
  */
-export function shortDate(value, locale = 'en') {
+export function shortDate(value, locale = 'en', calendar = 'gregory') {
   const d = value instanceof Date ? value : new Date(Number(value));
   if (isNaN(d.getTime())) {
     return String(value);
   }
-  return new Intl.DateTimeFormat(locale, {
+  return plainDateFormat(plainDateFromDate(d), {
     month: 'short',
     day: 'numeric',
-    calendar: 'gregory'
-  }).format(d);
+    calendar
+  }, locale);
 }
 
 /**
- * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025")
+ * Date formatter — month/year (e.g. "Jan 2024", "Mar 2025"), in `calendar`
+ * (Gregorian by default)
  */
-export function monthYear(value, locale = 'en') {
+export function monthYear(value, locale = 'en', calendar = 'gregory') {
   const d = value instanceof Date ? value : new Date(Number(value));
   if (isNaN(d.getTime())) {
     return String(value);
   }
-  return new Intl.DateTimeFormat(locale, {
+  return plainDateFormat(plainDateFromDate(d), {
     month: 'short',
     year: 'numeric',
-    calendar: 'gregory'
-  }).format(d);
+    calendar
+  }, locale);
 }

package/dist/Schedule/DayView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DayView.d.ts","sourceRoot":"","sources":["../../src/Schedule/DayView.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EACV,2BAA2B,EAE3B,YAAY,EAEb,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,sBAAsB,GAAG,2BAA2B,CAAC;AAoCjE,wBAAgB,qBAAqB,CAAC,EACpC,OAAW,EACX,OAAY,EACZ,UAAgB,EAChB,aAAa,GACd,GAAE,sBAA2B,GAAG,YAAY,CAAC,sBAAsB,CAAC,CAgCpE"}
+{"version":3,"file":"DayView.d.ts","sourceRoot":"","sources":["../../src/Schedule/DayView.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EACV,2BAA2B,EAE3B,YAAY,EAEb,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,sBAAsB,GAAG,2BAA2B,CAAC;AAqCjE,wBAAgB,qBAAqB,CAAC,EACpC,OAAW,EACX,OAAY,EACZ,UAAgB,EAChB,aAAa,GACd,GAAE,sBAA2B,GAAG,YAAY,CAAC,sBAAsB,CAAC,CAgCpE"}

package/dist/Schedule/DayView.js

@@ -11,7 +11,7 @@
 import { DATE_FORMAT_WITH_WEEKDAY, plainDateAddDays, plainDateFormat } from '@astryxdesign/core/utils';
 import { enumerateDates, getScheduleRangeFromDates } from "./dateMath.js";
 import { useScheduleContext } from "./context.js";
-import { ScheduleMonthTitle, ScheduleFrame } from "./shared.js";
+import { ScheduleMonthTitle, ScheduleFrame, useScheduleCalendar } from "./shared.js";
 import { TimeGridView } from "./TimeGridView.js";
 import { scheduleRangeToZonedDateTimeRange } from "./zonedDateTime.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -35,11 +35,14 @@ function ScheduleDayView({
   } = options;
   const rangeDate = date.toPlainDate();
   const days = enumerateDates(range.startDate, range.endDate);
-  const titleLabel = plainDateFormat(rangeDate, DATE_FORMAT_WITH_WEEKDAY, locale);
+  const calendar = useScheduleCalendar();
+  const titleLabel = plainDateFormat(rangeDate, {
+    ...DATE_FORMAT_WITH_WEEKDAY,
+    calendar
+  }, locale);
   return /*#__PURE__*/_jsx(ScheduleFrame, {
     title: /*#__PURE__*/_jsx(ScheduleMonthTitle, {
-      date: rangeDate,
-      timezoneID: timezoneID
+      date: rangeDate
     }),
     titleLabel: titleLabel,
     isLoading: isLoading,

package/dist/Schedule/ListView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../src/Schedule/ListView.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAGV,YAAY,EAEb,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AA+ID,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EAAE,QAAY,GACnB,GAAE,uBAA4B,GAAG,YAAY,CAAC,uBAAuB,CAAC,CAmCtE"}
+{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../src/Schedule/ListView.tsx"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAGV,YAAY,EAEb,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAwID,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EAAE,QAAY,GACnB,GAAE,uBAA4B,GAAG,YAAY,CAAC,uBAAuB,CAAC,CAmCtE"}

package/dist/Schedule/ListView.js

@@ -13,7 +13,7 @@ import { plainDateAddDays, plainDateFromInstant, plainDateIsEqual, plainDateToIS
 import { Heading } from '@astryxdesign/core/Text';
 import { enumerateDates, eventOccursOnDate, getScheduleRangeFromDates, isDayEvent } from "./dateMath.js";
 import { useScheduleContext } from "./context.js";
-import { formatDayNumber, formatFullDate, formatWeekday, formatWeekTitle, isEventInPast, ListEventRow, ScheduleFrame, ScheduleRangeMonthTitle, styles } from "./shared.js";
+import { formatDayNumber, formatFullDate, formatWeekday, formatWeekTitle, isEventInPast, ListEventRow, ScheduleFrame, ScheduleRangeMonthTitle, styles, useScheduleCalendar } from "./shared.js";
 import { useCurrentTime } from "./useCurrentTime.js";
 import { scheduleRangeToZonedDateTimeRange } from "./zonedDateTime.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -26,11 +26,12 @@ function ScheduleListView(_props) {
     isLoading,
     headingLevel
   } = useScheduleContext();
+  const calendar = useScheduleCalendar();
   const days = enumerateDates(range.startDate, range.endDate);
   const currentTime = useCurrentTime();
   const currentPlainDate = plainDateFromInstant(currentTime, timezoneID);
   const endDate = plainDateAddDays(range.endDate, -1);
-  const titleLabel = formatWeekTitle(range.startDate, endDate, timezoneID, locale);
+  const titleLabel = formatWeekTitle(range.startDate, endDate, locale, calendar);
   const visibleDays = days.map(day => {
     const isCurrentDay = plainDateIsEqual(day, currentPlainDate);
     const isBaseDay = plainDateIsEqual(day, range.startDate);
@@ -45,8 +46,7 @@ function ScheduleListView(_props) {
   return /*#__PURE__*/_jsx(ScheduleFrame, {
     title: /*#__PURE__*/_jsx(ScheduleRangeMonthTitle, {
       start: range.startDate,
-      end: endDate,
-      timezoneID: timezoneID
+      end: endDate
     }),
     titleLabel: titleLabel,
     isLoading: isLoading,
@@ -61,7 +61,6 @@ function ScheduleListView(_props) {
         children: [/*#__PURE__*/_jsx(ListDayHeading, {
           day: day,
           isCurrentDay: isCurrentDay,
-          timezoneID: timezoneID,
           headingLevel: headingLevel
         }), /*#__PURE__*/_jsx("div", {
           ...stylex.props(styles.listEvents),
@@ -79,26 +78,26 @@ function ScheduleListView(_props) {
 function ListDayHeading({
   day,
   isCurrentDay,
-  timezoneID,
   headingLevel
 }) {
   const {
     locale
   } = useScheduleContext();
+  const calendar = useScheduleCalendar();
   return /*#__PURE__*/_jsxs(Heading, {
     level: headingLevel,
     color: "secondary",
     display: "block",
-    "aria-label": formatFullDate(day, timezoneID, locale),
+    "aria-label": formatFullDate(day, locale, calendar),
     "aria-current": isCurrentDay ? 'date' : undefined,
     xstyle: styles.listDayHeading,
     children: [/*#__PURE__*/_jsx("span", {
       ...stylex.props(styles.listDayNumber, isCurrentDay && styles.listDayNumberCurrent),
       children: /*#__PURE__*/_jsx("span", {
         ...stylex.props(styles.listDayNumberText),
-        children: formatDayNumber(day, timezoneID, locale)
+        children: formatDayNumber(day, locale, calendar)
       })
-    }), formatWeekday(day, timezoneID, 'short', locale)]
+    }), formatWeekday(day, 'short', locale, calendar)]
   });
 }
 function renderListRows({

package/dist/Schedule/MonthlyView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MonthlyView.d.ts","sourceRoot":"","sources":["../../src/Schedule/MonthlyView.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,EAAS,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAmD7C,OAAO,KAAK,EACV,aAAa,EAEb,YAAY,EAEb,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,0BAA0B;IACzC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC;CACrD;AAolBD,wBAAgB,yBAAyB,CAAC,EACxC,YAAgB,EAChB,aAAa,GACd,GAAE,0BAA+B,GAAG,YAAY,CAAC,0BAA0B,CAAC,CAmC5E"}
+{"version":3,"file":"MonthlyView.d.ts","sourceRoot":"","sources":["../../src/Schedule/MonthlyView.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,EAAS,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAqD7C,OAAO,KAAK,EACV,aAAa,EAEb,YAAY,EAEb,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,0BAA0B;IACzC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC;CACrD;AA2lBD,wBAAgB,yBAAyB,CAAC,EACxC,YAAgB,EAChB,aAAa,GACd,GAAE,0BAA+B,GAAG,YAAY,CAAC,0BAA0B,CAAC,CAmC5E"}

package/dist/Schedule/MonthlyView.js

@@ -21,7 +21,7 @@ import { Heading, Text } from '@astryxdesign/core/Text';
 import { enumerateDates, getScheduleRangeFromDates, isDayEvent } from "./dateMath.js";
 import { useScheduleContext } from "./context.js";
 import { getEventDateSpan, layoutMonthEvents, MONTH_VISIBLE_LEVELS } from "./monthLayout.js";
-import { formatDayNumber, formatEventAccessibilityLabel, formatEventTimeRange, formatFullDate, formatMonthTitle, formatWeekday, formatWeekRange, getEventCategory, isEventInPast, ListEventRow, MonthEventPill, ScheduleFrame, ScheduleMonthTitle, SchedulePopoverBody, styles } from "./shared.js";
+import { formatDayNumber, formatEventAccessibilityLabel, formatEventTimeRange, formatFullDate, formatWeekday, formatWeekRange, formatWeekTitle, getEventCategory, isEventInPast, ListEventRow, MonthEventPill, ScheduleFrame, SchedulePopoverBody, ScheduleRangeMonthTitle, styles, useScheduleCalendar } from "./shared.js";
 import { useCurrentTime } from "./useCurrentTime.js";
 import { useScheduleViewPopover } from "./useScheduleViewPopover.js";
 import { scheduleRangeToZonedDateTimeRange } from "./zonedDateTime.js";
@@ -87,6 +87,7 @@ function ScheduleMonthlyView({
     isLoading,
     headingLevel
   } = useScheduleContext();
+  const calendar = useScheduleCalendar();
   const rangeDate = date.toPlainDate();
   const highlightedDate = focusDate.toPlainDate();
   const currentTime = useCurrentTime();
@@ -113,7 +114,11 @@ function ScheduleMonthlyView({
   // day's list named by its full date, or one event's content named by its
   // title.
   const dayByISO = new Map(days.map(day => [plainDateToISO(day), day]));
-  const monthTitle = formatMonthTitle(rangeDate, timezoneID, locale);
+  // The grid shows one Gregorian month, which can span two months of the
+  // calendar, so its title names both.
+  const monthStart = plainDateSetFirstOfMonth(rangeDate);
+  const monthEnd = plainDateAddDays(plainDateAddMonths(monthStart, 1), -1);
+  const monthTitle = formatWeekTitle(monthStart, monthEnd, locale, calendar);
   const tableRef = useRef(null);
   // Where each chip painted so far starts, so focus can land on that cell if
   // the chip goes away while its popover is open.
@@ -131,7 +136,7 @@ function ScheduleMonthlyView({
     }
     if (parsed.kind === 'day') {
       const day = dayByISO.get(parsed.dayISO);
-      return day == null ? monthTitle : formatFullDate(day, timezoneID, locale);
+      return day == null ? monthTitle : formatFullDate(day, locale, calendar);
     }
     return eventByID.get(parsed.eventID)?.title ?? monthTitle;
   },
@@ -163,7 +168,7 @@ function ScheduleMonthlyView({
   if (openDay != null) {
     const openDayISO = plainDateToISO(openDay);
     openContent = /*#__PURE__*/_jsx(SchedulePopoverBody, {
-      label: `${formatFullDate(openDay, timezoneID, locale)} events`,
+      label: `${formatFullDate(openDay, locale, calendar)} events`,
       children: /*#__PURE__*/_jsx(MonthDayEvents, {
         day: openDay,
         events: eventsByDay.get(openDayISO) ?? EMPTY_EVENTS,
@@ -179,9 +184,9 @@ function ScheduleMonthlyView({
     });
   }
   return /*#__PURE__*/_jsxs(ScheduleFrame, {
-    title: /*#__PURE__*/_jsx(ScheduleMonthTitle, {
-      date: rangeDate,
-      timezoneID: timezoneID
+    title: /*#__PURE__*/_jsx(ScheduleRangeMonthTitle, {
+      start: monthStart,
+      end: monthEnd
     }),
     titleLabel: monthTitle,
     isLoading: isLoading,
@@ -202,7 +207,7 @@ function ScheduleMonthlyView({
           children: "Week"
         }), days.slice(0, 7).map((day, index) => /*#__PURE__*/_jsx("div", {
           role: "columnheader",
-          "aria-label": formatWeekday(day, timezoneID, 'long', locale),
+          "aria-label": formatWeekday(day, 'long', locale, calendar),
           "aria-colindex": index + 2,
           ...stylex.props(styles.weekdayLabel),
           children: /*#__PURE__*/_jsx(Heading, {
@@ -210,7 +215,7 @@ function ScheduleMonthlyView({
             color: "secondary",
             display: "block",
             xstyle: styles.weekdayHeading,
-            children: formatWeekday(day, timezoneID, 'short', locale)
+            children: formatWeekday(day, 'short', locale, calendar)
           })
         }, plainDateToISO(day)))]
       }), /*#__PURE__*/_jsx("div", {
@@ -224,7 +229,7 @@ function ScheduleMonthlyView({
               role: "rowheader",
               "aria-colindex": 1,
               ...stylex.props(styles.visuallyHidden),
-              children: formatWeekRange(week[0], week[week.length - 1], timezoneID, locale)
+              children: formatWeekRange(week[0], week[week.length - 1], timezoneID, locale, calendar)
             }), week.map((day, dayIndex) => {
               const index = weekIndex * 7 + dayIndex;
               const isOutsideMonth = day.month !== rangeDate.month;
@@ -233,7 +238,7 @@ function ScheduleMonthlyView({
               const hiddenCount = overflowByDay.get(index);
               return /*#__PURE__*/_jsxs("div", {
                 role: "cell",
-                "aria-label": formatFullDate(day, timezoneID, locale),
+                "aria-label": formatFullDate(day, locale, calendar),
                 "aria-colindex": dayIndex + 2
                 // Focus lands here when the day's "+N more" goes away.
                 ,
@@ -248,7 +253,7 @@ function ScheduleMonthlyView({
                     color: "inherit",
                     weight: "medium",
                     hasTabularNumbers: true,
-                    children: formatDayNumber(day, timezoneID, locale)
+                    children: formatDayNumber(day, locale, calendar)
                   })
                 }), (chipsByDay.get(index) ?? EMPTY_CHIPS).map(chip => {
                   const key = chipKey(chip);
@@ -256,7 +261,7 @@ function ScheduleMonthlyView({
                     const startDay = days[chip.week * 7 + chip.columnStart];
                     return hasPopover && startDay != null ? /*#__PURE__*/_jsx("span", {
                       ...stylex.props(styles.visuallyHidden),
-                      children: formatMonthEventName(chip.event, `since ${formatFullDate(startDay, timezoneID, locale)}`, timezoneID, categories, locale)
+                      children: formatMonthEventName(chip.event, `since ${formatFullDate(startDay, locale, calendar)}`, timezoneID, categories, locale)
                     }, key) : null;
                   }
                   chipStartDay.set(key, dayISO);
@@ -275,7 +280,7 @@ function ScheduleMonthlyView({
                   }, event.id))
                 }), hiddenCount != null && /*#__PURE__*/_jsx("button", {
                   type: "button",
-                  "aria-label": `${hiddenCount} more ${hiddenCount === 1 ? 'event' : 'events'}, ${formatFullDate(day, timezoneID, locale)}`,
+                  "aria-label": `${hiddenCount} more ${hiddenCount === 1 ? 'event' : 'events'}, ${formatFullDate(day, locale, calendar)}`,
                   ...monthPopover.getTriggerProps(dayKey(dayISO),
                   // An event handed over from this day's list
                   // keeps "+N more" as its trigger while the
@@ -321,6 +326,7 @@ function MonthChip({
     timezoneID,
     locale
   } = useScheduleContext();
+  const calendar = useScheduleCalendar();
   const placement = [styles.monthChip(chip.columnEnd - chip.columnStart + 1, chip.level), isLastColumn && styles.monthChipInLastColumn];
   const pill = /*#__PURE__*/_jsx(MonthEventPill, {
     event: chip.event,
@@ -335,7 +341,7 @@ function MonthChip({
       children: pill
     });
   }
-  const name = formatMonthEventName(chip.event, formatEventDays(chip.event, timezoneID, locale), timezoneID, categories, locale);
+  const name = formatMonthEventName(chip.event, formatEventDays(chip.event, timezoneID, locale, calendar), timezoneID, categories, locale);
   if (renderPopover(chip.event) == null) {
     return /*#__PURE__*/_jsxs("div", {
       "data-schedule-month-chip": "",
@@ -375,8 +381,9 @@ function MonthDayEvents({
     timezoneID,
     locale
   } = useScheduleContext();
+  const calendar = useScheduleCalendar();
   const currentTime = useCurrentTime();
-  const fullDate = formatFullDate(day, timezoneID, locale);
+  const fullDate = formatFullDate(day, locale, calendar);
   return /*#__PURE__*/_jsxs("div", {
     ...stylex.props(styles.monthDayEvents),
     children: [/*#__PURE__*/_jsx(Text, {
@@ -416,9 +423,9 @@ function formatMonthEventName(event, dayLabel, timezoneID, categories, locale) {
 }
 
 /** The event's day, or its date range when it covers several days. */
-function formatEventDays(event, timezoneID, locale) {
+function formatEventDays(event, timezoneID, locale, calendar) {
   const [first, last] = getEventDateSpan(event, timezoneID);
-  return plainDateIsEqual(first, last) ? formatFullDate(first, timezoneID, locale) : formatWeekRange(first, last, timezoneID, locale);
+  return plainDateIsEqual(first, last) ? formatFullDate(first, locale, calendar) : formatWeekRange(first, last, timezoneID, locale, calendar);
 }
 function getWeeks(days) {
   const weeks = [];

package/dist/Schedule/TimeGridView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeGridView.d.ts","sourceRoot":"","sources":["../../src/Schedule/TimeGridView.tsx"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH,OAAO,EASL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAMf,OAAO,EASL,KAAK,SAAS,EACf,MAAM,0BAA0B,CAAC;AAmClC,OAAO,KAAK,EACV,aAAa,EAGd,MAAM,SAAS,CAAC;AAEjB,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,MAAM,EACN,SAAS,EACT,UAAU,EACV,OAAO,EACP,OAAO,EACP,UAAU,EACV,KAAK,EACL,aAAa,GACd,EAAE;IACD,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,MAAM,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IACrC,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC;CACrD,+BA2kBA"}
+{"version":3,"file":"TimeGridView.d.ts","sourceRoot":"","sources":["../../src/Schedule/TimeGridView.tsx"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH,OAAO,EASL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAOf,OAAO,EASL,KAAK,SAAS,EACf,MAAM,0BAA0B,CAAC;AAoClC,OAAO,KAAK,EACV,aAAa,EAGd,MAAM,SAAS,CAAC;AAEjB,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,MAAM,EACN,SAAS,EACT,UAAU,EACV,OAAO,EACP,OAAO,EACP,UAAU,EACV,KAAK,EACL,aAAa,GACd,EAAE;IACD,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,MAAM,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IACrC,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC;CACrD,+BAglBA"}

package/dist/Schedule/TimeGridView.js

@@ -20,7 +20,7 @@ import { Heading, Text } from '@astryxdesign/core/Text';
 import { useScheduleContext } from "./context.js";
 import { eventOccursOnDate, isAllDaySpan, isDayEvent } from "./dateMath.js";
 import { timeGridViewportScope } from "./schedule.stylex.js";
-import { clamp, EventPill, eventPastSurfaceColorStyle, eventSurfaceColorStyle, formatDayNumber, formatEventDateTimeRange, formatEventTime, formatEventTimeRange, formatFullDate, formatHour, formatTimezoneAbbreviation, formatWeekday, getEventCategory, getMinutesSinceStartOfDay, isEventInPast, SchedulePopoverBody, ScheduleTime, styles, TitleFirstPill } from "./shared.js";
+import { clamp, EventPill, eventPastSurfaceColorStyle, eventSurfaceColorStyle, formatDayNumber, formatEventDateTimeRange, formatEventTime, formatEventTimeRange, formatFullDate, formatHour, formatTimezoneAbbreviation, formatWeekday, getEventCategory, getMinutesSinceStartOfDay, isEventInPast, SchedulePopoverBody, ScheduleTime, styles, TitleFirstPill, useScheduleCalendar } from "./shared.js";
 import { layoutTimedEvents } from "./timeGridLayout.js";
 import { getInitialTimeGridOffset, isSameRangeKey, TimeGridScrollMemoryContext } from "./timeGridScrollMemory.js";
 import { useCurrentTime } from "./useCurrentTime.js";
@@ -42,6 +42,7 @@ export function TimeGridView({
     locale,
     range
   } = useScheduleContext();
+  const calendar = useScheduleCalendar();
   const hasPopover = renderPopover != null;
   const normalizedMinHour = Math.max(0, Math.min(23, Math.floor(minHour)));
   const normalizedMaxHour = Math.max(normalizedMinHour + 1, Math.min(24, Math.floor(maxHour)));
@@ -238,6 +239,7 @@ export function TimeGridView({
       focusDate: focusDate,
       hours: hours,
       locale: locale,
+      calendar: calendar,
       timezoneID: timezoneID,
       timezoneLabel: timezoneLabel
     }), /*#__PURE__*/_jsxs("div", {
@@ -259,9 +261,9 @@ export function TimeGridView({
               xstyle: styles.timeGridHeaderHeading,
               children: /*#__PURE__*/_jsxs("span", {
                 ...stylex.props(styles.timeGridHeaderHeadingContent),
-                children: [formatWeekday(day, timezoneID, 'short', locale), /*#__PURE__*/_jsx("span", {
+                children: [formatWeekday(day, 'short', locale, calendar), /*#__PURE__*/_jsx("span", {
                   ...stylex.props(styles.timeGridDayNumber, plainDateIsEqual(day, focusDate) && styles.timeGridCurrentDayPill),
-                  children: formatDayNumber(day, timezoneID, locale)
+                  children: formatDayNumber(day, locale, calendar)
                 })]
               })
             })
@@ -311,7 +313,7 @@ export function TimeGridView({
               }
               if (content == null) {
                 return /*#__PURE__*/_jsx("div", {
-                  "aria-label": formatEventButtonLabel(segment.event, day, timezoneID, categories, locale),
+                  "aria-label": formatEventButtonLabel(segment.event, day, timezoneID, categories, locale, calendar),
                   ...stylex.props(placement),
                   children: pill
                 }, key);
@@ -324,7 +326,7 @@ export function TimeGridView({
               }
               return /*#__PURE__*/_jsx("button", {
                 type: "button",
-                "aria-label": formatEventButtonLabel(segment.event, day, timezoneID, categories, locale),
+                "aria-label": formatEventButtonLabel(segment.event, day, timezoneID, categories, locale, calendar),
                 "aria-haspopup": "dialog",
                 "aria-expanded": isOpen,
                 "aria-controls": popover.id,
@@ -354,7 +356,7 @@ export function TimeGridView({
             return /*#__PURE__*/_jsxs("div", {
               ...(hasPopover ? {
                 role: 'group',
-                'aria-label': formatFullDate(day, timezoneID, locale)
+                'aria-label': formatFullDate(day, locale, calendar)
               } : {
                 'aria-hidden': true
               }),
@@ -402,7 +404,7 @@ export function TimeGridView({
                   }, event.id);
                 }
                 const popoverContent = renderPopover(event);
-                const buttonLabel = formatEventButtonLabel(event, day, timezoneID, categories, locale);
+                const buttonLabel = formatEventButtonLabel(event, day, timezoneID, categories, locale, calendar);
                 if (popoverContent == null) {
                   return /*#__PURE__*/_jsx("div", {
                     "aria-label": buttonLabel,
@@ -458,6 +460,7 @@ function TimeGridAccessibilityGrid({
   focusDate,
   hours,
   locale,
+  calendar,
   timezoneID,
   timezoneLabel
 }) {
@@ -476,7 +479,7 @@ function TimeGridAccessibilityGrid({
         role: "columnheader",
         "aria-colindex": index + 2,
         "aria-current": plainDateIsEqual(day, focusDate) ? 'date' : undefined,
-        children: formatFullDate(day, timezoneID, locale)
+        children: formatFullDate(day, locale, calendar)
       }, plainDateToISO(day)))]
     }), /*#__PURE__*/_jsxs("div", {
       role: "row",
@@ -493,8 +496,9 @@ function TimeGridAccessibilityGrid({
             categories,
             day,
             events: cellEvents,
-            label: `${formatFullDate(day, timezoneID, locale)} all day`,
+            label: `${formatFullDate(day, locale, calendar)} all day`,
             locale,
+            calendar,
             timezoneID
           })
         }, plainDateToISO(day));
@@ -514,8 +518,9 @@ function TimeGridAccessibilityGrid({
             categories,
             day,
             events: cellEvents,
-            label: `${formatFullDate(day, timezoneID, locale)} ${formatHour(hour, locale)}`,
+            label: `${formatFullDate(day, locale, calendar)} ${formatHour(hour, locale)}`,
             locale,
+            calendar,
             timezoneID
           })
         }, plainDateToISO(day));
@@ -529,12 +534,13 @@ function formatTimeGridAccessibilityCellLabel({
   events,
   label,
   locale,
+  calendar,
   timezoneID
 }) {
   if (events.length === 0) {
     return label;
   }
-  const eventLabels = events.map(event => `${event.title}, ${getEventCategory(event, categories).label}, ${formatTimeGridEventTime(event, day, timezoneID, locale)}`);
+  const eventLabels = events.map(event => `${event.title}, ${getEventCategory(event, categories).label}, ${formatTimeGridEventTime(event, day, timezoneID, locale, calendar)}`);
   return `${label}. ${eventLabels.join('. ')}`;
 }
 
@@ -548,10 +554,10 @@ function blockKeyOf(eventID, dayISO) {
  * in its name. The visible text — title, then time — leads the name, then the
  * category and the full date.
  */
-function formatEventButtonLabel(event, day, timezoneID, categories, locale) {
+function formatEventButtonLabel(event, day, timezoneID, categories, locale, calendar) {
   const category = getEventCategory(event, categories);
-  const timeLabel = formatTimeGridEventTime(event, day, timezoneID, locale);
-  return `${event.title}, ${timeLabel}, ${category.label}, ${formatFullDate(day, timezoneID, locale)}`;
+  const timeLabel = formatTimeGridEventTime(event, day, timezoneID, locale, calendar);
+  return `${event.title}, ${timeLabel}, ${category.label}, ${formatFullDate(day, locale, calendar)}`;
 }
 
 /**
@@ -559,11 +565,11 @@ function formatEventButtonLabel(event, day, timezoneID, categories, locale) {
  * timed span of a day or more, which no single day frames; otherwise the
  * start and end times (component:Schedule AR2).
  */
-function formatTimeGridEventTime(event, day, timezoneID, locale) {
+function formatTimeGridEventTime(event, day, timezoneID, locale, calendar) {
   if (isDayEvent(event)) {
     return 'all day';
   }
-  return isAllDaySpan(event) ? formatEventDateTimeRange(event, timezoneID, locale) : formatEventTime(event, day, timezoneID, locale);
+  return isAllDaySpan(event) ? formatEventDateTimeRange(event, timezoneID, locale, calendar) : formatEventTime(event, day, timezoneID, locale);
 }
 function eventOverlapsHour(event, day, hour, timezoneID) {
   if (!eventOccursOnDate(event, day, timezoneID)) {

package/dist/Schedule/WeeklyView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WeeklyView.d.ts","sourceRoot":"","sources":["../../src/Schedule/WeeklyView.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAEV,2BAA2B,EAC3B,YAAY,EAEb,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,yBAA0B,SAAQ,2BAA2B;IAC5E,yDAAyD;IACzD,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC1C;AA2CD,wBAAgB,wBAAwB,CAAC,EACvC,YAAgB,EAChB,OAAW,EACX,OAAY,EACZ,UAAgB,EAChB,aAAa,GACd,GAAE,yBAA8B,GAAG,YAAY,CAAC,yBAAyB,CAAC,CAmC1E"}
+{"version":3,"file":"WeeklyView.d.ts","sourceRoot":"","sources":["../../src/Schedule/WeeklyView.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAEV,2BAA2B,EAC3B,YAAY,EAEb,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,yBAA0B,SAAQ,2BAA2B;IAC5E,yDAAyD;IACzD,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC1C;AAwCD,wBAAgB,wBAAwB,CAAC,EACvC,YAAgB,EAChB,OAAW,EACX,OAAY,EACZ,UAAgB,EAChB,aAAa,GACd,GAAE,yBAA8B,GAAG,YAAY,CAAC,yBAAyB,CAAC,CAmC1E"}

package/dist/Schedule/WeeklyView.js

@@ -11,7 +11,7 @@
 import { plainDateAddDays, plainDateSetStartOfWeek } from '@astryxdesign/core/utils';
 import { enumerateDates, getScheduleRangeFromDates } from "./dateMath.js";
 import { useScheduleContext } from "./context.js";
-import { formatWeekTitle, ScheduleFrame, ScheduleRangeMonthTitle } from "./shared.js";
+import { formatWeekTitle, ScheduleFrame, ScheduleRangeMonthTitle, useScheduleCalendar } from "./shared.js";
 import { TimeGridView } from "./TimeGridView.js";
 import { scheduleRangeToZonedDateTimeRange } from "./zonedDateTime.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -26,6 +26,7 @@ function ScheduleWeeklyView({
     range,
     isLoading
   } = useScheduleContext();
+  const calendar = useScheduleCalendar();
   const {
     minHour = 0,
     maxHour = 24,
@@ -34,12 +35,11 @@ function ScheduleWeeklyView({
   } = options;
   const days = enumerateDates(range.startDate, range.endDate);
   const highlightedDate = focusDate.toPlainDate();
-  const titleLabel = formatWeekTitle(days[0], days[days.length - 1], timezoneID, locale);
+  const titleLabel = formatWeekTitle(days[0], days[days.length - 1], locale, calendar);
   return /*#__PURE__*/_jsx(ScheduleFrame, {
     title: /*#__PURE__*/_jsx(ScheduleRangeMonthTitle, {
       start: days[0],
-      end: days[days.length - 1],
-      timezoneID: timezoneID
+      end: days[days.length - 1]
     }),
     titleLabel: titleLabel,
     isLoading: isLoading,

package/dist/Schedule/shared.d.ts

@@ -1,12 +1,14 @@
 /**
  * @file shared.tsx
- * @input Schedule events, dates, timezone IDs, provider locale, and display metadata
+ * @input Schedule events, dates, timezone IDs, provider locale and calendar,
+ *   and display metadata
  * @output Shared rendering primitives, formatters, and styles for schedule views
  * @position Internal view utility module; consumed by Monthly, Weekly, Day, and List views
  */
 import { type ReactNode } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { type Locale } from '@astryxdesign/core/i18n';
+import { type CalendarSystem } from '@astryxdesign/core/internal/calendar-system';
 import { type PlainDate } from '@astryxdesign/core/utils';
 import type { CalendarEvent, CalendarInstantEvent, Instant, ScheduleCategory, ScheduleEventColor } from './types.js';
 export declare function ScheduleFrame({ title, titleLabel, isLoading, children, }: {
@@ -15,14 +17,18 @@ export declare function ScheduleFrame({ title, titleLabel, isLoading, children,
     isLoading: boolean;
     children: ReactNode;
 }): import("react").JSX.Element;
-export declare function ScheduleMonthTitle({ date, timezoneID, }: {
+/**
+ * The calendar that Schedule writes its date labels in: the provider's
+ * resolved calendar, as Core's date components resolve it. The views still lay
+ * out and step Gregorian days, weeks, and months.
+ */
+export declare function useScheduleCalendar(): CalendarSystem;
+export declare function ScheduleMonthTitle({ date }: {
     date: PlainDate;
-    timezoneID: string;
 }): import("react").JSX.Element;
-export declare function ScheduleRangeMonthTitle({ start, end, timezoneID, }: {
+export declare function ScheduleRangeMonthTitle({ start, end, }: {
     start: PlainDate;
     end: PlainDate;
-    timezoneID: string;
 }): import("react").JSX.Element;
 /**
  * A painted time or time range, isolated in the locale's direction: it lays
@@ -175,14 +181,14 @@ export declare function eventPastSurfaceColorStyle(color: ScheduleEventColor | u
     readonly borderColor: stylex.StyleXClassNameFor<"borderColor", `color-mix(in srgb, ${stylex.StyleXVar<"light-dark(#0064E0, #2694FE)">} 48%, ${stylex.StyleXVar<"light-dark(#05365919, #F2F4F619)">})`>;
     readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", `color-mix(in srgb, ${stylex.StyleXVar<"light-dark(#0064E0, #2694FE)">} 10%, ${stylex.StyleXVar<"light-dark(#FFFFFF, #1F1F22)">})`>;
 }>;
-export declare function formatWithPlainDate(date: PlainDate, timezoneID: string, options: Intl.DateTimeFormatOptions, locale: Locale): string;
-export declare function formatMonthTitle(date: PlainDate, timezoneID: string, locale: Locale): string;
-export declare function formatWeekTitle(start: PlainDate, end: PlainDate, timezoneID: string, locale: Locale): string;
-export declare function formatFullDate(date: PlainDate, timezoneID: string, locale: Locale): string;
+export declare function formatWithPlainDate(date: PlainDate, options: Intl.DateTimeFormatOptions, locale: Locale, calendar: CalendarSystem): string;
+export declare function formatMonthTitle(date: PlainDate, locale: Locale, calendar: CalendarSystem): string;
+export declare function formatWeekTitle(start: PlainDate, end: PlainDate, locale: Locale, calendar: CalendarSystem): string;
+export declare function formatFullDate(date: PlainDate, locale: Locale, calendar: CalendarSystem): string;
 /** A week row's dates, such as "May 10 – 16, 2026", for its row header. */
-export declare function formatWeekRange(start: PlainDate, end: PlainDate, timezoneID: string, locale: Locale): string;
-export declare function formatWeekday(date: PlainDate, timezoneID: string, weekday: 'short' | 'long', locale: Locale): string;
-export declare function formatDayNumber(date: PlainDate, timezoneID: string, locale: Locale): string;
+export declare function formatWeekRange(start: PlainDate, end: PlainDate, timezoneID: string, locale: Locale, calendar: CalendarSystem): string;
+export declare function formatWeekday(date: PlainDate, weekday: 'short' | 'long', locale: Locale, calendar: CalendarSystem): string;
+export declare function formatDayNumber(date: PlainDate, locale: Locale, calendar: CalendarSystem): string;
 export declare function formatHour(hour: number, locale: Locale): string;
 export declare function formatTimezoneAbbreviation(date: PlainDate, timezoneID: string, locale: Locale): string;
 export declare function formatEventTime(event: CalendarInstantEvent, day: PlainDate, timezoneID: string, locale: Locale): string;
@@ -192,7 +198,7 @@ export declare function formatEventTimeRange(event: CalendarInstantEvent, timezo
  * 13 at 9:00 AM" in en-US, for a timed span of a day or more
  * (component:Schedule AR2).
  */
-export declare function formatEventDateTimeRange(event: CalendarInstantEvent, timezoneID: string, locale: Locale): string;
+export declare function formatEventDateTimeRange(event: CalendarInstantEvent, timezoneID: string, locale: Locale, calendar: CalendarSystem): string;
 export declare function formatEventStartTime(event: CalendarInstantEvent, timezoneID: string, locale: Locale): string;
 export declare function formatEventAccessibilityLabel(event: CalendarEvent, day: PlainDate, timezoneID: string, categories: ReadonlyArray<ScheduleCategory>, locale: Locale): string;
 export declare function getMinutesSinceStartOfDay(instant: number, timezoneID: string): number;