week numbers

docs/src/components/BrandedCalendar.astro

@@ -1,14 +1,23 @@
 ---
-interface Props {
+import { type CalendarDateProps } from "../../../src/index.js";
+
+type ExcludeByValue<T, V> = {
+  [K in keyof T as NonNullable<T[K]> extends V ? never : K]: T[K];
+};
+
+interface Props extends ExcludeByValue<CalendarDateProps, Function> {
   class?: string;
-  value?: string;
 }
 
-const { class: className, value } = Astro.props;
+const { class: className, value, showWeekNumbers } = Astro.props;
 ---
 
 <div class:list={["card", className]}>
-  <calendar-range months="2" value={value}>
+  <calendar-range
+    months="2"
+    value={value}
+    show-week-numbers={showWeekNumbers ? "" : undefined}
+  >
     <svg
       aria-label="Previous"
       slot="previous"
@@ -52,7 +61,7 @@ const { class: className, value } = Astro.props;
 
     .grid {
       display: flex;
-      gap: 1em;
+      gap: var(--space-m);
       justify-content: center;
       flex-wrap: wrap;
     }
@@ -127,6 +136,17 @@ const { class: className, value } = Astro.props;
       &::part(range-start range-end) {
         border-radius: var(--radius);
       }
+
+      &::part(weeknumber) {
+        font-weight: normal;
+        opacity: 0.5;
+        padding-right: var(--space-xs);
+        text-align: end;
+      }
+
+      &::part(col-weeknumber) {
+        border-right: 1px solid #0003;
+      }
     }
   }
 </style>

docs/src/pages/components/calendar-date.astro

@@ -91,6 +91,13 @@ import Link from "../../components/Link.astro";
       <td><code>boolean</code></td>
       <td><code>false</code></td>
     </tr>
+    <tr>
+      <td><code>showWeekNumbers</code></td>
+      <td>show-week-numbers</td>
+      <td>Whether to show week numbers</td>
+      <td><code>boolean</code></td>
+      <td><code>false</code></td>
+    </tr>
     <tr>
       <td><code>locale</code></td>
       <td><code>locale</code></td>

docs/src/pages/components/calendar-month.astro

@@ -118,6 +118,46 @@ import Link from "../../components/Link.astro";
       <td><code>td</code></td>
       <td>The table's body cells</td>
     </tr>
+    <tr>
+      <td><code>col-weeknumber</code></td>
+      <td>The <code>&lt;col&gt;</code> for the week number</td>
+    </tr>
+    <tr>
+      <td><code>col-1</code></td>
+      <td>The <code>&lt;col&gt;</code> for the first day of the week</td>
+    </tr>
+    <tr>
+      <td><code>col-2</code></td>
+      <td>The <code>&lt;col&gt;</code> for the second day of the week </td>
+    </tr>
+    <tr>
+      <td><code>col-3</code></td>
+      <td>The <code>&lt;col&gt;</code> for the third day of the week</td>
+    </tr>
+    <tr>
+      <td><code>col-4</code></td>
+      <td>The <code>&lt;col&gt;</code> for the fourth day of the week</td>
+    </tr>
+    <tr>
+      <td><code>col-5</code></td>
+      <td>The <code>&lt;col&gt;</code> for the fifth day of the week</td>
+    </tr>
+    <tr>
+      <td><code>col-6</code></td>
+      <td>The <code>&lt;col&gt;</code> for the sixth day of the week</td>
+    </tr>
+    <tr>
+      <td><code>col-7</code></td>
+      <td>The <code>&lt;col&gt;</code> for the seventh day of the week</td>
+    </tr>
+    <tr>
+      <td><code>weekday</code></td>
+      <td>The <code>th</code> for the day of the week</td>
+    </tr>
+    <tr>
+      <td><code>weeknumber</code></td>
+      <td>The <code>td</code> for the week number</td>
+    </tr>
     <tr>
       <td><code>button</code></td>
       <td>Any button used in the component</td>
@@ -160,4 +200,20 @@ import Link from "../../components/Link.astro";
       </td>
     </tr>
   </Table>
+
+  <Heading level={2}>Slots</Heading>
+
+  <Table>
+    <tr slot="head">
+      <th>Name</th>
+      <th>Description</th>
+    </tr>
+    <tr>
+      <td>weeknumber</td>
+      <td>
+        If week numbers are shown, this slot holds the heading for the column.
+        Defaults to "#"
+      </td>
+    </tr>
+  </Table>
 </ApiLayout>

docs/src/pages/components/calendar-multi.astro

@@ -91,6 +91,13 @@ import Link from "../../components/Link.astro";
       <td><code>boolean</code></td>
       <td><code>false</code></td>
     </tr>
+    <tr>
+      <td><code>showWeekNumbers</code></td>
+      <td>show-week-numbers</td>
+      <td>Whether to show week numbers</td>
+      <td><code>boolean</code></td>
+      <td><code>false</code></td>
+    </tr>
     <tr>
       <td><code>locale</code></td>
       <td><code>locale</code></td>

docs/src/pages/components/calendar-range.astro

@@ -105,6 +105,13 @@ import Link from "../../components/Link.astro";
       <td><code>boolean</code></td>
       <td><code>false</code></td>
     </tr>
+    <tr>
+      <td><code>showWeekNumbers</code></td>
+      <td>show-week-numbers</td>
+      <td>Whether to show week numbers</td>
+      <td><code>boolean</code></td>
+      <td><code>false</code></td>
+    </tr>
     <tr>
       <td><code>locale</code></td>
       <td><code>locale</code></td>

docs/tsconfig.json

@@ -1,3 +1,3 @@
 {
-  "extends": "astro/tsconfigs/strict"
-}
+  "extends": ["../tsconfig.json", "astro/tsconfigs/strict"]
+}

index.html

@@ -47,6 +47,7 @@ <h2>range</h2>
       min="2024-02-10"
       max="2025-10-10"
       value="2024-02-12/2025-02-20"
+      show-week-numbers
     >
       <div class="grid">
         <calendar-month></calendar-month>

src/calendar-base/calendar-base.tsx

@@ -120,6 +120,10 @@ export const props = {
     type: String,
     value: (): Pagination => "months",
   },
+  showWeekNumbers: {
+    type: Boolean,
+    value: false,
+  },
 };
 
 export const styles = [

src/calendar-base/useCalendarBase.ts

@@ -1,11 +1,4 @@
-import {
-  useState,
-  useEvent,
-  useHost,
-  useEffect,
-  useMemo,
-  useRef,
-} from "atomico";
+import { useState, useEvent, useHost, useEffect, useMemo } from "atomico";
 import { PlainDate, PlainYearMonth } from "../utils/temporal.js";
 import { useDateProp, useDateFormatter } from "../utils/hooks.js";
 import { clamp, toDate, today } from "../utils/date.js";

src/calendar-date/calendar-date.test.tsx

@@ -1,6 +1,6 @@
 import { expect, nextFrame } from "@open-wc/testing";
 import { sendKeys } from "@web/test-runner-commands";
-import type { VNodeAny } from "atomico/types/vnode.js";
+import type { VNodeAny } from "atomico/types/vnode";
 import {
   click,
   clickDay,

src/calendar-month/CalendarMonthContext.ts

@@ -10,6 +10,7 @@ interface CalendarMonthContextBase {
   page: { start: PlainYearMonth; end: PlainYearMonth };
   focusedDate: PlainDate;
   showOutsideDays?: boolean;
+  showWeekNumbers?: boolean;
   locale?: string;
 }
 

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

@@ -1,6 +1,6 @@
 import { expect, nextFrame } from "@open-wc/testing";
 import { sendKeys } from "@web/test-runner-commands";
-import type { VNodeAny } from "atomico/types/vnode.js";
+import type { VNodeAny } from "atomico/types/vnode";
 import {
   clickDay,
   createSpy,
@@ -11,6 +11,7 @@ import {
   getSelectedDays,
   click,
   sendShiftPress,
+  type MonthInstance,
 } from "../utils/test.js";
 import {
   CalendarMonthContext,
@@ -37,6 +38,11 @@ interface MultiTestProps extends TestPropsBase, CalendarMultiContext {}
 
 const isWeekend = (date: Date) => date.getDay() === 0 || date.getDay() === 6;
 
+function getWeekNumbers(month: MonthInstance) {
+  const grid = getGrid(month);
+  return grid.querySelectorAll("tbody tr th");
+}
+
 function Fixture({
   onselectday,
   onfocusday,
@@ -614,4 +620,27 @@ describe("CalendarMonth", () => {
       expect(button).to.exist;
     });
   });
+
+  describe("week numbers", () => {
+    it("supports week numbering", async () => {
+      const month = await mount(
+        <Fixture focusedDate={PlainDate.from("2020-04-01")} showWeekNumbers />
+      );
+
+      const weekNumbers = getWeekNumbers(month);
+
+      // 5 weeks in this month
+      expect(weekNumbers).to.have.length(5);
+
+      // from: https://weeknumber.co.uk/?q=2020-04-01
+      let current = 14;
+      for (const weekNumber of weekNumbers) {
+        expect(weekNumber.part.contains("th")).to.eq(true);
+        expect(weekNumber.part.contains("weeknumber")).to.eq(true);
+        expect(weekNumber).to.have.attribute("scope", "row");
+        expect(weekNumber).to.have.trimmed.text(current.toString());
+        current++;
+      }
+    });
+  });
 });

src/calendar-month/calendar-month.tsx

@@ -2,7 +2,7 @@ import { c, css, useContext, useRef, type Host } from "atomico";
 import { reset, vh } from "../utils/styles.js";
 import { useCalendarMonth } from "./useCalendarMonth.js";
 import { CalendarMonthContext } from "./CalendarMonthContext.js";
-import { toDate } from "../utils/date.js";
+import { getWeekNumber, toDate } from "../utils/date.js";
 
 export const CalendarMonth = c(
   (
@@ -27,10 +27,27 @@ export const CalendarMonth = c(
         </div>
 
         <table ref={table} aria-labelledby="h" part="table">
+          <colgroup>
+            {context.showWeekNumbers && <col part="col-weeknumber" />}
+            <col part="col-1" />
+            <col part="col-2" />
+            <col part="col-3" />
+            <col part="col-4" />
+            <col part="col-5" />
+            <col part="col-6" />
+            <col part="col-7" />
+          </colgroup>
           <thead>
             <tr part="tr head">
+              {context.showWeekNumbers && (
+                <th part="th weeknumber">
+                  <slot name="weeknumber" id="week-header">
+                    <span aria-label="Week">#</span>
+                  </slot>
+                </th>
+              )}
               {calendar.daysLong.map((dayName, i) => (
-                <th part="th" scope="col">
+                <th part="th weekday" scope="col">
                   <span class="vh">{dayName}</span>
                   <span aria-hidden="true">{calendar.daysShort[i]}</span>
                 </th>
@@ -41,12 +58,33 @@ export const CalendarMonth = c(
           <tbody>
             {calendar.weeks.map((week, i) => (
               <tr key={i} part="tr week">
+                {context.showWeekNumbers && (
+                  <th
+                    class="num"
+                    part="th weeknumber"
+                    scope="row"
+                    aria-labelledby={`week-header week-${i}`}
+                  >
+                    {/* TODO:
+                      so close! gets announced correctly "Week n" when moving between rows.
+                      But for some reason the column itself gets announced as "Blank" in VO
+                    */}
+                    <span aria-hidden="true" id={`week-${i}`}>
+                      {getWeekNumber(week[0])}
+                    </span>
+                  </th>
+                )}
+
                 {week.map((date, j) => {
                   const props = calendar.getDayProps(date);
 
                   return (
                     <td part="td" key={j}>
-                      {props && <button {...props}>{date.day}</button>}
+                      {props && (
+                        <button class="num" {...props}>
+                          {date.day}
+                        </button>
+                      )}
                     </td>
                   );
                 })}
@@ -87,20 +125,23 @@ export const CalendarMonth = c(
         }
 
         th {
-          font-weight: bold;
+          inline-size: 2.25rem;
           block-size: 2.25rem;
         }
 
         td {
           padding-inline: 0;
         }
 
+        .num {
+          font-variant-numeric: tabular-nums;
+        }
+
         button {
           color: inherit;
           font-size: inherit;
           background: transparent;
           border: 0;
-          font-variant-numeric: tabular-nums;
           block-size: 2.25rem;
           inline-size: 2.25rem;
         }

src/calendar-multi/calendar-multi.test.tsx

@@ -1,6 +1,6 @@
 import { expect } from "@open-wc/testing";
 import { sendKeys } from "@web/test-runner-commands";
-import type { VNodeAny } from "atomico/types/vnode.js";
+import type { VNodeAny } from "atomico/types/vnode";
 import {
   click,
   clickDay,

src/calendar-range/calendar-range.test.tsx

@@ -1,6 +1,6 @@
 import { expect } from "@open-wc/testing";
 import { sendKeys } from "@web/test-runner-commands";
-import type { VNodeAny } from "atomico/types/vnode.js";
+import type { VNodeAny } from "atomico/types/vnode";
 import {
   click,
   clickDay,
@@ -255,7 +255,7 @@ describe("CalendarRange", () => {
       expect(before[1]!.part.contains("selected")).to.eq(true);
       expect(before[1]!.part.contains("range-end")).to.eq(true);
 
-      calendar.tentative = undefined;
+      calendar.tentative = "";
       await calendar.updated;
 
       const after = getSelectedDays(month);