diff --git a/core/api.txt b/core/api.txt
index 201c86c28d0..428926db860 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -534,6 +534,7 @@ ion-datetime,prop,name,string,this.inputId,false,false
 ion-datetime,prop,preferWheel,boolean,false,false,false
 ion-datetime,prop,presentation,"date" | "date-time" | "month" | "month-year" | "time" | "time-date" | "year",'date-time',false,false
 ion-datetime,prop,readonly,boolean,false,false,false
+ion-datetime,prop,showAdjacentDays,boolean,false,false,false
 ion-datetime,prop,showClearButton,boolean,false,false,false
 ion-datetime,prop,showDefaultButtons,boolean,false,false,false
 ion-datetime,prop,showDefaultTimeLabel,boolean,true,false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index c458b851506..72733ac654b 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -944,6 +944,10 @@ export namespace Components {
           * Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
          */
         "reset": (startDate?: string) => Promise<void>;
+        /**
+          * If `true`, the datetime calendar displays a six-week (42-day) layout, including days from the previous and next months to fill the grid. These adjacent days are selectable unless disabled.
+         */
+        "showAdjacentDays": boolean;
         /**
           * If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
          */
@@ -5779,6 +5783,10 @@ declare namespace LocalJSX {
           * If `true`, the datetime appears normal but the selected date cannot be changed.
          */
         "readonly"?: boolean;
+        /**
+          * If `true`, the datetime calendar displays a six-week (42-day) layout, including days from the previous and next months to fill the grid. These adjacent days are selectable unless disabled.
+         */
+        "showAdjacentDays"?: boolean;
         /**
           * If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
          */
diff --git a/core/src/components/datetime/datetime-interface.ts b/core/src/components/datetime/datetime-interface.ts
index 475a672d069..2919e0c69d0 100644
--- a/core/src/components/datetime/datetime-interface.ts
+++ b/core/src/components/datetime/datetime-interface.ts
@@ -15,6 +15,7 @@ export interface DatetimeParts {
   hour?: number;
   minute?: number;
   ampm?: 'am' | 'pm';
+  isAdjacentDay?: boolean;
 }
 
 export type DatetimePresentation = 'date-time' | 'time-date' | 'date' | 'time' | 'month' | 'year' | 'month-year';
diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss
index 71bff22441a..ce949f77a16 100644
--- a/core/src/components/datetime/datetime.ios.scss
+++ b/core/src/components/datetime/datetime.ios.scss
@@ -267,6 +267,10 @@
   color: current-color(contrast);
 }
 
+:host .calendar-day.calendar-day-adjacent-day {
+  color: $text-color-step-700;
+}
+
 // Time / Header
 // -----------------------------------
 :host .datetime-time {
diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss
index 7b3d78f5e81..b008951db12 100644
--- a/core/src/components/datetime/datetime.md.scss
+++ b/core/src/components/datetime/datetime.md.scss
@@ -121,12 +121,17 @@
   color: current-color(contrast);
 }
 
-.calendar-day.calendar-day-active {
+.calendar-day.calendar-day-active,
+.calendar-day.calendar-day-active:focus {
   border: 1px solid current-color(base);
 
   background: current-color(base);
 }
 
+:host .calendar-day.calendar-day-adjacent-day {
+  color: $text-color-step-500;
+}
+
 // Time / Header
 // -----------------------------------
 :host .datetime-time {
diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss
index 9c7a4b0a2c8..f3053d0ed16 100644
--- a/core/src/components/datetime/datetime.scss
+++ b/core/src/components/datetime/datetime.scss
@@ -364,7 +364,8 @@
   opacity: 0.4;
 }
 
-.calendar-day:focus {
+
+.calendar-day:not(.calendar-day-adjacent-day):focus {
   background: current-color(base, 0.2);
 
   box-shadow: 0px 0px 0px 4px current-color(base, 0.2);
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 9154c24e60b..0c158ba7069 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -139,6 +139,7 @@ export class Datetime implements ComponentInterface {
     hour: 13,
     minute: 52,
     ampm: 'pm',
+    isAdjacentDay: false,
   };
 
   @Element() el!: HTMLIonDatetimeElement;
@@ -207,6 +208,13 @@ export class Datetime implements ComponentInterface {
    */
   @Prop() isDateEnabled?: (dateIsoString: string) => boolean;
 
+  /**
+   * If `true`, the datetime calendar displays a six-week (42-day) layout,
+   * including days from the previous and next months to fill the grid.
+   * These adjacent days are selectable unless disabled.
+   */
+  @Prop() showAdjacentDays = false;
+
   @Watch('disabled')
   protected disabledChanged() {
     this.emitStyle();
@@ -805,12 +813,17 @@ export class Datetime implements ComponentInterface {
 
   private focusWorkingDay = (currentMonth: Element) => {
     /**
-     * Get the number of padding days so
+     * Get the number of offset days so
      * we know how much to offset our next selector by
      * to grab the correct calendar-day element.
      */
-    const padding = currentMonth.querySelectorAll('.calendar-day-padding');
-    const { day } = this.workingParts;
+
+    const { day, month, year } = this.workingParts;
+    const firstOfMonth = new Date(`${month}/1/${year}`).getDay();
+    const offset =
+      firstOfMonth >= this.firstDayOfWeek
+        ? firstOfMonth - this.firstDayOfWeek
+        : 7 - (this.firstDayOfWeek - firstOfMonth);
 
     if (day === null) {
       return;
@@ -821,7 +834,7 @@ export class Datetime implements ComponentInterface {
      * and focus it.
      */
     const dayEl = currentMonth.querySelector(
-      `.calendar-day-wrapper:nth-of-type(${padding.length + day}) .calendar-day`
+      `.calendar-day-wrapper:nth-of-type(${offset + day}) .calendar-day`
     ) as HTMLElement | null;
     if (dayEl) {
       dayEl.focus();
@@ -2226,10 +2239,34 @@ export class Datetime implements ComponentInterface {
         }}
       >
         <div class="calendar-month-grid">
-          {getDaysOfMonth(month, year, this.firstDayOfWeek % 7).map((dateObject, index) => {
-            const { day, dayOfWeek } = dateObject;
-            const { el, highlightedDates, isDateEnabled, multiple } = this;
-            const referenceParts = { month, day, year };
+          {getDaysOfMonth(month, year, this.firstDayOfWeek % 7, this.showAdjacentDays).map((dateObject, index) => {
+            const { day, dayOfWeek, isAdjacentDay } = dateObject;
+            const { el, highlightedDates, isDateEnabled, multiple, showAdjacentDays } = this;
+            let _month = month;
+            let _year = year;
+            if (showAdjacentDays && isAdjacentDay && day !== null) {
+              if (day > 20) {
+                // Leading with the adjacent day from the previous month
+                // if its a adjacent day and is higher than '20' (last week even in feb)
+                if (month === 1) {
+                  _year = year - 1;
+                  _month = 12;
+                } else {
+                  _month = month - 1;
+                }
+              } else if (day < 15) {
+                // Leading with the adjacent day from the next month
+                // if its a adjacent day and is lower than '15' (first two weeks)
+                if (month === 12) {
+                  _year = year + 1;
+                  _month = 1;
+                } else {
+                  _month = month + 1;
+                }
+              }
+            }
+
+            const referenceParts = { month: _month, day, year: _year, isAdjacentDay };
             const isCalendarPadding = day === null;
             const {
               isActive,
@@ -2284,7 +2321,7 @@ export class Datetime implements ComponentInterface {
              * Custom highlight styles should not override the style for selected dates,
              * nor apply to "filler days" at the start of the grid.
              */
-            if (highlightedDates !== undefined && !isActive && day !== null) {
+            if (highlightedDates !== undefined && !isActive && day !== null && !isAdjacentDay) {
               dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el);
             }
 
@@ -2292,10 +2329,12 @@ export class Datetime implements ComponentInterface {
 
             // "Filler days" at the beginning of the grid should not get the calendar day
             // CSS parts added to them
-            if (!isCalendarPadding) {
+            if (!isCalendarPadding && !isAdjacentDay) {
               dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${
                 isCalDayDisabled ? ' disabled' : ''
               }`;
+            } else if (isAdjacentDay) {
+              dateParts = `calendar-day${isCalDayDisabled ? ' disabled' : ''}`;
             }
 
             return (
@@ -2319,8 +2358,8 @@ export class Datetime implements ComponentInterface {
                   }}
                   tabindex="-1"
                   data-day={day}
-                  data-month={month}
-                  data-year={year}
+                  data-month={_month}
+                  data-year={_year}
                   data-index={index}
                   data-day-of-week={dayOfWeek}
                   disabled={isButtonDisabled}
@@ -2330,6 +2369,7 @@ export class Datetime implements ComponentInterface {
                     'calendar-day-active': isActive,
                     'calendar-day-constrained': isCalDayConstrained,
                     'calendar-day-today': isToday,
+                    'calendar-day-adjacent-day': isAdjacentDay,
                   }}
                   part={dateParts}
                   aria-hidden={isCalendarPadding ? 'true' : null}
@@ -2340,29 +2380,37 @@ export class Datetime implements ComponentInterface {
                       return;
                     }
 
+                    if (isAdjacentDay) {
+                      // The user selected a day outside the current month. Ignore this button, as the month will be re-rendered.
+                      this.el.blur();
+                    }
+
                     this.setWorkingParts({
                       ...this.workingParts,
-                      month,
+                      month: _month,
                       day,
-                      year,
+                      year: _year,
+                      isAdjacentDay,
                     });
 
                     // multiple only needs date info, so we can wipe out other fields like time
                     if (multiple) {
                       this.setActiveParts(
                         {
-                          month,
+                          month: _month,
                           day,
-                          year,
+                          year: _year,
+                          isAdjacentDay,
                         },
                         isActive
                       );
                     } else {
                       this.setActiveParts({
                         ...activePart,
-                        month,
+                        month: _month,
                         day,
-                        year,
+                        year: _year,
+                        isAdjacentDay,
                       });
                     }
                   }}
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-md-ltr-Mobile-Chrome-linux.png
index a8ab8b49d17..aa3f09d217e 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-md-ltr-Mobile-Firefox-linux.png
index d444ea481e5..f85f714555e 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-focus-selected-calendar-day-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Firefox-linux.png
index d8fe283317a..c663807d933 100644
Binary files a/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/custom/datetime.e2e.ts-snapshots/datetime-custom-focus-selected-calendar-day-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts
new file mode 100644
index 00000000000..ac45fd42028
--- /dev/null
+++ b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts
@@ -0,0 +1,51 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('datetime: show adjacent days'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const datetime = page.locator('#default');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-show-adjacent-days`));
+    });
+
+    test('should not have visual regressions with a custom styled calendar', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const datetime = page.locator('#custom-calendar-days');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-show-adjacent-days-custom-calendar`));
+    });
+
+    test('should not have visual regressions with specific date disabled', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const datetime = page.locator('#specificDate');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-show-adjacent-days-specific-date-disabled`));
+    });
+
+    test('should not have visual regressions with weekends disabled', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const datetime = page.locator('#weekends');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-show-adjacent-days-weekends-disabled`));
+    });
+
+    test('should not have visual regressions with date range disabled', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const datetime = page.locator('#dateRange');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-show-adjacent-days-date-range-disabled`));
+    });
+
+    test('should not have visual regressions with month disabled', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const datetime = page.locator('#month');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-show-adjacent-days-month-disabled`));
+    });
+
+    test('should not have visual regressions with display specified', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const datetime = page.locator('#display');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-show-adjacent-days-display`));
+    });
+  });
+});
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ee740425612
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b901962f864
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f3bff69e4c9
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..cadd193d862
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..edc84a8ac24
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e0265406393
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-custom-calendar-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a7497a6103c
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..86f65d91799
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..eb4ed0dbbe2
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3a559c512d2
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..694fdac1321
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..aab2962d1c0
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-date-range-disabled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2352f2c948a
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8b828935e1d
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..509a86f905b
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0f73846e6d2
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..194e6b8cd95
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..feee69032d9
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-display-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..97be1d25b5f
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..94b2614cdf2
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..0c223238720
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..fbe9fd0f9e4
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..971a4be2a60
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fbda29aad2a
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0afa71a9e84
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f3086f96207
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e7a0bd19495
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0ad1a889069
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..92ae494ccda
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..47a9a2c29a7
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-month-disabled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..74bf41c99dd
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..89759eefd67
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..345df284997
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3948a2c0f46
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..23aff3d1d1d
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..946f06805f0
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-specific-date-disabled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..63bdb1c6a5e
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2e38980b08e
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ed1853422de
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..19d82b125fe
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..477cd04616a
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ff5171c31f5
Binary files /dev/null and b/core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts-snapshots/datetime-show-adjacent-days-weekends-disabled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/show-adjacent-days/index.html b/core/src/components/datetime/test/show-adjacent-days/index.html
new file mode 100644
index 00000000000..167da8663bd
--- /dev/null
+++ b/core/src/components/datetime/test/show-adjacent-days/index.html
@@ -0,0 +1,310 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Datetime - Show Adjacent Days</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+        margin-left: 5px;
+      }
+
+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }
+
+      /*
+        * Custom Datetime Day Parts
+        * -------------------------------------------
+        */
+
+      #custom-calendar-days::part(calendar-day) {
+        background-color: #ffe2e6;
+
+        color: #da5296;
+
+        margin: 2px 0;
+      }
+
+      #custom-calendar-days::part(calendar-day today) {
+        color: #8462d1;
+      }
+
+      #custom-calendar-days::part(calendar-day):not(.calendar-day-adjacent-day):focus {
+        background-color: rgb(154 209 98 / 0.2);
+        box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);
+      }
+
+      #custom-calendar-days::part(calendar-day disabled) {
+        background: rgba(0 0 0 / 0.2);
+        color: black;
+      }
+
+      /*
+        * Custom Material Design Datetime Day Parts
+        * -------------------------------------------
+        */
+
+      #custom-calendar-days.md::part(calendar-day active),
+      #custom-calendar-days.md::part(calendar-day active):focus {
+        background-color: #9ad162;
+        border-color: #9ad162;
+        color: #fff;
+      }
+
+      #custom-calendar-days.md::part(calendar-day today) {
+        border-color: #8462d1;
+      }
+
+      /*
+        * Custom iOS Datetime Day Parts
+        * -------------------------------------------
+        */
+
+      #custom-calendar-days.ios::part(calendar-day active),
+      #custom-calendar-days.ios::part(calendar-day active):focus {
+        background-color: rgb(154 209 98 / 0.2);
+        color: #9ad162;
+      }
+
+      body {
+        padding: 20px;
+      }
+
+      ion-datetime {
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
+        <ion-toolbar>
+          <ion-title>Datetime - Show Adjacent Days</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Inline Grid</h2>
+            <ion-datetime show-adjacent-days="true" id="default" value="2020-03-14T14:23:00.000Z"></ion-datetime>
+          </div>
+
+          <div class="grid-item">
+            <h2>Inline Grid: Custom Styles</h2>
+            <ion-datetime
+              show-adjacent-days="true"
+              id="custom-calendar-days"
+              value="2023-06-15"
+              presentation="date"
+            ></ion-datetime>
+          </div>
+        </div>
+
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Disable Specific Date</h2>
+            <ion-datetime
+              show-adjacent-days="true"
+              id="specificDate"
+              value="2021-10-01"
+              showAdjacentDays="true"
+            ></ion-datetime>
+          </div>
+
+          <div class="grid-item">
+            <h2>Disable Weekends</h2>
+            <ion-datetime show-adjacent-days="true" id="weekends" value="2021-10-01"></ion-datetime>
+          </div>
+
+          <div class="grid-item">
+            <h2>Disable Date Range</h2>
+            <ion-datetime show-adjacent-days="true" id="dateRange" value="2021-10-01"></ion-datetime>
+          </div>
+
+          <div class="grid-item">
+            <h2>Disable Month</h2>
+            <ion-datetime show-adjacent-days="true" id="month" value="2021-10-01"></ion-datetime>
+          </div>
+
+          <div class="grid-item">
+            <h2>Change firstDayOfWeek</h2>
+            <ion-datetime
+              show-adjacent-days="true"
+              id="firstDayOfWeek"
+              first-day-of-week="1"
+              value="2022-05-03"
+            ></ion-datetime>
+            <button onclick="increase()">Increase firstDayOfWeek</button>
+            <div>
+              <span>FirstDayOfWeek: <span id="start-of-week">1</span></span>
+            </div>
+          </div>
+        </div>
+        <div>
+          <label for="presentation">Presentation</label>
+          <select id="presentation" onchange="changePresentation(event)">
+            <option value="date-time" selected>date-time</option>
+            <option value="time-date">time-date</option>
+            <option value="date">date</option>
+            <option value="time">time</option>
+          </select>
+          <label for="size">Size</label>
+          <select id="size" onchange="changeSize(event)">
+            <option value="fixed" selected>fixed</option>
+            <option value="cover">cover</option>
+          </select>
+          <br /><br />
+          <ion-datetime show-adjacent-days="true" id="display" value="2022-02-22T16:30:00"></ion-datetime>
+        </div>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const customDatetime = document.querySelector('#custom-calendar-days');
+
+      // Mock the current day to always have the same screenshots
+      const mockToday = '2023-06-10T16:22';
+      Date = class extends Date {
+        constructor(...args) {
+          if (args.length === 0) {
+            super(mockToday);
+          } else {
+            super(...args);
+          }
+        }
+      };
+
+      customDatetime.highlightedDates = [
+        {
+          date: '2023-06-02',
+          textColor: 'purple',
+          backgroundColor: 'pink',
+        },
+        {
+          date: '2023-06-04',
+          textColor: 'firebrick',
+          backgroundColor: 'salmon',
+        },
+        {
+          date: '2023-06-06',
+          textColor: 'blue',
+          backgroundColor: 'lightblue',
+        },
+      ];
+
+      customDatetime.isDateEnabled = (date) => {
+        if (date === '2023-06-22') {
+          return false;
+        }
+
+        return true;
+      };
+
+      const specificDateDisabled = document.querySelector('#specificDate');
+      specificDateDisabled.isDateEnabled = (dateIsoString) => {
+        const date = new Date(dateIsoString);
+        // Disables October 10, 2021.
+        if (date.getUTCDate() === 10 && date.getUTCMonth() === 9 && date.getUTCFullYear() === 2021) {
+          return false;
+        }
+        return true;
+      };
+
+      const weekendsDisabled = document.querySelector('#weekends');
+      weekendsDisabled.isDateEnabled = (dateIsoString) => {
+        const date = new Date(dateIsoString);
+        // Disables Sunday and Saturday
+        if (date.getUTCDay() === 0 || date.getUTCDay() === 6) {
+          return false;
+        }
+        return true;
+      };
+
+      const dateRangeDisabled = document.querySelector('#dateRange');
+      dateRangeDisabled.isDateEnabled = (dateIsoString) => {
+        const date = new Date(dateIsoString);
+        // Disables dates between October 10, 2021 and October 20, 2021.
+        if (date.getUTCMonth() === 9 && date.getUTCFullYear() === 2021) {
+          if (date.getUTCDate() >= 10 && date.getUTCDate() <= 20) {
+            return false;
+          }
+        }
+        return true;
+      };
+
+      const monthDisabled = document.querySelector('#month');
+      monthDisabled.isDateEnabled = (dateIsoString) => {
+        const date = new Date(dateIsoString);
+        // Disables October (every year)
+        if (date.getUTCMonth() === 9) {
+          return false;
+        }
+        return true;
+      };
+
+      const firstDayOfWeek = document.querySelector('#firstDayOfWeek');
+      function increase() {
+        firstDayOfWeek.firstDayOfWeek = firstDayOfWeek.firstDayOfWeek + 1;
+
+        const span = document.getElementById('start-of-week');
+        span.innerText = firstDayOfWeek.firstDayOfWeek;
+      }
+
+      const display = document.querySelector('#display');
+
+      const mutationObserver = new MutationObserver(() => {
+        window.dispatchEvent(new CustomEvent('ionWorkingPartsDidChange'));
+      });
+
+      const initCalendarMonthChangeObserver = async () => {
+        if (!display.componentOnReady) return;
+        await display.componentOnReady();
+
+        // We have to requestAnimationFrame to allow the display to render completely.
+        requestAnimationFrame(() => {
+          const calendarBody = display.shadowRoot.querySelector('.calendar-body');
+          if (calendarBody) {
+            mutationObserver.observe(calendarBody, {
+              childList: true,
+              subtree: true,
+            });
+          }
+        });
+      };
+
+      const changePresentation = (ev) => {
+        mutationObserver.disconnect();
+        display.presentation = ev.target.value;
+        initCalendarMonthChangeObserver();
+      };
+
+      const changeSize = (ev) => {
+        display.size = ev.target.value;
+      };
+
+      initCalendarMonthChangeObserver();
+    </script>
+  </body>
+</html>
diff --git a/core/src/components/datetime/utils/data.ts b/core/src/components/datetime/utils/data.ts
index ffeb3600f12..bd6f328752e 100644
--- a/core/src/components/datetime/utils/data.ts
+++ b/core/src/components/datetime/utils/data.ts
@@ -102,8 +102,16 @@ export const getDaysOfWeek = (locale: string, mode: Mode, firstDayOfWeek = 0) =>
  * the firstDayOfWeek value (Sunday by default)
  * using null values.
  */
-export const getDaysOfMonth = (month: number, year: number, firstDayOfWeek: number) => {
+export const getDaysOfMonth = (month: number, year: number, firstDayOfWeek: number, showAdjacentDays = false) => {
   const numDays = getNumDaysInMonth(month, year);
+  let previousNumDays: number; //previous month number of days
+  if (month === 1) {
+    // If the current month is January, the previous month should be December of the previous year.
+    previousNumDays = getNumDaysInMonth(12, year - 1);
+  } else {
+    // Otherwise, the previous month should be the current month - 1 of the same year.
+    previousNumDays = getNumDaysInMonth(month - 1, year);
+  }
   const firstOfMonth = new Date(`${month}/1/${year}`).getDay();
 
   /**
@@ -128,13 +136,40 @@ export const getDaysOfMonth = (month: number, year: number, firstDayOfWeek: numb
   const offset =
     firstOfMonth >= firstDayOfWeek ? firstOfMonth - (firstDayOfWeek + 1) : 6 - (firstDayOfWeek - firstOfMonth);
 
-  let days = [];
+  let days: (
+    | {
+        day: number;
+        dayOfWeek: number;
+        isAdjacentDay: boolean;
+      }
+    | {
+        day: null;
+        dayOfWeek: null;
+        isAdjacentDay: boolean;
+      }
+  )[] = [];
   for (let i = 1; i <= numDays; i++) {
-    days.push({ day: i, dayOfWeek: (offset + i) % 7 });
+    days.push({ day: i, dayOfWeek: (offset + i) % 7, isAdjacentDay: false });
   }
 
-  for (let i = 0; i <= offset; i++) {
-    days = [{ day: null, dayOfWeek: null }, ...days];
+  if (showAdjacentDays) {
+    for (let i = 0; i <= offset; i++) {
+      // Using offset create previous month adjacent day, starting from last day
+      days = [{ day: previousNumDays - i, dayOfWeek: (previousNumDays - i) % 7, isAdjacentDay: true }, ...days];
+    }
+
+    // Calculate positiveOffset
+    // The calendar will display 42 days (6 rows of 7 columns)
+    // Knowing this the offset is 41 (we start at index 0)
+    // minus (the previous offset + the current month days)
+    const positiveOffset = 41 - (numDays + offset);
+    for (let i = 0; i < positiveOffset; i++) {
+      days.push({ day: i + 1, dayOfWeek: (numDays + offset + i) % 7, isAdjacentDay: true });
+    }
+  } else {
+    for (let i = 0; i <= offset; i++) {
+      days = [{ day: null, dayOfWeek: null, isAdjacentDay: false }, ...days];
+    }
   }
 
   return days;
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index cfa828e322c..35b15c5f64f 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -634,7 +634,7 @@ Set `scrollEvents` to `true` to enable.
 
 
 @ProxyCmp({
-  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'formatOptions', 'highlightedDates', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
+  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'formatOptions', 'highlightedDates', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showAdjacentDays', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
   methods: ['confirm', 'reset', 'cancel']
 })
 @Component({
@@ -642,7 +642,7 @@ Set `scrollEvents` to `true` to enable.
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'formatOptions', 'highlightedDates', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
+  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'formatOptions', 'highlightedDates', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showAdjacentDays', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
 })
 export class IonDatetime {
   protected el: HTMLIonDatetimeElement;
diff --git a/packages/angular/standalone/src/directives/datetime.ts b/packages/angular/standalone/src/directives/datetime.ts
index ee35d079e6c..4217239ce19 100644
--- a/packages/angular/standalone/src/directives/datetime.ts
+++ b/packages/angular/standalone/src/directives/datetime.ts
@@ -40,6 +40,7 @@ const DATETIME_INPUTS = [
   'preferWheel',
   'presentation',
   'readonly',
+  'showAdjacentDays',
   'showClearButton',
   'showDefaultButtons',
   'showDefaultTimeLabel',
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 97270298bb4..9cb1d0db162 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -309,6 +309,7 @@ export const IonDatetime: StencilVueComponent<JSX.IonDatetime, JSX.IonDatetime["
   'formatOptions',
   'readonly',
   'isDateEnabled',
+  'showAdjacentDays',
   'min',
   'max',
   'presentation',