Merge pull request #251 from reaviz/feature/add-ralendar-range-header…

…-date-format added format of the date displayed in the calendar header
reaviz · Jul 30, 2024 · 59e787a · 59e787a
2 parents 4bc4297 + c4f9584
commit 59e787a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git 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
@@ -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>