From 9b307d114637904639161121a6c59a8d4165300d Mon Sep 17 00:00:00 2001
From: sina-byn <sina.sina.bayan@protonmail.com>
Date: Sun, 28 Sep 2025 10:17:43 +0330
Subject: [PATCH] fix(docs): calendar hijri doc fixed to show correct months in
 dropdown layout

---
 apps/v4/content/docs/components/calendar.mdx  |  3 +++
 .../new-york-v4/examples/calendar-hijri.tsx   | 19 +++++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/apps/v4/content/docs/components/calendar.mdx b/apps/v4/content/docs/components/calendar.mdx
index 315c20e2327..80d2abf6e48 100644
--- a/apps/v4/content/docs/components/calendar.mdx
+++ b/apps/v4/content/docs/components/calendar.mdx
@@ -97,6 +97,9 @@ You can use the `<Calendar>` component to build a date picker. See the [Date Pic
 
 To use the Persian calendar, edit `components/ui/calendar.tsx` and replace `react-day-picker` with `react-day-picker/persian`.
 
+Then, to ensure the months dropdown displays correctly when `captionLayout='dropdown'`, pass a custom `formatMonthDropdown`
+function to your Calendar instance.
+
 ```diff
 - import { DayPicker } from "react-day-picker"
 + import { DayPicker } from "react-day-picker/persian"
diff --git a/apps/v4/registry/new-york-v4/examples/calendar-hijri.tsx b/apps/v4/registry/new-york-v4/examples/calendar-hijri.tsx
index b210c93c196..645bdf172f6 100644
--- a/apps/v4/registry/new-york-v4/examples/calendar-hijri.tsx
+++ b/apps/v4/registry/new-york-v4/examples/calendar-hijri.tsx
@@ -23,7 +23,17 @@ export default function CalendarHijri() {
       defaultMonth={date}
       selected={date}
       onSelect={setDate}
-      className="rounded-lg border shadow-sm"
+      className="rounded-lg border shadow-sm",
+      captionLayout='dropdown'
+      /**
+       * You can handle months in two ways:
+       * 1. Apply this solution for a specific Calendar instance.
+       * 2. Override the default `formatMonthDropdown` function
+       *    directly in the Calendar component code, as explained below.
+       */
+      formatters={{
+        formatMonthDropdown: date => date.toLocaleString('fa-IR', { month: 'short' }),
+      }}
     />
   )
 }
@@ -56,9 +66,14 @@ function Calendar({
         className
       )}
       captionLayout={captionLayout}
+      /**
+       * To override the month display when `captionLayout='dropdown'`
+       * provide a custom `formatMonthDropdown` here
+       * You can set your preferred locale or pass a prop as needed
+       */
       formatters={{
         formatMonthDropdown: (date) =>
-          date.toLocaleString("default", { month: "short" }),
+          date.toLocaleString("fa-IR", { month: "short" }), // customize the locale as needed
         ...formatters,
       }}
       classNames={{