@syncfusion/ej2-calendars 22.2.11 → 23.1.36

package/styles/calendar/bootstrap-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap-dark.scss';
 @import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
 @import 'bootstrap-dark-definition.scss';
 @import 'icons/bootstrap-dark.scss';

package/styles/calendar/bootstrap.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap.scss';
 @import 'ej2-buttons/styles/button/bootstrap-definition.scss';
 @import 'bootstrap-definition.scss';
 @import 'icons/bootstrap.scss';

package/styles/calendar/bootstrap4.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap4.scss';
 @import 'ej2-buttons/styles/button/bootstrap4-definition.scss';
 @import 'bootstrap4-definition.scss';
 @import 'icons/bootstrap4.scss';

package/styles/calendar/bootstrap5-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
 @import 'ej2-buttons/styles/button/bootstrap5-dark-definition.scss';
 @import 'bootstrap5-dark-definition.scss';
 @import 'icons/bootstrap5-dark.scss';

package/styles/calendar/bootstrap5.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5.scss';
 @import 'ej2-buttons/styles/button/bootstrap5-definition.scss';
 @import 'bootstrap5-definition.scss';
 @import 'icons/bootstrap5.scss';

package/styles/calendar/fabric-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'ej2-base/styles/definition/fabric-dark.scss';
 @import 'ej2-buttons/styles/button/fabric-dark-definition.scss';
 @import 'fabric-dark-definition.scss';
 @import 'icons/fabric-dark.scss';

package/styles/calendar/fabric.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-definition.scss';
+@import 'ej2-base/styles/definition/fabric.scss';
 @import 'ej2-buttons/styles/button/fabric-definition.scss';
 @import 'fabric-definition.scss';
 @import 'icons/fabric.scss';

package/styles/calendar/fluent-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'ej2-base/styles/definition/fluent-dark.scss';
 @import 'ej2-buttons/styles/button/fluent-dark-definition.scss';
 @import 'fluent-dark-definition.scss';
 @import 'icons/fluent-dark.scss';

package/styles/calendar/fluent.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-definition.scss';
+@import 'ej2-base/styles/definition/fluent.scss';
 @import 'ej2-buttons/styles/button/fluent-definition.scss';
 @import 'fluent-definition.scss';
 @import 'icons/fluent.scss';

package/styles/calendar/highcontrast-light.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast-light.scss';
 @import 'ej2-buttons/styles/button/highcontrast-light-definition.scss';
 @import 'highcontrast-light-definition.scss';
 @import 'icons/highcontrast-light.scss';

package/styles/calendar/highcontrast.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast.scss';
 @import 'ej2-buttons/styles/button/highcontrast-definition.scss';
 @import 'highcontrast-definition.scss';
 @import 'icons/highcontrast.scss';

package/styles/calendar/material-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 /*! component icons */
 .e-calendar .e-header .e-date-icon-prev::before {
   content: "\e910";

package/styles/calendar/material-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material-dark-definition.scss';
+@import 'ej2-base/styles/definition/material-dark.scss';
 @import 'ej2-buttons/styles/button/material-dark-definition.scss';
 @import 'material-dark-definition.scss';
 @import 'icons/material-dark.scss';

package/styles/calendar/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
 /*! calendar material theme variables */
 /*! component icons */
 .e-calendar .e-header .e-date-icon-prev::before {

package/styles/calendar/material.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material-definition.scss';
+@import 'ej2-base/styles/definition/material.scss';
 @import 'ej2-buttons/styles/button/material-definition.scss';
 @import 'material-definition.scss';
 @import 'icons/material.scss';

package/styles/calendar/material3-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/calendar/material3-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+
 
 @import 'ej2-buttons/styles/button/material3-dark-definition.scss';
 @import 'material3-dark-definition.scss';

package/styles/calendar/material3.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/calendar/material3.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-definition.scss';
+
 
 @import 'ej2-buttons/styles/button/material3-definition.scss';
 @import 'material3-definition.scss';

package/styles/calendar/tailwind-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /*! calendar tailwind theme variables */
 /*! component icons */
 .e-calendar .e-header .e-date-icon-prev::before {

package/styles/calendar/tailwind-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/tailwind-dark-definition.scss';
+@import 'ej2-base/styles/definition/tailwind-dark.scss';
 @import 'ej2-buttons/styles/button/tailwind-dark-definition.scss';
 @import 'tailwind-dark-definition.scss';
 @import 'icons/tailwind-dark.scss';

package/styles/calendar/tailwind.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /*! calendar tailwind theme variables */
 /*! component icons */
 .e-calendar .e-header .e-date-icon-prev::before {

package/styles/calendar/tailwind.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/tailwind-definition.scss';
+@import 'ej2-base/styles/definition/tailwind.scss';
 @import 'ej2-buttons/styles/button/tailwind-definition.scss';
 @import 'tailwind-definition.scss';
 @import 'icons/tailwind.scss';

package/styles/datepicker/_bootstrap-dark-definition.scss

@@ -38,7 +38,7 @@ $modal-month-line-height: 32px !default;
 $modal-portrait-year-font-size: 4vw !default;
 $modal-portrait-header-year-margin: 12vh 0 0 0 !default;
 $modal-portrait-month-font-size: 5vw !default;
-$modal-portrait-header-padding: 2vh 2vw !default;
+$modal-portrait-header-padding: 2vh 6vw !default;
 $modal-portrait-month-header-padding: 2vh 2vw !default;
 $modal-month-header-line-height: 5vh !default;
 $modal-month-header-title-line-height: inherit !default;
@@ -53,7 +53,7 @@ $modal-portrait-cancel-icon-float-style: left !default;
 $modal-portrait-cancel-icon-padding: 2px !default;
 $modal-portrait-prev-icon-margin: 75vw !default;
 $modal-portrait-next-icon-margin: 0 !default;
-$modal-portrait-header-title-margin: 18vw !default;
+$modal-portrait-header-title-margin: 22vw !default;
 $modal-portrait-header-title-position: absolute !default;
 $modal-portrait-header-title-text: center !default;
 $modal-portrait-header-title-width: 50vw !default;
@@ -67,7 +67,7 @@ $modal-portrait-footer-display-style: none !default;
 // Touch modal popup styles
 $modal-portrait-header-height: 20vh !default;
 $modal-portrait-header-month-height: 10vh !default;
-$modal-portrait-calendar-container-height: 85vh !default;
+$modal-portrait-calendar-container-height: 79vh !default;
 $modal-portrait-calendar-min-height: 100% !default;
 $modal-portrait-calendar-min-width: 100% !default;
 $modal-portrait-calendar-height: 100% !default;
@@ -89,9 +89,9 @@ $modal-landscape-prev-icon-margin: 80vw !default;
 $modal-year-landscape-font-size: 3vw !default;
 $modal-month-landscape-font-size: 4vw !default;
 $datepicker-modal-landscape-overflow: visible !default;
-$modal-month-landscape-title-line-height: 8vh !default;
+$modal-month-landscape-title-line-height: 12vh !default;
 
 // tablet device style changes for modal popup
-$modal-tablet-font-size: 24px !default;
+$modal-tablet-font-size: 18px !default;
 $modal-tablet-content-dimension: 64px !default;
 $modal-tablet-table-header-height: 48px !default;

package/styles/datepicker/_bootstrap-definition.scss

@@ -37,7 +37,7 @@ $modal-month-line-height: 32px !default;
 $modal-portrait-year-font-size: 4vw !default;
 $modal-portrait-header-year-margin: 12vh 0 0 0 !default;
 $modal-portrait-month-font-size: 5vw !default;
-$modal-portrait-header-padding: 2vh 2vw !default;
+$modal-portrait-header-padding: 2vh 6vw !default;
 $modal-portrait-month-header-padding: 2vh 2vw !default;
 $modal-month-header-line-height: 5vh !default;
 $modal-month-header-title-line-height: inherit !default;
@@ -54,7 +54,7 @@ $modal-portrait-cancel-icon-float-style: left !default;
 $modal-portrait-cancel-icon-padding: 2px !default;
 $modal-portrait-prev-icon-margin: 75vw !default;
 $modal-portrait-next-icon-margin: 0 !default;
-$modal-portrait-header-title-margin: 18vw !default;
+$modal-portrait-header-title-margin: 22vw !default;
 $modal-portrait-header-title-position: absolute !default;
 $modal-portrait-header-title-text: center !default;
 $modal-portrait-header-title-width: 50vw !default;
@@ -69,7 +69,7 @@ $modal-portrait-footer-display-style: none !default;
 // Touch modal popup styles
 $modal-portrait-header-height: 20vh !default;
 $modal-portrait-header-month-height: 10vh !default;
-$modal-portrait-calendar-container-height: 85vh !default;
+$modal-portrait-calendar-container-height: 79vh !default;
 $modal-portrait-calendar-min-height: 100% !default;
 $modal-portrait-calendar-min-width: 100% !default;
 $modal-portrait-calendar-height: 100% !default;
@@ -88,9 +88,9 @@ $modal-landscape-prev-icon-margin: 80vw !default;
 $modal-year-landscape-font-size: 3vw !default;
 $modal-month-landscape-font-size: 4vw !default;
 $datepicker-modal-landscape-overflow: visible !default;
-$modal-month-landscape-title-line-height: 8vh !default;
+$modal-month-landscape-title-line-height: 12vh !default;
 
 // tablet device style changes for modal popup
-$modal-tablet-font-size: 24px !default;
+$modal-tablet-font-size: 18px !default;
 $modal-tablet-content-dimension: 64px !default;
 $modal-tablet-table-header-height: 48px !default;

package/styles/datepicker/_bootstrap4-definition.scss

@@ -43,7 +43,7 @@ $modal-month-line-height: 32px !default;
 $modal-portrait-year-font-size: 4vw !default;
 $modal-portrait-header-year-margin: 12vh 0 0 0 !default;
 $modal-portrait-month-font-size: 5vw !default;
-$modal-portrait-header-padding: 2vh 2vw !default;
+$modal-portrait-header-padding: 2vh 6vw !default;
 $modal-portrait-month-header-padding: 2vh 2vw !default;
 $modal-portrait-month-header-vertical-align: middle !default;
 $modal-month-header-line-height: 5vh !default;
@@ -59,7 +59,7 @@ $modal-portrait-cancel-icon-float-style: left !default;
 $modal-portrait-cancel-icon-padding: 2px !default;
 $modal-portrait-prev-icon-margin: 75vw !default;
 $modal-portrait-next-icon-margin: 0 !default;
-$modal-portrait-header-title-margin: 18vw !default;
+$modal-portrait-header-title-margin: 22vw !default;
 $modal-portrait-header-title-position: absolute !default;
 $modal-portrait-header-title-text: center !default;
 $modal-portrait-header-title-width: 50vw !default;
@@ -74,7 +74,7 @@ $modal-portrait-footer-display-style: none !default;
 // Touch modal popup styles
 $modal-portrait-header-height: 20vh !default;
 $modal-portrait-header-month-height: 10vh !default;
-$modal-portrait-calendar-container-height: 85vh !default;
+$modal-portrait-calendar-container-height: 79vh !default;
 $modal-portrait-calendar-min-height: 100% !default;
 $modal-portrait-calendar-min-width: 100% !default;
 $modal-portrait-calendar-height: 100% !default;
@@ -93,9 +93,9 @@ $modal-landscape-prev-icon-margin: 80vw !default;
 $modal-year-landscape-font-size: 3vw !default;
 $modal-month-landscape-font-size: 4vw !default;
 $datepicker-modal-landscape-overflow: visible !default;
-$modal-month-landscape-title-line-height: 8vh !default;
+$modal-month-landscape-title-line-height: 12vh !default;
 
 // tablet device style changes for modal popup
-$modal-tablet-font-size: 24px !default;
+$modal-tablet-font-size: 18px !default;
 $modal-tablet-content-dimension: 64px !default;
 $modal-tablet-table-header-height: 48px !default;

package/styles/datepicker/_bootstrap5-definition.scss

@@ -47,10 +47,10 @@ $modal-month-line-height: 32px !default;
 $modal-portrait-year-font-size: 4vw !default;
 $modal-portrait-header-year-margin: 12vh 0 0 0 !default;
 $modal-portrait-month-font-size: 5vw !default;
-$modal-portrait-header-padding: 2vh 2vw !default;
+$modal-portrait-header-padding: 2vh 6vw !default;
 $modal-portrait-month-header-padding: 2vh 2vw !default;
 $modal-portrait-month-header-vertical-align: middle !default;
-$modal-month-header-line-height: 5vh !default;
+$modal-month-header-line-height: 6vh !default;
 $modal-month-header-title-line-height: inherit !default;
 
 $modal-header-border-style: solid !default;
@@ -62,7 +62,7 @@ $modal-portrait-cancel-icon-float-style: left !default;
 $modal-portrait-cancel-icon-padding: 2px !default;
 $modal-portrait-prev-icon-margin: 75vw !default;
 $modal-portrait-next-icon-margin: 0 !default;
-$modal-portrait-header-title-margin: 18vw !default;
+$modal-portrait-header-title-margin: 22vw !default;
 $modal-portrait-header-title-position: absolute !default;
 $modal-portrait-header-title-text: center !default;
 $modal-portrait-header-title-width: 50vw !default;
@@ -78,7 +78,7 @@ $modal-portrait-icon-float: none !default;
 // Touch modal popup styles
 $modal-portrait-header-height: 20vh !default;
 $modal-portrait-header-month-height: 10vh !default;
-$modal-portrait-calendar-container-height: 85vh !default;
+$modal-portrait-calendar-container-height: 79vh !default;
 $modal-portrait-calendar-min-height: 100% !default;
 $modal-portrait-calendar-min-width: 100% !default;
 $modal-portrait-calendar-height: 100% !default;
@@ -97,10 +97,10 @@ $modal-landscape-prev-icon-margin: 80vw !default;
 $modal-year-landscape-font-size: 3vw !default;
 $modal-month-landscape-font-size: 4vw !default;
 $datepicker-modal-landscape-overflow: visible !default;
-$modal-month-landscape-title-line-height: 8vh !default;
+$modal-month-landscape-title-line-height: 12vh !default;
 
 // tablet device style changes for modal popup
-$modal-tablet-font-size: 24px !default;
+$modal-tablet-font-size: 18px !default;
 $modal-tablet-content-dimension: 64px !default;
 $modal-tablet-table-header-height: 48px !default;
 

package/styles/datepicker/_fabric-dark-definition.scss

@@ -38,7 +38,7 @@ $modal-month-line-height: 32px !default;
 $modal-portrait-year-font-size: 4vw !default;
 $modal-portrait-header-year-margin: 12vh 0 0 0 !default;
 $modal-portrait-month-font-size: 5vw !default;
-$modal-portrait-header-padding: 2vh 2vw !default;
+$modal-portrait-header-padding: 2vh 6vw !default;
 $modal-portrait-month-header-padding: 2vh 2vw !default;
 $modal-portrait-month-header-vertical-align: middle !default;
 $modal-month-header-line-height: 5vh !default;
@@ -69,7 +69,7 @@ $modal-portrait-icon-float: right !default;
 // Touch modal popup styles
 $modal-portrait-header-height: 20vh !default;
 $modal-portrait-header-month-height: 10vh !default;
-$modal-portrait-calendar-container-height: 85vh !default;
+$modal-portrait-calendar-container-height: 79vh !default;
 $modal-portrait-calendar-min-height: 100% !default;
 $modal-portrait-calendar-min-width: 100% !default;
 $modal-portrait-calendar-height: 100% !default;
@@ -88,10 +88,10 @@ $modal-landscape-prev-icon-margin: $modal-portrait-prev-icon-margin !default;
 $modal-year-landscape-font-size: 3vw !default;
 $modal-month-landscape-font-size: 4vw !default;
 $datepicker-modal-landscape-overflow: visible !default;
-$modal-month-landscape-title-line-height: 8vh !default;
+$modal-month-landscape-title-line-height: 12vh !default;
 
 // tablet device style changes for modal popup
-$modal-tablet-font-size: 24px !default;
+$modal-tablet-font-size: 18px !default;
 $modal-tablet-content-dimension: 64px !default;
 $modal-tablet-table-header-height: 48px !default;
 

package/styles/datepicker/_fabric-definition.scss

@@ -34,10 +34,10 @@ $modal-month-font-weight: 500 !default;
 $modal-month-line-height: 32px !default;
 
 // modal dialog dimensions and styles
-$modal-portrait-year-font-size: 4vw !default;
+$modal-portrait-year-font-size: 3vw !default;
 $modal-portrait-header-year-margin: 12vh 0 0 0 !default;
 $modal-portrait-month-font-size: 5vw !default;
-$modal-portrait-header-padding: 2vh 2vw !default;
+$modal-portrait-header-padding: 2vh 6vw !default;
 $modal-portrait-month-header-padding: 2vh 2vw !default;
 $modal-portrait-month-header-vertical-align: middle !default;
 $modal-month-header-line-height: 5vh !default;
@@ -68,7 +68,7 @@ $modal-portrait-icon-float: right !default;
 // Touch modal popup styles
 $modal-portrait-header-height: 20vh !default;
 $modal-portrait-header-month-height: 10vh !default;
-$modal-portrait-calendar-container-height: 85vh !default;
+$modal-portrait-calendar-container-height: 79vh !default;
 $modal-portrait-calendar-min-height: 100% !default;
 $modal-portrait-calendar-min-width: 100% !default;
 $modal-portrait-calendar-height: 100% !default;
@@ -85,11 +85,11 @@ $modal-landscape-calendar-content-big-height: 65vh !default;
 $modal-landscape-header-year-margin: 12vh 0 0 0 !default;
 $modal-landscape-prev-icon-margin: $modal-portrait-prev-icon-margin !default;
 $modal-year-landscape-font-size: 3vw !default;
-$modal-month-landscape-font-size: 4vw !default;
+$modal-month-landscape-font-size: 3vw !default;
 $datepicker-modal-landscape-overflow: visible !default;
-$modal-month-landscape-title-line-height: 8vh !default;
+$modal-month-landscape-title-line-height: 12vh !default;
 
 // tablet device style changes for modal popup
-$modal-tablet-font-size: 24px !default;
+$modal-tablet-font-size: 18px !default;
 $modal-tablet-content-dimension: 64px !default;
 $modal-tablet-table-header-height: 48px !default;

package/styles/datepicker/_fluent-definition.scss

@@ -47,7 +47,7 @@ $modal-month-line-height: 28px !default;
 $modal-portrait-year-font-size: 4vw !default;
 $modal-portrait-header-year-margin: 12vh 0 0 0 !default;
 $modal-portrait-month-font-size: 5vw !default;
-$modal-portrait-header-padding: 2vh 2vw !default;
+$modal-portrait-header-padding: 2vh 6vw !default;
 $modal-portrait-month-header-padding: 2vh 2vw !default;
 $modal-portrait-month-header-vertical-align: middle !default;
 $modal-month-header-line-height: 5vh !default;
@@ -78,7 +78,7 @@ $modal-portrait-icon-float: right !default;
 // Touch modal popup styles
 $modal-portrait-header-height: 20vh !default;
 $modal-portrait-header-month-height: 10vh !default;
-$modal-portrait-calendar-container-height: 85vh !default;
+$modal-portrait-calendar-container-height: 79vh !default;
 $modal-portrait-calendar-min-height: 100% !default;
 $modal-portrait-calendar-min-width: 100% !default;
 $modal-portrait-calendar-height: 100% !default;
@@ -97,10 +97,10 @@ $modal-landscape-prev-icon-margin: $modal-portrait-prev-icon-margin !default;
 $modal-year-landscape-font-size: 3vw !default;
 $modal-month-landscape-font-size: 4vw !default;
 $datepicker-modal-landscape-overflow: visible !default;
-$modal-month-landscape-title-line-height: 8vh !default;
+$modal-month-landscape-title-line-height: 12vh !default;
 
 // tablet device style changes for modal popup
-$modal-tablet-font-size: 24px !default;
+$modal-tablet-font-size: 18px !default;
 $modal-tablet-content-dimension: 64px !default;
 $modal-tablet-table-header-height: 48px !default;
 

package/styles/datepicker/_fusionnew-definition.scss

@@ -47,7 +47,7 @@ $modal-month-line-height: 32px !default;
 $modal-portrait-year-font-size: 4vw !default;
 $modal-portrait-header-year-margin: 12vh 0 0 0 !default;
 $modal-portrait-month-font-size: 5vw !default;
-$modal-portrait-header-padding: 2vh 2vw !default;
+$modal-portrait-header-padding: 2vh 6vw !default;
 $modal-portrait-month-header-padding: 2vh 2vw !default;
 $modal-portrait-month-header-vertical-align: middle !default;
 $modal-month-header-line-height: 5vh !default;
@@ -62,7 +62,7 @@ $modal-portrait-cancel-icon-float-style: left !default;
 $modal-portrait-cancel-icon-padding: 2px !default;
 $modal-portrait-prev-icon-margin: 75vw !default;
 $modal-portrait-next-icon-margin: 0 !default;
-$modal-portrait-header-title-margin: 18vw !default;
+$modal-portrait-header-title-margin: 22vw !default;
 $modal-portrait-header-title-position: absolute !default;
 $modal-portrait-header-title-text: center !default;
 $modal-portrait-header-title-width: 50vw !default;
@@ -78,7 +78,7 @@ $modal-portrait-icon-float: none !default;
 // Touch modal popup styles
 $modal-portrait-header-height: 20vh !default;
 $modal-portrait-header-month-height: 10vh !default;
-$modal-portrait-calendar-container-height: 85vh !default;
+$modal-portrait-calendar-container-height: 79vh !default;
 $modal-portrait-calendar-min-height: 100% !default;
 $modal-portrait-calendar-min-width: 100% !default;
 $modal-portrait-calendar-height: 100% !default;
@@ -97,10 +97,10 @@ $modal-landscape-prev-icon-margin: 80vw !default;
 $modal-year-landscape-font-size: 3vw !default;
 $modal-month-landscape-font-size: 4vw !default;
 $datepicker-modal-landscape-overflow: visible !default;
-$modal-month-landscape-title-line-height: 8vh !default;
+$modal-month-landscape-title-line-height: 12vh !default;
 
 // tablet device style changes for modal popup
-$modal-tablet-font-size: 24px !default;
+$modal-tablet-font-size: 18px !default;
 $modal-tablet-content-dimension: 64px !default;
 $modal-tablet-table-header-height: 48px !default;
 

package/styles/datepicker/_highcontrast-definition.scss

@@ -38,7 +38,7 @@ $modal-month-line-height: 32px !default;
 $modal-portrait-year-font-size: 4vw !default;
 $modal-portrait-header-year-margin: 12vh 0 0 0 !default;
 $modal-portrait-month-font-size: 5vw !default;
-$modal-portrait-header-padding: 2vh 2vw !default;
+$modal-portrait-header-padding: 2vh 6vw !default;
 $modal-portrait-month-header-padding: 2vh 2vw !default;
 $modal-portrait-month-header-vertical-align: middle !default;
 $modal-month-header-line-height: 5vh !default;
@@ -52,7 +52,7 @@ $modal-portrait-cancel-icon-float-style: left !default;
 $modal-portrait-cancel-icon-padding: 2px !default;
 $modal-portrait-prev-icon-margin: 75vw !default;
 $modal-portrait-next-icon-margin: 0 !default;
-$modal-portrait-header-title-margin: 18vw !default;
+$modal-portrait-header-title-margin: 22vw !default;
 $modal-portrait-header-title-position: absolute !default;
 $modal-portrait-header-title-text: center !default;
 $modal-portrait-header-title-width: 50vw !default;
@@ -69,7 +69,7 @@ $modal-portrait-icon-float: none !default;
 // Touch modal popup styles
 $modal-portrait-header-height: 20vh !default;
 $modal-portrait-header-month-height: 10vh !default;
-$modal-portrait-calendar-container-height: 85vh !default;
+$modal-portrait-calendar-container-height: 79vh !default;
 $modal-portrait-calendar-min-height: 100% !default;
 $modal-portrait-calendar-min-width: 100% !default;
 $modal-portrait-calendar-height: 100% !default;
@@ -88,9 +88,9 @@ $modal-landscape-prev-icon-margin: 82vw !default;
 $modal-year-landscape-font-size: 3vw !default;
 $modal-month-landscape-font-size: 4vw !default;
 $datepicker-modal-landscape-overflow: visible !default;
-$modal-month-landscape-title-line-height: 8vh !default;
+$modal-month-landscape-title-line-height: 12vh !default;
 
 // tablet device style changes for modal popup
-$modal-tablet-font-size: 24px !default;
+$modal-tablet-font-size: 18px !default;
 $modal-tablet-content-dimension: 64px !default;
 $modal-tablet-table-header-height: 48px !default;

package/styles/datepicker/_highcontrast-light-definition.scss

@@ -39,7 +39,7 @@ $modal-month-line-height: 32px !default;
 $modal-portrait-year-font-size: 4vw !default;
 $modal-portrait-header-year-margin: 12vh 0 0 0 !default;
 $modal-portrait-month-font-size: 5vw !default;
-$modal-portrait-header-padding: 2vh 2vw !default;
+$modal-portrait-header-padding: 2vh 6vw !default;
 $modal-portrait-month-header-padding: 2vh 2vw !default;
 $modal-portrait-month-header-vertical-align: middle !default;
 $modal-month-header-line-height: 5vh !default;
@@ -53,7 +53,7 @@ $modal-portrait-cancel-icon-float-style: left !default;
 $modal-portrait-cancel-icon-padding: 2px !default;
 $modal-portrait-prev-icon-margin: 75vw !default;
 $modal-portrait-next-icon-margin: 0 !default;
-$modal-portrait-header-title-margin: 18vw !default;
+$modal-portrait-header-title-margin: 22vw !default;
 $modal-portrait-header-title-position: absolute !default;
 $modal-portrait-header-title-text: center !default;
 $modal-portrait-header-title-width: 50vw !default;
@@ -70,7 +70,7 @@ $modal-portrait-icon-float: none !default;
 // Touch modal popup styles
 $modal-portrait-header-height: 20vh !default;
 $modal-portrait-header-month-height: 10vh !default;
-$modal-portrait-calendar-container-height: 85vh !default;
+$modal-portrait-calendar-container-height: 79vh !default;
 $modal-portrait-calendar-min-height: 100% !default;
 $modal-portrait-calendar-min-width: 100% !default;
 $modal-portrait-calendar-height: 100% !default;
@@ -89,10 +89,10 @@ $modal-landscape-prev-icon-margin: 82vw !default;
 $modal-year-landscape-font-size: 3vw !default;
 $modal-month-landscape-font-size: 4vw !default;
 $datepicker-modal-landscape-overflow: visible !default;
-$modal-month-landscape-title-line-height: 8vh !default;
+$modal-month-landscape-title-line-height: 12vh !default;
 
 // tablet device style changes for modal popup
-$modal-tablet-font-size: 24px !default;
+$modal-tablet-font-size: 18px !default;
 $modal-tablet-content-dimension: 64px !default;
 $modal-tablet-table-header-height: 48px !default;
 

package/styles/datepicker/_layout.scss

@@ -125,6 +125,11 @@
   min-height: 40px;
 }
 
+@media screen and (orientation: landscape) {
+.e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content.e-month td.e-today span.e-day {
+  line-height: $modal-tablet-content-dimension;
+}
+}
 
 .e-datepick-mob-popup-wrap {
   
@@ -138,6 +143,13 @@
       }
     }
 
+    #{if(&, '&', '*')} .e-model-header.e-blazor-device {
+      height: 15vh;
+      .e-popup-close {
+        float: right;
+      }
+    }
+
     #{if(&, '&', '*')} .e-model-header {
       height: $modal-portrait-header-height;
       padding: $modal-portrait-header-padding;
@@ -150,12 +162,19 @@
         color: $modal-portrait-cancel-icon-color;
         float: $modal-portrait-cancel-icon-float-style;
         font-size: $datepicker-bigger-icon-font-size;
-        padding: $modal-portrait-cancel-icon-padding;
         @media (min-device-width: 768px) {
           font-size: $modal-tablet-font-size;
         }
       }
 
+      #{if(&, '&', '*')} .e-btn.e-flat.e-popup-close {
+        background: transparent;
+        border-color: transparent;
+        box-shadow: none;
+        font-weight: 400;
+        padding: 0;
+      }
+
       #{if(&, '&', '*')} .e-today.e-flat.e-primary {
         color: $modal-today-text-color;
         float: $modal-portrait-today-float-style;
@@ -206,12 +225,16 @@
 
         #{if(&, '&', '*')} .e-prev {
           margin-right: $modal-portrait-prev-icon-margin;
+          vertical-align: inherit;
+          height: 35px;
+          width: 35px;
           @media (min-device-width: 768px) {
-            height: 34px;
-            width: 34px;
+            height: 55px;
+            width: 55px;
           }
 
           #{if(&, '&', '*')} .e-icons {
+            vertical-align: inherit;
            @media (min-device-width: 768px) {
              font-size: $modal-tablet-font-size;
            }
@@ -220,8 +243,16 @@
 
         #{if(&, '&', '*')} .e-next {
           margin-right: $modal-portrait-next-icon-margin;
+          vertical-align: inherit;
+          height: 35px;
+          width:35px;
+          @media (min-device-width: 768px) {
+            height: 55px;
+            width: 55px;
+          }
 
           #{if(&, '&', '*')} .e-icons {
+            vertical-align: inherit;
             @media (min-device-width: 768px) {
               font-size: $modal-tablet-font-size;
             }
@@ -260,11 +291,6 @@
     display: $modal-portrait-footer-display-style;
   }
 
-  .e-calendar-cell-container .e-footer-container {
-    display: block;
-    padding: 5px 0;
-  }
-
   #{if(&, '&', '*')} .e-content.e-month
   {
     height: $modal-portrait-calendar-content-height;
@@ -331,7 +357,6 @@
 
         .e-popup-close {
           float: $modal-portrait-cancel-icon-float-style;
-          padding: $modal-portrait-cancel-icon-padding;
         }
 
         .e-day-wrapper {