From 4daa5dd9d04c29e24ec308ec16c593142c1ee659 Mon Sep 17 00:00:00 2001
From: Klink <85062+dogmar@users.noreply.github.com>
Date: Mon, 15 Jun 2026 17:25:28 -0700
Subject: [PATCH] fix(demo): format month via PlainDate in onMonthChange
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The /demo page's onMonthChange handler called `toLocaleString` directly on
a `Temporal.PlainYearMonth`, which carries the iso8601 calendar. For locales
that resolve to a different calendar (e.g. gregory for en-US), Temporal throws
"cannot format PlainYearMonth with calendar iso8601 in locale with calendar
gregory" — so clicking the next/prev month button errored out.

Format through an ISO `PlainDate` (`.toPlainDate({ day: 1 })`) instead, which
Intl renders in the locale's calendar without throwing. This mirrors the
technique the library's own MonthYearString component already uses.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 website/src/routes/demo.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/website/src/routes/demo.tsx b/website/src/routes/demo.tsx
index bcbf473..9bca940 100644
--- a/website/src/routes/demo.tsx
+++ b/website/src/routes/demo.tsx
@@ -159,7 +159,10 @@ function DemoApp() {
 
   const handleMonthChange = useCallback(
     (month: Temporal.PlainYearMonth) => {
-      const formatted = month.toLocaleString(locale, {
+      // Format through a PlainDate: a `PlainYearMonth` with the ISO calendar
+      // throws when toLocaleString resolves a different locale calendar (e.g.
+      // gregory for en-US). An ISO `PlainDate` renders in the locale calendar.
+      const formatted = month.toPlainDate({ day: 1 }).toLocaleString(locale, {
         month: "long",
         year: "numeric",
       });