diff --git a/artifacts/tx-os/src/components/ui/calendar.tsx b/artifacts/tx-os/src/components/ui/calendar.tsx
index 1453e55f..fc8130d7 100644
--- a/artifacts/tx-os/src/components/ui/calendar.tsx
+++ b/artifacts/tx-os/src/components/ui/calendar.tsx
@@ -7,16 +7,33 @@ import {
   ChevronRightIcon,
 } from "lucide-react"
 import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+import { ar as dfAr, enUS as dfEn } from "date-fns/locale"
 
 import { cn } from "@/lib/utils"
 import { Button, buttonVariants } from "@/components/ui/button"
 import i18n from "@/i18n"
 
+function isArabic(): boolean {
+  // The public booking page forces Arabic by setting documentElement.lang/dir
+  // without changing i18n.language, so prefer the DOM signal (i18n keeps it in
+  // sync elsewhere) and fall back to the i18n language.
+  if (typeof document !== "undefined") {
+    const el = document.documentElement
+    if (el.lang) return el.lang.toLowerCase().startsWith("ar")
+    if (el.dir) return el.dir === "rtl"
+  }
+  return i18n.language === "ar"
+}
+
 function activeLocaleLatn(): string {
-  const lang = i18n.language === "ar" ? "ar" : "en-US"
+  const lang = isArabic() ? "ar" : "en-US"
   return `${lang}-u-nu-latn`
 }
 
+function activeDfLocale() {
+  return isArabic() ? dfAr : dfEn
+}
+
 function Calendar({
   className,
   classNames,
@@ -41,9 +58,15 @@ function Calendar({
         className
       )}
       captionLayout={captionLayout}
+      locale={activeDfLocale()}
+      dir={isArabic() ? "rtl" : "ltr"}
       formatters={{
         formatMonthDropdown: (date) =>
           new Intl.DateTimeFormat(activeLocaleLatn(), { month: "short", numberingSystem: "latn" }).format(date),
+        formatCaption: (date) =>
+          new Intl.DateTimeFormat(activeLocaleLatn(), { month: "long", year: "numeric", numberingSystem: "latn" }).format(date),
+        formatDay: (date) =>
+          new Intl.DateTimeFormat(activeLocaleLatn(), { day: "numeric", numberingSystem: "latn" }).format(date),
         ...formatters,
       }}
       classNames={{