WickyNilliams · WickyNilliams · Sep 22, 2024 · Dec 14, 2024
diff --git a/docs/src/pages/components/calendar-date.astro b/docs/src/pages/components/calendar-date.astro
@@ -128,6 +128,16 @@ import Link from "../../components/Link.astro";
       <td><code>(date: Date) =&gt; boolean</code></td>
       <td><code>() =&gt; false</code></td>
     </tr>
+    <tr>
+      <td><code>getPartsForDate</code></td>
+      <td>-</td>
+      <td>
+        A function that takes a date and returns a string of CSS parts, allowing
+        custom styling for individual dates
+      </td>
+      <td><code>(date: Date) =&gt; string</code></td>
+      <td><code>() =&gt; ""</code></td>
+    </tr>
   </Table>
 
   <Heading level={2}>Events</Heading>

diff --git a/docs/src/pages/components/calendar-multi.astro b/docs/src/pages/components/calendar-multi.astro
@@ -128,6 +128,16 @@ import Link from "../../components/Link.astro";
       <td><code>(date: Date) =&gt; boolean</code></td>
       <td><code>() =&gt; false</code></td>
     </tr>
+    <tr>
+      <td><code>getPartsForDate</code></td>
+      <td>-</td>
+      <td>
+        A function that takes a date and returns a string of CSS parts, allowing
+        custom styling for individual dates
+      </td>
+      <td><code>(date: Date) =&gt; string</code></td>
+      <td><code>() =&gt; ""</code></td>
+    </tr>
   </Table>
 
   <Heading level={2}>Events</Heading>

diff --git a/docs/src/pages/components/calendar-range.astro b/docs/src/pages/components/calendar-range.astro
@@ -142,6 +142,16 @@ import Link from "../../components/Link.astro";
       <td><code>(date: Date) =&gt; boolean</code></td>
       <td><code>() =&gt; false</code></td>
     </tr>
+    <tr>
+      <td><code>getPartsForDate</code></td>
+      <td>-</td>
+      <td>
+        A function that takes a date and returns a string of CSS parts, allowing
+        custom styling for individual dates
+      </td>
+      <td><code>(date: Date) =&gt; string</code></td>
+      <td><code>() =&gt; ""</code></td>
+    </tr>
   </Table>
 
   <Heading level={2}>Events</Heading>

diff --git a/index.html b/index.html
@@ -36,6 +36,13 @@
         width: 100%;
         text-align: center;
       }
+
+      ::part(foo) {
+        background: red;
+      }
+      ::part(bar) {
+        background: blue;
+      }
     </style>
   </head>
   <body>
@@ -115,6 +122,14 @@ <h2>multi</h2>
       if (window.range) {
         let start = null;
 
+        window.range.getPartsForDate = (date) => {
+          const d = date.getUTCDate();
+
+          if (d % 5 === 0) return "foo";
+          if (d % 9 === 0) return "bar";
+          return "";
+        };
+
         window.range.addEventListener("rangestart", (e) => {
           const { detail } = e;
           start = detail;

diff --git a/src/calendar-base/calendar-base.tsx b/src/calendar-base/calendar-base.tsx
@@ -1,6 +1,6 @@
 import { css } from "atomico";
 import {
-  CalendarMonthContext,
+  CalendarContext,
   type CalendarDateContext,
   type CalendarMultiContext,
   type CalendarRangeContext,
@@ -67,14 +67,14 @@ export function CalendarBase(
         </Button>
       </div>
 
-      <CalendarMonthContext
+      <CalendarContext
         value={props}
         onselectday={props.onSelect}
         onfocusday={props.onFocus}
         onhoverday={props.onHover}
       >
         <slot></slot>
-      </CalendarMonthContext>
+      </CalendarContext>
     </div>
   );
 }
@@ -96,6 +96,10 @@ export const props = {
     type: Function,
     value: (date: Date) => false,
   },
+  getPartsForDate: {
+    type: Function,
+    value: (date: Date): string => "",
+  },
   firstDayOfWeek: {
     type: Number,
     value: (): DaysOfWeek => 1,

diff --git a/src/calendar-date/calendar-date.test.tsx b/src/calendar-date/calendar-date.test.tsx
@@ -21,7 +21,7 @@ import {
 import { CalendarMonth } from "../calendar-month/calendar-month.js";
 import type { Pagination } from "../calendar-base/useCalendarBase.js";
 import { CalendarDate } from "./calendar-date.js";
-import { PlainYearMonth } from "../utils/temporal.js";
+import { PlainDate, PlainYearMonth } from "../utils/temporal.js";
 import { today, toDate } from "../utils/date.js";
 
 type TestProps = {
@@ -802,4 +802,42 @@ describe("CalendarDate", () => {
       expect(firstJan).to.have.attribute("aria-pressed", "true");
     });
   });
+
+  it("allows customizing day parts", async () => {
+    const available = new Set(["2020-01-10", "2020-01-11", "2020-01-12"]);
+    const almostGone = new Set(["2020-01-13", "2020-01-14"]);
+
+    const calendar = await mount(<Fixture value="2020-01-01" />);
+    calendar.getPartsForDate = function getPartsForDate(date: Date) {
+      const d = PlainDate.from(date).toString();
+
+      if (available.has(d)) return "available";
+      if (almostGone.has(d)) return "almost-gone";
+      return "";
+    };
+
+    await nextFrame();
+    const month = getMonth(calendar);
+
+    [
+      getDayButton(month, "10 January"),
+      getDayButton(month, "11 January"),
+      getDayButton(month, "12 January"),
+    ].forEach((day) => {
+      expect(day.part.contains("available")).to.eq(
+        true,
+        `"available" not found in part: "${day.part.toString().trim()}"`
+      );
+    });
+
+    [
+      getDayButton(month, "13 January"),
+      getDayButton(month, "14 January"),
+    ].forEach((day) => {
+      expect(day.part.contains("almost-gone")).to.eq(
+        true,
+        `"almost-gone" not found in part: "${day.part.toString().trim()}"`
+      );
+    });
+  });
 });
diff --git a/src/calendar-month/CalendarMonthContext.ts b/src/calendar-month/CalendarMonthContext.ts
@@ -2,45 +2,45 @@ import { createContext } from "atomico";
 import type { PlainDate, PlainYearMonth } from "../utils/temporal.js";
 import { today, type DaysOfWeek } from "../utils/date.js";
 
-interface CalendarMonthContextBase {
+interface CalendarContextBase {
   min?: PlainDate;
   max?: PlainDate;
   firstDayOfWeek: DaysOfWeek;
   isDateDisallowed?: (date: Date) => boolean;
+  getPartsForDate?: (date: Date) => string;
   page: { start: PlainYearMonth; end: PlainYearMonth };
   focusedDate: PlainDate;
   showOutsideDays?: boolean;
   locale?: string;
 }
 
-export interface CalendarDateContext extends CalendarMonthContextBase {
+export interface CalendarDateContext extends CalendarContextBase {
   type: "date";
   value?: PlainDate;
 }
 
-export interface CalendarRangeContext extends CalendarMonthContextBase {
+export interface CalendarRangeContext extends CalendarContextBase {
   type: "range";
   value: [PlainDate, PlainDate] | [];
 }
 
-export interface CalendarMultiContext extends CalendarMonthContextBase {
+export interface CalendarMultiContext extends CalendarContextBase {
   type: "multi";
   value: PlainDate[];
 }
 
-export type CalendarMonthContextValue =
+export type CalendarContextValue =
   | CalendarDateContext
   | CalendarRangeContext
   | CalendarMultiContext;
 
 const t = today();
 
-export const CalendarMonthContext = createContext<CalendarMonthContextValue>({
+export const CalendarContext = createContext<CalendarContextValue>({
   type: "date",
   firstDayOfWeek: 1,
-  isDateDisallowed: () => false,
   focusedDate: t,
   page: { start: t.toPlainYearMonth(), end: t.toPlainYearMonth() },
 });
 
-customElements.define("calendar-month-ctx", CalendarMonthContext);
+customElements.define("calendar-ctx", CalendarContext);
diff --git a/src/calendar-month/calendar-month.test.tsx b/src/calendar-month/calendar-month.test.tsx
@@ -13,7 +13,7 @@ import {
   sendShiftPress,
 } from "../utils/test.js";
 import {
-  CalendarMonthContext,
+  CalendarContext,
   type CalendarDateContext,
   type CalendarMultiContext,
   type CalendarRangeContext,
@@ -23,7 +23,7 @@ import { fixture } from "atomico/test-dom";
 import { PlainDate } from "../utils/temporal.js";
 import { toDate, today } from "../utils/date.js";
 
-type MonthContextInstance = InstanceType<typeof CalendarMonthContext>;
+type MonthContextInstance = InstanceType<typeof CalendarContext>;
 
 interface TestPropsBase {
   onselectday?: (e: CustomEvent<PlainDate>) => void;
@@ -46,7 +46,7 @@ function Fixture({
   ...props
 }: Partial<DateTestProps | RangeTestProps | MultiTestProps>): VNodeAny {
   return (
-    <CalendarMonthContext
+    <CalendarContext
       onselectday={onselectday}
       onfocusday={onfocusday}
       dir={dir}
@@ -64,7 +64,7 @@ function Fixture({
       }}
     >
       <CalendarMonth />
-    </CalendarMonthContext>
+    </CalendarContext>
   );
 }
 

diff --git a/src/calendar-month/calendar-month.tsx b/src/calendar-month/calendar-month.tsx
@@ -1,7 +1,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 { CalendarContext } from "./CalendarMonthContext.js";
 import { toDate } from "../utils/date.js";
 
 export const CalendarMonth = c(
@@ -12,7 +12,7 @@ export const CalendarMonth = c(
     onFocusDay: CustomEvent<string>;
     onHoverDay: CustomEvent<string>;
   }> => {
-    const context = useContext(CalendarMonthContext);
+    const context = useContext(CalendarContext);
     const table = useRef<HTMLTableElement>();
     const calendar = useCalendarMonth({ props, context });
 

diff --git a/src/calendar-month/useCalendarMonth.ts b/src/calendar-month/useCalendarMonth.ts
@@ -9,7 +9,7 @@ import {
   today,
 } from "../utils/date.js";
 import type { PlainDate } from "../utils/temporal.js";
-import type { CalendarMonthContextValue } from "./CalendarMonthContext.js";
+import type { CalendarContextValue } from "./CalendarMonthContext.js";
 
 const inRange = (date: PlainDate, min?: PlainDate, max?: PlainDate) =>
   clamp(date, min, max) === date;
@@ -24,7 +24,7 @@ const dispatchOptions = { bubbles: true };
 
 type UseCalendarMonthOptions = {
   props: { offset: number };
-  context: CalendarMonthContextValue;
+  context: CalendarContextValue;
 };
 
 export function useCalendarMonth({ props, context }: UseCalendarMonthOptions) {
@@ -144,6 +144,8 @@ export function useCalendarMonth({ props, context }: UseCalendarMonthOptions) {
       isDisallowed ? "disallowed" : ""
     } ${
       isToday ? "today" : ""
+    } ${
+      context.getPartsForDate?.(asDate) ?? ""
     }`;
 
     return {