From 90785c02ad56abc55b4e0d43bdc2922be41f6273 Mon Sep 17 00:00:00 2001
From: ramprakash <connect2ramprakash@gmail.com>
Date: Sat, 22 Jan 2022 10:56:52 +0530
Subject: [PATCH 1/3] fix(material/datepicker): content overflowing when large
 custom header is provided

Fixes a bug in the Angular Material `datepicker` component where the content of the datepicker is overflowing outside when a custom header with large height is provided. This is because of the fixed height provided is not enough with custom headers, so added a new class which will set the height of calendar to auto when custom header is given.

Fixes #20459
---
 src/material/datepicker/datepicker-content.html | 1 +
 src/material/datepicker/datepicker-content.scss | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/src/material/datepicker/datepicker-content.html b/src/material/datepicker/datepicker-content.html
index 97109f1f59df..b35f15ff0b45 100644
--- a/src/material/datepicker/datepicker-content.html
+++ b/src/material/datepicker/datepicker-content.html
@@ -1,6 +1,7 @@
 <div
   cdkTrapFocus
   class="mat-datepicker-content-container"
+  [ngClass]="{'mat-datepicker-custom-header' : datepicker.calendarHeaderComponent}"
   [class.mat-datepicker-content-container-with-actions]="_actionsPortal">
   <mat-calendar
     [id]="datepicker.id"
diff --git a/src/material/datepicker/datepicker-content.scss b/src/material/datepicker/datepicker-content.scss
index 4ffd85714503..4763b0c49809 100644
--- a/src/material/datepicker/datepicker-content.scss
+++ b/src/material/datepicker/datepicker-content.scss
@@ -5,6 +5,7 @@ $non-touch-calendar-width:
 // Based on the natural height of the calendar in a month with 6 rows of dates
 // (largest the calendar will get).
 $non-touch-calendar-height: 354px;
+$non-touch-custom-header-calendar-height: auto;
 
 // Ideally the calendar would have a constant aspect ratio, no matter its size, and we would base
 // these measurements off the aspect ratio. Unfortunately, the aspect ratio does change a little as
@@ -31,6 +32,10 @@ $touch-max-height: 788px;
     height: $non-touch-calendar-height;
   }
 
+  .mat-datepicker-custom-header .mat-calendar {
+    height: $non-touch-custom-header-calendar-height;
+  }
+
   // Note that this selector doesn't technically have to be nested, but we want the slightly
   // higher specificity, or it can be overridden based on the CSS insertion order (see #21043).
   .mat-datepicker-close-button {

From 6d428d3cd58ba6688b79785a75d90a8d421b7aa8 Mon Sep 17 00:00:00 2001
From: ramprakash <connect2ramprakash@gmail.com>
Date: Sat, 22 Jan 2022 11:39:11 +0530
Subject: [PATCH 2/3] fix(material/datepicker): content overflowing when large
 custom header is provided

    Fixes a bug in the Angular Material `datepicker` component where the content of the datepicker is overflowing outside when a custom header with large height is provided. This commit adds comments for the changes done for this bug.

    Fixes #20459
---
 src/material/datepicker/datepicker-content.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/material/datepicker/datepicker-content.scss b/src/material/datepicker/datepicker-content.scss
index 4763b0c49809..ff3bbeff54ba 100644
--- a/src/material/datepicker/datepicker-content.scss
+++ b/src/material/datepicker/datepicker-content.scss
@@ -5,6 +5,9 @@ $non-touch-calendar-width:
 // Based on the natural height of the calendar in a month with 6 rows of dates
 // (largest the calendar will get).
 $non-touch-calendar-height: 354px;
+
+// Height should be auto, when the custom header is provided.
+// This will prevent the content from overflowing.
 $non-touch-custom-header-calendar-height: auto;
 
 // Ideally the calendar would have a constant aspect ratio, no matter its size, and we would base
@@ -32,6 +35,7 @@ $touch-max-height: 788px;
     height: $non-touch-calendar-height;
   }
 
+  // Override mat-calendar's height when custom header is provided
   .mat-datepicker-custom-header .mat-calendar {
     height: $non-touch-custom-header-calendar-height;
   }

From a1c51b87700c6c0ffef3160c327058683b3dfcff Mon Sep 17 00:00:00 2001
From: ramprakash <connect2ramprakash@gmail.com>
Date: Wed, 26 Jan 2022 22:20:13 +0530
Subject: [PATCH 3/3] fix(material/datepicker): content overflowing when large
 custom header is provided

Fixes a bug in the Angular Material `datepicker` component where the content of the datepicker is overflowing outside when a custom header with large height is provided. This commit updates the html to use plain class instead of ngClass and removes the $non-touch-custom-header-calendar-height scss variable.

Fixes #20459
---
 src/material/datepicker/datepicker-content.html |  2 +-
 src/material/datepicker/datepicker-content.scss | 10 ++++------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/material/datepicker/datepicker-content.html b/src/material/datepicker/datepicker-content.html
index b35f15ff0b45..182377885cf7 100644
--- a/src/material/datepicker/datepicker-content.html
+++ b/src/material/datepicker/datepicker-content.html
@@ -1,7 +1,7 @@
 <div
   cdkTrapFocus
   class="mat-datepicker-content-container"
-  [ngClass]="{'mat-datepicker-custom-header' : datepicker.calendarHeaderComponent}"
+  [class.mat-datepicker-content-container-with-custom-header]="datepicker.calendarHeaderComponent"
   [class.mat-datepicker-content-container-with-actions]="_actionsPortal">
   <mat-calendar
     [id]="datepicker.id"
diff --git a/src/material/datepicker/datepicker-content.scss b/src/material/datepicker/datepicker-content.scss
index ff3bbeff54ba..cd93bd44a7e9 100644
--- a/src/material/datepicker/datepicker-content.scss
+++ b/src/material/datepicker/datepicker-content.scss
@@ -6,10 +6,6 @@ $non-touch-calendar-width:
 // (largest the calendar will get).
 $non-touch-calendar-height: 354px;
 
-// Height should be auto, when the custom header is provided.
-// This will prevent the content from overflowing.
-$non-touch-custom-header-calendar-height: auto;
-
 // Ideally the calendar would have a constant aspect ratio, no matter its size, and we would base
 // these measurements off the aspect ratio. Unfortunately, the aspect ratio does change a little as
 // the calendar grows, since some of the elements have pixel-based sizes. These numbers have been
@@ -36,8 +32,10 @@ $touch-max-height: 788px;
   }
 
   // Override mat-calendar's height when custom header is provided
-  .mat-datepicker-custom-header .mat-calendar {
-    height: $non-touch-custom-header-calendar-height;
+  // Height should be auto, when the custom header is provided.
+  // This will prevent the content from overflowing.
+  .mat-datepicker-content-container-with-custom-header .mat-calendar {
+    height: auto;
   }
 
   // Note that this selector doesn't technically have to be nested, but we want the slightly