add option for specifying weekday format

src/calendar-base/calendar-base.tsx

@@ -96,6 +96,10 @@ export const props = {
     type: Function,
     value: (date: Date) => false,
   },
+  formatWeekday: {
+    type: String,
+    value: (): "narrow" | "short" => "narrow",
+  },
   firstDayOfWeek: {
     type: Number,
     value: (): DaysOfWeek => 1,

src/calendar-month/CalendarMonthContext.ts

@@ -11,6 +11,7 @@ interface CalendarMonthContextBase {
   focusedDate: PlainDate;
   showOutsideDays?: boolean;
   locale?: string;
+  formatWeekday: "narrow" | "short";
 }
 
 export interface CalendarDateContext extends CalendarMonthContextBase {
@@ -36,11 +37,8 @@ export type CalendarMonthContextValue =
 const t = today();
 
 export const CalendarMonthContext = createContext<CalendarMonthContextValue>({
-  type: "date",
-  firstDayOfWeek: 1,
-  isDateDisallowed: () => false,
   focusedDate: t,
   page: { start: t.toPlainYearMonth(), end: t.toPlainYearMonth() },
-});
+} as CalendarMonthContextValue);
 
 customElements.define("calendar-month-ctx", CalendarMonthContext);

src/calendar-month/calendar-month.test.tsx

@@ -43,6 +43,7 @@ function Fixture({
   focusedDate = today(),
   dir,
   type = "date",
+  formatWeekday = "narrow",
   ...props
 }: Partial<DateTestProps | RangeTestProps | MultiTestProps>): VNodeAny {
   return (
@@ -58,6 +59,7 @@ function Fixture({
           end: focusedDate.toPlainYearMonth(),
         },
         focusedDate,
+        formatWeekday,
         // @ts-expect-error - not sure why this is a problem
         type,
         ...props,
@@ -613,5 +615,37 @@ describe("CalendarMonth", () => {
       const button = getDayButton(month, "15 janvier");
       expect(button).to.exist;
     });
+
+    it("has configurable week day formatting", async () => {
+      const month = await mount(
+        <Fixture
+          focusedDate={PlainDate.from("2020-01-15")}
+          formatWeekday="short"
+        />
+      );
+      const grid = getGrid(month);
+
+      const accessibleHeadings = grid.querySelectorAll(
+        "th span:not([aria-hidden])"
+      );
+      expect(accessibleHeadings[0]).to.have.trimmed.text("Monday");
+      expect(accessibleHeadings[1]).to.have.trimmed.text("Tuesday");
+      expect(accessibleHeadings[2]).to.have.trimmed.text("Wednesday");
+      expect(accessibleHeadings[3]).to.have.trimmed.text("Thursday");
+      expect(accessibleHeadings[4]).to.have.trimmed.text("Friday");
+      expect(accessibleHeadings[5]).to.have.trimmed.text("Saturday");
+      expect(accessibleHeadings[6]).to.have.trimmed.text("Sunday");
+
+      const visualHeadings = grid.querySelectorAll(
+        "th span[aria-hidden='true']"
+      );
+      expect(visualHeadings[0]).to.have.trimmed.text("Mon");
+      expect(visualHeadings[1]).to.have.trimmed.text("Tue");
+      expect(visualHeadings[2]).to.have.trimmed.text("Wed");
+      expect(visualHeadings[3]).to.have.trimmed.text("Thu");
+      expect(visualHeadings[4]).to.have.trimmed.text("Fri");
+      expect(visualHeadings[5]).to.have.trimmed.text("Sat");
+      expect(visualHeadings[6]).to.have.trimmed.text("Sun");
+    });
   });
 });

src/calendar-month/calendar-month.tsx

@@ -32,7 +32,7 @@ export const CalendarMonth = c(
               {calendar.daysLong.map((dayName, i) => (
                 <th part="th" scope="col">
                   <span class="vh">{dayName}</span>
-                  <span aria-hidden="true">{calendar.daysShort[i]}</span>
+                  <span aria-hidden="true">{calendar.daysVisible[i]}</span>
                 </th>
               ))}
             </tr>

src/calendar-month/useCalendarMonth.ts

@@ -18,7 +18,6 @@ const isLTR = (e: Event) => (e.target as HTMLElement).matches(":dir(ltr)");
 
 const dayOptions = { month: "long", day: "numeric" } as const;
 const monthOptions = { month: "long" } as const;
-const shortDayOptions = { weekday: "narrow" } as const;
 const longDayOptions = { weekday: "long" } as const;
 const dispatchOptions = { bubbles: true };
 
@@ -37,11 +36,16 @@ export function useCalendarMonth({ props, context }: UseCalendarMonthOptions) {
     page,
     locale,
     focusedDate,
+    formatWeekday,
   } = context;
 
   const todaysDate = today();
   const daysLong = useDayNames(longDayOptions, firstDayOfWeek, locale);
-  const daysShort = useDayNames(shortDayOptions, firstDayOfWeek, locale);
+  const visibleDayOptions = useMemo(
+    () => ({ weekday: formatWeekday }),
+    [formatWeekday]
+  );
+  const daysVisible = useDayNames(visibleDayOptions, firstDayOfWeek, locale);
   const dayFormatter = useDateFormatter(dayOptions, locale);
   const formatter = useDateFormatter(monthOptions, locale);
 
@@ -173,7 +177,7 @@ export function useCalendarMonth({ props, context }: UseCalendarMonthOptions) {
     weeks,
     yearMonth,
     daysLong,
-    daysShort,
+    daysVisible,
     formatter,
     getDayProps,
   };