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>