From c4f95848b5e5db1211aa2b6141f58ee7d455844d Mon Sep 17 00:00:00 2001
From: ivanzinchenko <zinchenkoivan92@gmail.com>
Date: Tue, 30 Jul 2024 11:02:47 +0300
Subject: [PATCH] added format of the date displayed in the calendar header

---
 src/form/Calendar/Calendar.story.tsx |  1 +
 src/form/Calendar/CalendarRange.tsx  | 11 ++++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/form/Calendar/Calendar.story.tsx b/src/form/Calendar/Calendar.story.tsx
index c3b84f2a..393953e8 100644
--- a/src/form/Calendar/Calendar.story.tsx
+++ b/src/form/Calendar/Calendar.story.tsx
@@ -186,6 +186,7 @@ export const Multiview = () => {
         value={range}
         onChange={val => setRange(val as [Date, Date])}
         showDayOfWeek
+        headerDateFormat="MMMM yyyy"
       />
       <Divider />
       <Stack justifyContent="center">
diff --git a/src/form/Calendar/CalendarRange.tsx b/src/form/Calendar/CalendarRange.tsx
index 4ad8586e..86dec469 100644
--- a/src/form/Calendar/CalendarRange.tsx
+++ b/src/form/Calendar/CalendarRange.tsx
@@ -47,6 +47,11 @@ export interface CalendarRangeProps
    */
   previousYearArrow?: React.ReactNode | string;
 
+  /**
+   * The format of the date displayed in the calendar header.
+   */
+  headerDateFormat?: string;
+
   /**
    * Theme for the CalendarRange.
    */
@@ -67,6 +72,7 @@ export const CalendarRange: FC<CalendarRangeProps> = ({
   onChange,
   monthsToDisplay = 2,
   direction = 'future',
+  headerDateFormat = 'MMMM',
   theme: customTheme,
   ...rest
 }) => {
@@ -164,7 +170,10 @@ export const CalendarRange: FC<CalendarRangeProps> = ({
         <SmallHeading className={theme.title} disableMargins>
           {displayMonths.map(i => (
             <span key={addMonths(viewValue, showPast ? -i : i).toDateString()}>
-              {format(addMonths(viewValue, showPast ? -i : i), 'MMMM')}
+              {format(
+                addMonths(viewValue, showPast ? -i : i),
+                headerDateFormat
+              )}
             </span>
           ))}
         </SmallHeading>