From 6e6a92147572f732ab8eff062c029786984db9ef Mon Sep 17 00:00:00 2001
From: Quantum <quantum2048@gmail.com>
Date: Fri, 27 Jun 2025 22:25:46 -0400
Subject: [PATCH] =?UTF-8?q?gcal:=20add=20Haab=CA=BC=20display?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/src/mayan.ts   | 2 +-
 gcal/src/Calendar.tsx | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/common/src/mayan.ts b/common/src/mayan.ts
index 88d8854..1db5cb4 100644
--- a/common/src/mayan.ts
+++ b/common/src/mayan.ts
@@ -96,7 +96,7 @@ const haabNames: Record<HaabMonth, string> = {
     19: 'Wayebʼ',
 };
 
-export function formatHaab(month: HaabMonth, day: HaabDay): string {
+export function formatHaab({month, day}: Haab): string {
     return `${day} ${haabNames[month]}`;
 }
 
diff --git a/gcal/src/Calendar.tsx b/gcal/src/Calendar.tsx
index b45dcf7..7938a89 100644
--- a/gcal/src/Calendar.tsx
+++ b/gcal/src/Calendar.tsx
@@ -10,7 +10,7 @@ import {
     monthName,
     weekdayNames,
 } from '@common/gregorian';
-import {jdnTzolkin, formatTzolkin} from '@common/mayan';
+import {formatHaab, formatTzolkin, jdnHaab, jdnTzolkin} from '@common/mayan';
 import {jdnLongCount} from '@common/longCount';
 import {jdnJulian} from '@common/julian';
 import {frDateFormat, frEndJD, frStartJD, jdnFrench} from '@common/french';
@@ -45,8 +45,12 @@ function DayDetail({jdn}: { jdn: number }): JSX.Element {
             <abbr title="Tzolkʼin (Mayan)" {...mobile}>TZ</abbr>{' '}
             {formatTzolkin(jdnTzolkin(jdn))}
         </div>
+        <div className="DayDetail-haab">
+            <abbr title="Haabʼ (Mayan)" {...mobile}>HA</abbr>{' '}
+            {formatHaab(jdnHaab(jdn))}
+        </div>
         {lc && <div className="DayDetail-lc">
-          <abbr title="Mesoamerican long count date" {...mobile}>LC</abbr>{' '}
+        <abbr title="Mesoamerican long count date" {...mobile}>LC</abbr>{' '}
             {lc.join('.\u200b')}
         </div>}
         {jdn >= frStartJD && jdn <= frEndJD && <div className="DayDetail-fr">