diff --git a/docs/data/date-pickers/base-calendar/DayRangeCalendarDemo.js b/docs/data/date-pickers/base-calendar/DayRangeCalendarDemo.js
index 5a150cfe0e2b0..e67c204c64a7b 100644
--- a/docs/data/date-pickers/base-calendar/DayRangeCalendarDemo.js
+++ b/docs/data/date-pickers/base-calendar/DayRangeCalendarDemo.js
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
 
-import { Separator } from '@base-ui-components/react/separator';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 // eslint-disable-next-line no-restricted-imports
@@ -11,24 +10,21 @@ import {
 } from '@mui/x-date-pickers-pro/internals/base/RangeCalendar';
 import styles from './calendar.module.css';
 
-function Header(props) {
-  const { offset } = props;
+function Header() {
   const { visibleDate } = useRangeCalendarContext();
 
-  const date = visibleDate.add(offset, 'month');
-
   return (
     <header className={styles.Header}>
       <RangeCalendar.SetVisibleMonth
         target="previous"
-        className={clsx(styles.SetVisibleMonth, offset === 1 && styles.Hidden)}
+        className={clsx(styles.SetVisibleMonth)}
       >
         ◀
       </RangeCalendar.SetVisibleMonth>
-      <span>{date.format('MMMM YYYY')}</span>
+      <span>{visibleDate.format('MMMM YYYY')}</span>
       <RangeCalendar.SetVisibleMonth
         target="next"
-        className={clsx(styles.SetVisibleMonth, offset === 0 && styles.Hidden)}
+        className={clsx(styles.SetVisibleMonth)}
       >
         ▶
       </RangeCalendar.SetVisibleMonth>
@@ -36,60 +32,45 @@ function Header(props) {
   );
 }
 
-function DaysGrid(props) {
-  const { offset } = props;
-  return (
-    <div className={styles.Panel}>
-      <Header offset={offset} />
-      <RangeCalendar.DaysGrid className={styles.DaysGrid} offset={offset}>
-        <RangeCalendar.DaysGridHeader className={styles.DaysGridHeader}>
-          {({ days }) =>
-            days.map((day) => (
-              <RangeCalendar.DaysGridHeaderCell
-                value={day}
-                key={day.toString()}
-                className={styles.DaysGridHeaderCell}
-              />
-            ))
-          }
-        </RangeCalendar.DaysGridHeader>
-        <RangeCalendar.DaysGridBody className={styles.DaysGridBody}>
-          {({ weeks }) =>
-            weeks.map((week) => (
-              <RangeCalendar.DaysWeekRow
-                value={week}
-                key={week.toString()}
-                className={styles.DaysWeekRow}
-              >
-                {({ days }) =>
-                  days.map((day) => (
-                    <RangeCalendar.DaysCell
-                      value={day}
-                      key={day.toString()}
-                      className={clsx(styles.DaysCell, styles.RangeDaysCell)}
-                    />
-                  ))
-                }
-              </RangeCalendar.DaysWeekRow>
-            ))
-          }
-        </RangeCalendar.DaysGridBody>
-      </RangeCalendar.DaysGrid>
-    </div>
-  );
-}
-
-function DayCalendar(props) {
+function DayRangeCalendar(props) {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <RangeCalendar.Root
-        {...props}
-        monthPageSize={2}
-        className={clsx(styles.Root, styles.RootWithTwoPanels)}
-      >
-        <DaysGrid offset={0} />
-        <Separator className={styles.DaysGridSeparator} />
-        <DaysGrid offset={1} />
+      <RangeCalendar.Root {...props} monthPageSize={2} className={clsx(styles.Root)}>
+        <Header />
+        <RangeCalendar.DaysGrid className={styles.DaysGrid}>
+          <RangeCalendar.DaysGridHeader className={styles.DaysGridHeader}>
+            {({ days }) =>
+              days.map((day) => (
+                <RangeCalendar.DaysGridHeaderCell
+                  value={day}
+                  key={day.toString()}
+                  className={styles.DaysGridHeaderCell}
+                />
+              ))
+            }
+          </RangeCalendar.DaysGridHeader>
+          <RangeCalendar.DaysGridBody className={styles.DaysGridBody}>
+            {({ weeks }) =>
+              weeks.map((week) => (
+                <RangeCalendar.DaysWeekRow
+                  value={week}
+                  key={week.toString()}
+                  className={styles.DaysWeekRow}
+                >
+                  {({ days }) =>
+                    days.map((day) => (
+                      <RangeCalendar.DaysCell
+                        value={day}
+                        key={day.toString()}
+                        className={clsx(styles.DaysCell, styles.RangeDaysCell)}
+                      />
+                    ))
+                  }
+                </RangeCalendar.DaysWeekRow>
+              ))
+            }
+          </RangeCalendar.DaysGridBody>
+        </RangeCalendar.DaysGrid>
       </RangeCalendar.Root>
     </LocalizationProvider>
   );
@@ -104,7 +85,7 @@ export default function DayRangeCalendarDemo() {
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DayCalendar value={value} onValueChange={handleValueChange} />
+      <DayRangeCalendar value={value} onValueChange={handleValueChange} />
     </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/base-calendar/DayRangeCalendarDemo.tsx b/docs/data/date-pickers/base-calendar/DayRangeCalendarDemo.tsx
index 1d6728c438e1d..ec645716124b8 100644
--- a/docs/data/date-pickers/base-calendar/DayRangeCalendarDemo.tsx
+++ b/docs/data/date-pickers/base-calendar/DayRangeCalendarDemo.tsx
@@ -32,7 +32,7 @@ function Header() {
   );
 }
 
-function DayCalendar(props: Omit<RangeCalendar.Root.Props, 'children'>) {
+function DayRangeCalendar(props: Omit<RangeCalendar.Root.Props, 'children'>) {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <RangeCalendar.Root {...props} monthPageSize={2} className={clsx(styles.Root)}>
@@ -91,7 +91,7 @@ export default function DayRangeCalendarDemo() {
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DayCalendar value={value} onValueChange={handleValueChange} />
+      <DayRangeCalendar value={value} onValueChange={handleValueChange} />
     </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/base-calendar/DayRangeCalendarDemo.tsx.preview b/docs/data/date-pickers/base-calendar/DayRangeCalendarDemo.tsx.preview
index 72b23c81a5a56..16ef550120c15 100644
--- a/docs/data/date-pickers/base-calendar/DayRangeCalendarDemo.tsx.preview
+++ b/docs/data/date-pickers/base-calendar/DayRangeCalendarDemo.tsx.preview
@@ -1 +1 @@
-<DayCalendar value={value} onValueChange={handleValueChange} />
\ No newline at end of file
+<DayRangeCalendar value={value} onValueChange={handleValueChange} />
\ No newline at end of file
diff --git a/docs/data/date-pickers/base-calendar/DayRangeCalendarWithTwoMonthsDemo.js b/docs/data/date-pickers/base-calendar/DayRangeCalendarWithTwoMonthsDemo.js
index 652ea8846a45f..5b3b5729ad3da 100644
--- a/docs/data/date-pickers/base-calendar/DayRangeCalendarWithTwoMonthsDemo.js
+++ b/docs/data/date-pickers/base-calendar/DayRangeCalendarWithTwoMonthsDemo.js
@@ -79,7 +79,7 @@ function DaysGrid(props) {
   );
 }
 
-function DayCalendar(props) {
+function DayRangeCalendar(props) {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <RangeCalendar.Root
@@ -104,7 +104,7 @@ export default function DayRangeCalendarWithTwoMonthsDemo() {
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DayCalendar value={value} onValueChange={handleValueChange} />
+      <DayRangeCalendar value={value} onValueChange={handleValueChange} />
     </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/base-calendar/DayRangeCalendarWithTwoMonthsDemo.tsx b/docs/data/date-pickers/base-calendar/DayRangeCalendarWithTwoMonthsDemo.tsx
index 37e34b001f5fd..f9db36a489510 100644
--- a/docs/data/date-pickers/base-calendar/DayRangeCalendarWithTwoMonthsDemo.tsx
+++ b/docs/data/date-pickers/base-calendar/DayRangeCalendarWithTwoMonthsDemo.tsx
@@ -79,7 +79,7 @@ function DaysGrid(props: { offset: 0 | 1 }) {
   );
 }
 
-function DayCalendar(props: Omit<RangeCalendar.Root.Props, 'children'>) {
+function DayRangeCalendar(props: Omit<RangeCalendar.Root.Props, 'children'>) {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <RangeCalendar.Root
@@ -110,7 +110,7 @@ export default function DayRangeCalendarWithTwoMonthsDemo() {
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DayCalendar value={value} onValueChange={handleValueChange} />
+      <DayRangeCalendar value={value} onValueChange={handleValueChange} />
     </LocalizationProvider>
   );
 }
diff --git a/docs/data/date-pickers/base-calendar/DayRangeCalendarWithTwoMonthsDemo.tsx.preview b/docs/data/date-pickers/base-calendar/DayRangeCalendarWithTwoMonthsDemo.tsx.preview
index 72b23c81a5a56..16ef550120c15 100644
--- a/docs/data/date-pickers/base-calendar/DayRangeCalendarWithTwoMonthsDemo.tsx.preview
+++ b/docs/data/date-pickers/base-calendar/DayRangeCalendarWithTwoMonthsDemo.tsx.preview
@@ -1 +1 @@
-<DayCalendar value={value} onValueChange={handleValueChange} />
\ No newline at end of file
+<DayRangeCalendar value={value} onValueChange={handleValueChange} />
\ No newline at end of file