@syncfusion/ej2-calendars 20.3.56 → 20.4.38

package/src/maskbase/masked-date-time.js

@@ -175,6 +175,10 @@ var MaskedDateTime = /** @class */ (function () {
         }
         if ((!args.e.altKey && !args.e.ctrlKey) && (args.e.key === ARROWUP || args.e.key === ARROWDOWN)) {
             var start = this.parent.inputElement.selectionStart;
+            var formatText = '';
+            if (this.validCharacters.indexOf(this.hiddenMask[start]) !== -1) {
+                formatText = this.hiddenMask[start];
+            }
             this.dateAlteration(args.e.key === ARROWDOWN ? true : false);
             var inputValue = this.dateformat.replace(this.formatRegex, this.formatCheck());
             this.isHiddenMask = true;
@@ -183,6 +187,12 @@ var MaskedDateTime = /** @class */ (function () {
             this.previousHiddenMask = this.hiddenMask;
             this.previousValue = inputValue;
             this.parent.inputElement.value = inputValue;
+            for (var i = 0; i < this.hiddenMask.length; i++) {
+                if (formatText === this.hiddenMask[i]) {
+                    start = i;
+                    break;
+                }
+            }
             this.parent.inputElement.selectionStart = start;
             this.validCharacterCheck();
         }
@@ -578,6 +588,10 @@ var MaskedDateTime = /** @class */ (function () {
     MaskedDateTime.prototype.maskInputHandler = function () {
         var start = this.parent.inputElement.selectionStart;
         var selectionChar = this.previousHiddenMask[start - 1];
+        var formatText = '';
+        if (this.validCharacters.indexOf(this.hiddenMask[start]) !== -1) {
+            formatText = this.hiddenMask[start];
+        }
         var inputValue;
         this.differenceCheck();
         inputValue = this.dateformat.replace(this.formatRegex, this.formatCheck());
@@ -588,6 +602,13 @@ var MaskedDateTime = /** @class */ (function () {
         this.previousHiddenMask = this.hiddenMask;
         this.previousValue = inputValue;
         this.parent.inputElement.value = inputValue;
+        this.parent.inputElement.value = inputValue;
+        for (var i = 0; i < this.hiddenMask.length; i++) {
+            if (formatText === this.hiddenMask[i]) {
+                start = i;
+                break;
+            }
+        }
         this.parent.inputElement.selectionStart = start;
         this.validCharacterCheck();
         if ((this.isNavigate || this.isDeletion) && !this.isDeleteKey) {
@@ -595,6 +616,9 @@ var MaskedDateTime = /** @class */ (function () {
             this.isNavigate = this.isDeletion = false;
             this.navigateSelection(isbackward);
         }
+        if (this.isDeleteKey) {
+            this.isDeletion = false;
+        }
         this.isDeleteKey = false;
         // this.setSelection(selectionChar);
         // this.navigateSelection(inputValue);

package/src/timepicker/timepicker.js

@@ -200,6 +200,9 @@ var TimePicker = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && !isNullOrUndefined(this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0]) && this.floatLabelType !== 'Never') {
             this.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');
         }
+        if (!isNullOrUndefined(closest(this.element, "fieldset")) && closest(this.element, "fieldset").disabled) {
+            this.enabled = false;
+        }
         this.renderComplete();
     };
     TimePicker.prototype.setTimeAllowEdit = function () {
@@ -484,6 +487,11 @@ var TimePicker = /** @class */ (function (_super) {
         if (this.formElement) {
             EventHandler.remove(this.formElement, 'reset', this.formResetHandler);
         }
+        this.rippleFn = null;
+        this.openPopupEventArgs = null;
+        this.selectedElement = null;
+        this.listTag = null;
+        this.liCollections = null;
     };
     TimePicker.prototype.ensureInputAttribute = function () {
         var propertyList = [];
@@ -597,19 +605,19 @@ var TimePicker = /** @class */ (function (_super) {
                 var key = _a[_i];
                 if (wrapperAttributes.indexOf(key) > -1) {
                     if (key === 'class') {
-                        var updatedClassesValue = (this.htmlAttributes[key].replace(/\s+/g, ' ')).trim();
+                        var updatedClassesValue = (this.htmlAttributes["" + key].replace(/\s+/g, ' ')).trim();
                         if (updatedClassesValue !== '') {
                             addClass([this.inputWrapper.container], updatedClassesValue.split(' '));
                         }
                     }
                     else if (key === 'style') {
                         var timeStyle = this.inputWrapper.container.getAttribute(key);
-                        timeStyle = !isNullOrUndefined(timeStyle) ? (timeStyle + this.htmlAttributes[key]) :
-                            this.htmlAttributes[key];
+                        timeStyle = !isNullOrUndefined(timeStyle) ? (timeStyle + this.htmlAttributes["" + key]) :
+                            this.htmlAttributes["" + key];
                         this.inputWrapper.container.setAttribute(key, timeStyle);
                     }
                     else {
-                        this.inputWrapper.container.setAttribute(key, this.htmlAttributes[key]);
+                        this.inputWrapper.container.setAttribute(key, this.htmlAttributes["" + key]);
                     }
                 }
             }
@@ -620,7 +628,7 @@ var TimePicker = /** @class */ (function (_super) {
             for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
                 var key = _a[_i];
                 if (wrapperAttributes.indexOf(key) < 0) {
-                    this.inputElement.setAttribute(key, this.htmlAttributes[key]);
+                    this.inputElement.setAttribute(key, this.htmlAttributes["" + key]);
                 }
             }
         }
@@ -1334,7 +1342,7 @@ var TimePicker = /** @class */ (function (_super) {
             this.inputEvent.destroy();
         }
         EventHandler.remove(this.inputElement, 'mousedown touchstart', this.mouseDownHandler);
-        if (this.showClearButton && !isNullOrUndefined(this.inputWrapper.clearButton)) {
+        if (this.showClearButton && !isNullOrUndefined(this.inputWrapper) && !isNullOrUndefined(this.inputWrapper.clearButton)) {
             EventHandler.remove(this.inputWrapper.clearButton, 'mousedown touchstart', this.clearHandler);
         }
         if (this.formElement) {
@@ -1697,7 +1705,7 @@ var TimePicker = /** @class */ (function (_super) {
         return elementIndex;
     };
     TimePicker.prototype.keyHandler = function (event) {
-        if (isNullOrUndefined(this.step) || this.step <= 0 || this.inputWrapper.buttons[0].classList.contains(DISABLED)) {
+        if (isNullOrUndefined(this.step) || this.step <= 0 || !isNullOrUndefined(this.inputWrapper) && this.inputWrapper.buttons[0].classList.contains(DISABLED)) {
             return;
         }
         var count = this.timeCollections.length;
@@ -1945,7 +1953,7 @@ var TimePicker = /** @class */ (function (_super) {
     };
     TimePicker.prototype.documentClickHandler = function (event) {
         var target = event.target;
-        if ((!isNullOrUndefined(this.popupObj) && (this.inputWrapper.container.contains(target) && event.type !== 'mousedown' ||
+        if ((!isNullOrUndefined(this.popupObj) && !isNullOrUndefined(this.inputWrapper) && (this.inputWrapper.container.contains(target) && event.type !== 'mousedown' ||
             (this.popupObj.element && this.popupObj.element.contains(target)))) && event.type !== 'touchstart') {
             event.preventDefault();
         }

package/styles/bootstrap-dark.css

@@ -1833,6 +1833,13 @@ ejs-calendar {
   min-height: 40px;
 }
 
+@media screen and (orientation: landscape) {
+  .e-daterangepicker .e-calendar.e-device .e-month table {
+    display: inline-block;
+    height: 150px;
+    overflow: auto;
+  }
+}
 .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-date-time-icon {
   width: calc(100% - 80px);
 }

package/styles/bootstrap.css

@@ -1836,6 +1836,13 @@ ejs-calendar {
   min-height: 40px;
 }
 
+@media screen and (orientation: landscape) {
+  .e-daterangepicker .e-calendar.e-device .e-month table {
+    display: inline-block;
+    height: 150px;
+    overflow: auto;
+  }
+}
 .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-date-time-icon {
   width: calc(100% - 80px);
 }

package/styles/bootstrap4.css

@@ -1864,6 +1864,13 @@ ejs-calendar {
   min-height: 40px;
 }
 
+@media screen and (orientation: landscape) {
+  .e-daterangepicker .e-calendar.e-device .e-month table {
+    display: inline-block;
+    height: 150px;
+    overflow: auto;
+  }
+}
 .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-date-time-icon {
   width: calc(100% - 80px);
 }

package/styles/bootstrap5-dark.css

@@ -686,7 +686,7 @@ ejs-calendar {
 .e-calendar .e-content.e-year td:hover span.e-day, .e-calendar .e-content.e-decade td:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-decade td:hover span.e-day {
-  background-color: #31373d;
+  background-color: #444c54;
 }
 .e-calendar .e-content.e-year td.e-selected:hover span.e-day, .e-calendar .e-content.e-decade td.e-selected:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td.e-selected:hover span.e-day,
@@ -1932,6 +1932,13 @@ ejs-calendar {
   min-height: 40px;
 }
 
+@media screen and (orientation: landscape) {
+  .e-daterangepicker .e-calendar.e-device .e-month table {
+    display: inline-block;
+    height: 130px;
+    overflow: auto;
+  }
+}
 .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-date-time-icon {
   width: calc(100% - 80px);
 }

package/styles/bootstrap5.css

@@ -1932,6 +1932,13 @@ ejs-calendar {
   min-height: 40px;
 }
 
+@media screen and (orientation: landscape) {
+  .e-daterangepicker .e-calendar.e-device .e-month table {
+    display: inline-block;
+    height: 130px;
+    overflow: auto;
+  }
+}
 .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-date-time-icon {
   width: calc(100% - 80px);
 }

package/styles/calendar/_fluent-definition.scss

@@ -162,7 +162,7 @@ $calendar-active-state-icon-bg-color: $secondary-border-color-pressed !default;
 
 //popup styles
 $calendar-border-style: 1px solid $border-light !default;
-$calendar-bg-color: $transparent !default;
+$calendar-bg-color: $flyout-bg-color !default;
 $calendar-week-number-bg-color: $content-bg-color-alt1 !default;
 $calendar-week-number-font-weight: 400 !default;
 $calendar-box-shadow: none !default;

package/styles/calendar/_material-definition.scss

@@ -61,7 +61,7 @@ $calendar-small-min-width: $calendar-normal-min-width !default;
 $calendar-weeknumber-min-width: 262px !default;
 $calendar-weeknumber-bigger-width: 320px !default;
 $calendar-normal-month-view-height: 30px !default;
-$calendar-normal-month-view-line-height: $calendar-normal-month-view-height !default;
+$calendar-normal-month-view-line-height: 28px !default;
 $calendar-normal-day-header-height: $calendar-normal-month-view-height !default;
 $calendar-normal-day-header-text: none !default;
 $calendar-normal-year-decade-height: 45px !default;
@@ -140,7 +140,7 @@ $calendar-week-normal-min-width: $calendar-normal-min-width !default;
 $calendar-week-bigger-max-width: $calendar-bigger-max-width !default;
 $calendar-week-bigger-min-width: $calendar-bigger-min-width !default;
 $calendar-bigger-month-view-width: $calendar-bigger-month-view-height !default;
-$calendar-bigger-month-view-line-height: $calendar-bigger-month-view-height !default;
+$calendar-bigger-month-view-line-height: 34px !default;
 $calendar-bigger-year-decade-width: $calendar-bigger-year-decade-height !default;
 $calendar-today-bg-hover-color: $grey-200 !default;
 $calendar-disable-font-color: $calendar-light-font !default;
@@ -177,7 +177,7 @@ $calendar-small-icon-padding: 6px !default;
 $calendar-small-header-height: 32px !default;
 $calendar-small-day-header-height: 24px !default;
 $calendar-small-month-view-height: 24px !default;
-$calendar-small-month-view-line-height: $calendar-small-month-view-height !default;
+$calendar-small-month-view-line-height: 22px !default;
 $calendar-small-date-font-size: 12px !default;
 $calendar-small-month-view-width: 24px !default;
 $calendar-small-popup-padding: 0 !default;

package/styles/calendar/_theme.scss

@@ -81,7 +81,7 @@
         }
         #{if(&, '&', '*')}.e-year td:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td:hover span.e-day {
-          background-color: $calendar-yeardecade-hover-bg;
+          background-color: $calendar-hover-color;
         }
         #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {

package/styles/calendar/bootstrap5-dark.css

@@ -686,7 +686,7 @@ ejs-calendar {
 .e-calendar .e-content.e-year td:hover span.e-day, .e-calendar .e-content.e-decade td:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-decade td:hover span.e-day {
-  background-color: #31373d;
+  background-color: #444c54;
 }
 .e-calendar .e-content.e-year td.e-selected:hover span.e-day, .e-calendar .e-content.e-decade td.e-selected:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td.e-selected:hover span.e-day,

package/styles/calendar/fabric-dark.css

@@ -649,7 +649,7 @@ ejs-calendar {
 .e-calendar .e-content.e-year td:hover span.e-day, .e-calendar .e-content.e-decade td:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-decade td:hover span.e-day {
-  background-color: #514f4f;
+  background-color: #414040;
 }
 .e-calendar .e-content.e-year td.e-selected:hover span.e-day, .e-calendar .e-content.e-decade td.e-selected:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td.e-selected:hover span.e-day,

package/styles/calendar/fabric.css

@@ -650,7 +650,7 @@ ejs-calendar {
 .e-calendar .e-content.e-year td:hover span.e-day, .e-calendar .e-content.e-decade td:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-decade td:hover span.e-day {
-  background-color: #dadada;
+  background-color: #eaeaea;
 }
 .e-calendar .e-content.e-year td.e-selected:hover span.e-day, .e-calendar .e-content.e-decade td.e-selected:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td.e-selected:hover span.e-day,

package/styles/calendar/fluent-dark.css

@@ -188,7 +188,7 @@ ejs-calendar {
 .e-calendar .e-content td.e-week-number:hover span.e-day, .e-calendar .e-content td.e-week-number:hover,
 .e-bigger.e-small .e-calendar .e-content td.e-week-number:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-week-number:hover {
-  background-color: transparent;
+  background-color: #252423;
   cursor: default;
   background-color: #201f1e;
 }
@@ -568,7 +568,7 @@ ejs-calendar {
 
 .e-calendar,
 .e-bigger.e-small .e-calendar {
-  background-color: transparent;
+  background-color: #252423;
   border: 1px solid #292827;
   box-shadow: none;
 }
@@ -660,7 +660,7 @@ ejs-calendar {
 .e-calendar .e-content.e-year td:hover span.e-day, .e-calendar .e-content.e-decade td:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-decade td:hover span.e-day {
-  background-color: #252423;
+  background-color: #323130;
 }
 .e-calendar .e-content.e-year td.e-selected:hover span.e-day, .e-calendar .e-content.e-decade td.e-selected:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-year td.e-selected:hover span.e-day,

package/styles/calendar/fluent.css

@@ -188,7 +188,7 @@ ejs-calendar {
 .e-calendar .e-content td.e-week-number:hover span.e-day, .e-calendar .e-content td.e-week-number:hover,
 .e-bigger.e-small .e-calendar .e-content td.e-week-number:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content td.e-week-number:hover {
-  background-color: transparent;
+  background-color: #fff;
   cursor: default;
   background-color: #faf9f8;
 }
@@ -568,7 +568,7 @@ ejs-calendar {
 
 .e-calendar,
 .e-bigger.e-small .e-calendar {
-  background-color: transparent;
+  background-color: #fff;
   border: 1px solid #edebe9;
   box-shadow: none;
 }

package/styles/calendar/material.css

@@ -306,7 +306,7 @@ ejs-calendar {
 }
 .e-calendar .e-content.e-month td.e-today span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-month td.e-today span.e-day {
-  line-height: 30px;
+  line-height: 28px;
 }
 .e-calendar .e-content.e-year table, .e-calendar .e-content.e-decade table,
 .e-bigger.e-small .e-calendar .e-content.e-year table,
@@ -451,7 +451,7 @@ ejs-calendar {
 }
 .e-bigger.e-calendar .e-content.e-month td.e-today span.e-day,
 *.e-bigger .e-calendar .e-content.e-month td.e-today span.e-day {
-  line-height: 36px;
+  line-height: 34px;
 }
 .e-bigger.e-calendar .e-content.e-month td,
 *.e-bigger .e-calendar .e-content.e-month td {
@@ -502,7 +502,7 @@ ejs-calendar {
 }
 .e-small.e-calendar .e-content.e-month td.e-today span.e-day,
 .e-small .e-calendar .e-content.e-month td.e-today span.e-day {
-  line-height: 24px;
+  line-height: 22px;
 }
 .e-small.e-calendar .e-content.e-month td,
 .e-small .e-calendar .e-content.e-month td {

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

@@ -135,6 +135,7 @@ $range-icon-bottom-right-radius: 3px !default;
 $range-icon-top-right-radius: 3px !default;
 $range-icon-margin: 0 !default;
 $range-sart-end-btn-padding: 1px 6px !default;
+$range-calendar-landscape-height: 150px !default;
 
 // fabric theme variable
 $range-icon-font-size: 16px !default;

package/styles/daterangepicker/_bootstrap-definition.scss

@@ -135,6 +135,7 @@ $range-icon-top-right-radius: 3px !default;
 $range-icon-margin: 0 !default;
 $range-icon-bigger-margin: 0 !default;
 $range-sart-end-btn-padding: 1px 6px !default;
+$range-calendar-landscape-height: 150px !default;
 
 // fabric theme variable
 $range-icon-font-size: 16px !default;

package/styles/daterangepicker/_bootstrap4-definition.scss

@@ -145,6 +145,7 @@ $range-bigger-icon-container-min-width: 33px !default;
 $range-icon-margin: 0 !default;
 $range-icon-bigger-margin: 0 !default;
 $range-sart-end-btn-padding: 1px 6px !default;
+$range-calendar-landscape-height: 150px !default;
 
 // fabric theme variable
 $range-icon-font-size: 14px !default;

package/styles/daterangepicker/_bootstrap5-definition.scss

@@ -101,6 +101,7 @@ $range-icon-normal-padding: 0 !default;
 $range-preset-normal-list-height: 36px !default;
 $range-preset-bigger-list-height: 48px !default;
 $range-calendar-bigger-max: 296px !default;
+$range-calendar-landscape-height: 130px !default;
 
 // new variable
 $range-icon: '\e245' !default;

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

@@ -135,6 +135,7 @@ $range-icon-bottom-right-radius: 0 !default;
 $range-icon-top-right-radius: 0 !default;
 $range-icon-margin: 0 !default;
 $range-sart-end-btn-padding: 1px 6px !default;
+$range-calendar-landscape-height: 150px !default;
 
 // fabric theme variable
 $range-icon-font-size: 16px !default;

package/styles/daterangepicker/_fabric-definition.scss

@@ -134,6 +134,7 @@ $range-icon-top-right-radius: 0 !default;
 $range-icon-margin: 0 !default;
 $range-icon-bigger-margin: 0 !default;
 $range-sart-end-btn-padding: 1px 6px !default;
+$range-calendar-landscape-height: 150px !default;
 
 // fabric theme variable
 $range-icon-font-size: 16px !default;

package/styles/daterangepicker/_fluent-definition.scss

@@ -77,6 +77,11 @@ $range-presets-width: 160px !default;
 $range-hover-start-radius: 0 !default;
 $range-hover-end-radius: 0 !default;
 $range-selected-hover-radius: 50% !default;
+$range-today-hover-line-height: 26px !default;
+$range-other-hover-line-height: 28px !default;
+$range-small-today-hover-line-height: 24px !default;
+$range-bigger-today-hover-line-height: 30px !default;
+$range-bigger-other-hover-line-height: 32px !default;
 $range-btn-height: 36px !default;
 $range-device-btn-line-height: 34px !default;
 $range-icon-hover-color: $content-bg-color-hover !default;
@@ -104,6 +109,7 @@ $range-icon-normal-padding: 0 !default;
 $range-preset-normal-list-height: 36px !default;
 $range-preset-bigger-list-height: 48px !default;
 $range-calendar-bigger-max: 296px !default;
+$range-calendar-landscape-height: 130px !default;
 
 // new variable
 $range-icon: '\e245' !default;

package/styles/daterangepicker/_fusionnew-definition.scss

@@ -101,6 +101,7 @@ $range-icon-normal-padding: 0 !default;
 $range-preset-normal-list-height: 36px !default;
 $range-preset-bigger-list-height: 48px !default;
 $range-calendar-bigger-max: 296px !default;
+$range-calendar-landscape-height: 130px !default;
 
 // new variable
 $range-icon: '\e245' !default;

package/styles/daterangepicker/_highcontrast-definition.scss

@@ -133,6 +133,7 @@ $range-icon-top-right-radius: 0 !default;
 $range-icon-margin: 0 !default;
 $range-icon-bigger-margin: 0 !default;
 $range-sart-end-btn-padding: 1px 6px !default;
+$range-calendar-landscape-height: 150px !default;
 
 // highcontrast theme variable
 $range-icon-font-size: 16px !default;

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

@@ -134,6 +134,7 @@ $range-icon-bottom-right-radius: 0 !default;
 $range-icon-top-right-radius: 0 !default;
 $range-icon-margin: 0 !default;
 $range-sart-end-btn-padding: 1px 6px !default;
+$range-calendar-landscape-height: 150px !default;
 
 // highcontrast theme variable
 $range-icon-font-size: 16px !default;

package/styles/daterangepicker/_layout.scss

@@ -652,6 +652,12 @@
 
 
 @media screen and (orientation: landscape) {
+    .e-daterangepicker .e-calendar.e-device .e-month table{
+        display: inline-block;
+        height: $range-calendar-landscape-height;
+        overflow: auto;
+    }
+
     .e-daterangepick-mob-popup-wrap {
      @if $skin-name == 'material' {
         #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {

package/styles/daterangepicker/_material-dark-definition.scss

@@ -139,6 +139,7 @@ $range-bigger-icon-container-min-height: 24px !default;
 $range-bigger-icon-container-min-width: 24px !default;
 $range-icon-margin: 0 0 4px 0 !default;
 $range-sart-end-btn-padding: 1px 6px !default;
+$range-calendar-landscape-height: 130px !default;
 
 // new variable
 $range-icon: '\e245' !default;

package/styles/daterangepicker/_material-definition.scss

@@ -140,6 +140,7 @@ $range-bigger-icon-container-min-width: 24px !default;
 $range-icon-margin: 0 0 4px 0 !default;
 $range-icon-bigger-margin: 0 0 2px 0 !default;
 $range-sart-end-btn-padding: 1px 6px !default;
+$range-calendar-landscape-height: 130px !default;
 
 // new variable
 $range-icon: '\e245' !default;

package/styles/daterangepicker/_material3-definition.scss

@@ -101,6 +101,7 @@ $range-icon-normal-padding: 0 !default;
 $range-preset-normal-list-height: 36px !default;
 $range-preset-bigger-list-height: 48px !default;
 $range-calendar-bigger-max: 296px !default;
+$range-calendar-landscape-height: 130px !default;
 
 // new variable
 $range-icon: '\e245' !default;

package/styles/daterangepicker/_tailwind-definition.scss

@@ -109,6 +109,7 @@ $range-small-header-label-size: $text-base !default;
 $range-bigger-indicator-label-size: $text-sm !default;
 $range-bigger-change-icon-size: 20px !default;
 $range-control-bigger-header-margin: 12px 0 !default;
+$range-calendar-landscape-height: 130px !default;
 
 // new variable
 $range-icon: '\e245' !default;

package/styles/daterangepicker/_theme.scss

@@ -322,3 +322,36 @@
     }
   }
 }
+
+.e-daterangepicker.e-popup .e-calendar .e-content.e-month .e-today.e-range-hover span,
+.e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-today-hover-line-height;
+  }
+}
+
+.e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-today.e-range-hover span,
+.e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-other-month.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-other-hover-line-height;
+  }
+}
+
+.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day,
+.e-small .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-small-today-hover-line-height;
+  }
+}
+
+.e-bigger .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-bigger-today-hover-line-height;
+  }
+}
+
+.e-bigger .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
+  @if $skin-name == 'FluentUI' {
+    line-height: $range-bigger-other-hover-line-height;
+  }
+}

package/styles/daterangepicker/bootstrap-dark.css

@@ -636,6 +636,13 @@
   min-height: 40px;
 }
 
+@media screen and (orientation: landscape) {
+  .e-daterangepicker .e-calendar.e-device .e-month table {
+    display: inline-block;
+    height: 150px;
+    overflow: auto;
+  }
+}
 .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-date-time-icon {
   width: calc(100% - 80px);
 }

package/styles/daterangepicker/bootstrap.css

@@ -637,6 +637,13 @@
   min-height: 40px;
 }
 
+@media screen and (orientation: landscape) {
+  .e-daterangepicker .e-calendar.e-device .e-month table {
+    display: inline-block;
+    height: 150px;
+    overflow: auto;
+  }
+}
 .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-date-time-icon {
   width: calc(100% - 80px);
 }

package/styles/daterangepicker/bootstrap4.css

@@ -650,6 +650,13 @@
   min-height: 40px;
 }
 
+@media screen and (orientation: landscape) {
+  .e-daterangepicker .e-calendar.e-device .e-month table {
+    display: inline-block;
+    height: 150px;
+    overflow: auto;
+  }
+}
 .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-date-time-icon {
   width: calc(100% - 80px);
 }

package/styles/daterangepicker/bootstrap5-dark.css

@@ -650,6 +650,13 @@
   min-height: 40px;
 }
 
+@media screen and (orientation: landscape) {
+  .e-daterangepicker .e-calendar.e-device .e-month table {
+    display: inline-block;
+    height: 130px;
+    overflow: auto;
+  }
+}
 .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-date-time-icon {
   width: calc(100% - 80px);
 }

package/styles/daterangepicker/bootstrap5.css

@@ -650,6 +650,13 @@
   min-height: 40px;
 }
 
+@media screen and (orientation: landscape) {
+  .e-daterangepicker .e-calendar.e-device .e-month table {
+    display: inline-block;
+    height: 130px;
+    overflow: auto;
+  }
+}
 .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-date-time-icon {
   width: calc(100% - 80px);
 }