@syncfusion/ej2-calendars 31.2.18 → 32.1.20

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 31.2.18
+*  version : 32.1.20
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-calendars",
-  "version": "31.2.18",
+  "version": "32.1.20",
   "description": "A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,11 +8,11 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-calendars.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.2.18",
-    "@syncfusion/ej2-buttons": "~31.2.18",
-    "@syncfusion/ej2-inputs": "~31.2.15",
-    "@syncfusion/ej2-lists": "~31.2.12",
-    "@syncfusion/ej2-popups": "~31.2.12"
+    "@syncfusion/ej2-base": "~32.1.19",
+    "@syncfusion/ej2-buttons": "~32.1.19",
+    "@syncfusion/ej2-inputs": "~32.1.20",
+    "@syncfusion/ej2-lists": "~32.1.19",
+    "@syncfusion/ej2-popups": "~32.1.19"
   },
   "devDependencies": {},
   "keywords": [

package/src/calendar/calendar.d.ts

@@ -688,6 +688,7 @@ export interface RenderDayCellEventArgs extends BaseEventArgs {
     date?: Date;
     /** Defines whether the current date is out of range (less than min or greater than max) or not. */
     isOutOfRange?: boolean;
+    currentView?: string;
 }
 export interface ChangedEventArgs extends BaseEventArgs {
     /** Defines the selected date of the Calendar.

package/src/calendar/calendar.js

@@ -823,7 +823,8 @@ var CalendarBase = /** @class */ (function (_super) {
                 date: localDate,
                 isDisabled: false,
                 element: tdEle,
-                isOutOfRange: disabled
+                isOutOfRange: disabled,
+                currentView: this.currentView()
             };
             var argument = this.renderDayCellArgs;
             this.renderDayCellEvent(argument);

package/src/datepicker/datepicker.js

@@ -1923,7 +1923,7 @@ var DatePicker = /** @class */ (function (_super) {
         }
         if (label) {
             var labelWidth = (this.element.parentElement.offsetWidth) - width;
-            if (labelWidth) {
+            if (labelWidth && !(this.cssClass && this.cssClass.split(' ').indexOf('e-outline') !== -1)) {
                 label.style.width = labelWidth + "px";
             }
         }

package/src/daterangepicker/daterangepicker.js

@@ -4124,7 +4124,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
         if (label) {
             var labelWidth = (this.element.parentElement.offsetWidth) - width;
-            if (labelWidth) {
+            if (labelWidth && !(this.cssClass && this.cssClass.split(' ').indexOf('e-outline') !== -1)) {
                 label.style.width = labelWidth + "px";
             }
         }

package/src/datetimepicker/datetimepicker.js

@@ -113,7 +113,9 @@ var DateTimePicker = /** @class */ (function (_super) {
     DateTimePicker.prototype.focusOut = function () {
         if (document.activeElement === this.inputElement) {
             this.inputElement.blur();
-            removeClass([this.inputWrapper.container], [INPUTFOCUS]);
+            if (this.inputWrapper) {
+                removeClass([this.inputWrapper.container], [INPUTFOCUS]);
+            }
         }
     };
     DateTimePicker.prototype.blurHandler = function (e) {
@@ -1704,7 +1706,7 @@ var DateTimePicker = /** @class */ (function (_super) {
         }
         if (label) {
             var labelWidth = (this.element.parentElement.offsetWidth) - width;
-            if (labelWidth) {
+            if (labelWidth && !(this.cssClass && this.cssClass.split(' ').indexOf('e-outline') !== -1)) {
                 label.style.width = labelWidth + "px";
             }
         }

package/src/timepicker/timepicker.js

@@ -2374,7 +2374,7 @@ var TimePicker = /** @class */ (function (_super) {
         }
         if (label) {
             var labelWidth = (this.element.parentElement.offsetWidth) - width;
-            if (labelWidth) {
+            if (labelWidth && !(this.cssClass && this.cssClass.split(' ').indexOf('e-outline') !== -1)) {
                 label.style.width = labelWidth + "px";
             }
         }

package/styles/bds-lite.css

@@ -1298,7 +1298,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-btn.e-flat.e-popup-close {
@@ -1315,7 +1315,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-today.e-flat.e-primary {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-month, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-day {
@@ -1345,7 +1345,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-title, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-title, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-title {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-prev, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-prev, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-prev {
@@ -1365,7 +1365,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-prev .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-prev .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-prev .e-icons {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-next, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-next, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-next {
@@ -1385,7 +1385,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-next .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-next .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-next .e-icons {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-icon-container, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-icon-container, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-icon-container {
@@ -1393,13 +1393,13 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar th {
-    font-size: 24px;
+    font-size: 18px;
     height: 48px;
   }
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content span.e-day {
-    font-size: 24px;
+    font-size: 18px;
     height: 64px;
     width: 64px;
     line-height: 64px;
@@ -2057,14 +2057,14 @@ ejs-calendar {
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container .e-calendar {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {

package/styles/bds-lite.scss

@@ -1,19 +1,18 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-buttons/styles/button/bds-definition.scss';
-@import 'calendar/bds-definition.scss';
-@import 'calendar/icons/bds.scss';
-@import 'calendar/all.scss';
-@import 'ej2-inputs/styles/input/bds-definition.scss';
-@import 'ej2-popups/styles/popup/bds-definition.scss';
-@import 'timepicker/bds-definition.scss';
-@import 'timepicker/icons/bds.scss';
-@import 'timepicker/all.scss';
-@import 'datepicker/bds-definition.scss';
-@import 'datepicker/icons/bds.scss';
-@import 'datepicker/all.scss';
-@import 'daterangepicker/bds-definition.scss';
-@import 'daterangepicker/icons/bds.scss';
-@import 'daterangepicker/all.scss';
-@import 'datetimepicker/bds-definition.scss';
-@import 'datetimepicker/icons/bds.scss';
-@import 'datetimepicker/all.scss';
+@use 'ej2-buttons/styles/button/bds-definition' as *;
+@use 'calendar/bds-definition' as *;
+@use 'calendar/icons/bds' as *;
+@use 'calendar/all' as *;
+@use 'ej2-inputs/styles/input/bds-definition' as *;
+@use 'ej2-popups/styles/popup/bds-definition' as *;
+@use 'timepicker/bds-definition' as *;
+@use 'timepicker/icons/bds' as *;
+@use 'timepicker/all' as *;
+@use 'datepicker/bds-definition' as *;
+@use 'datepicker/icons/bds' as *;
+@use 'datepicker/all' as *;
+@use 'daterangepicker/bds-definition' as *;
+@use 'daterangepicker/icons/bds' as *;
+@use 'daterangepicker/all' as *;
+@use 'datetimepicker/bds-definition' as *;
+@use 'datetimepicker/icons/bds' as *;
+@use 'datetimepicker/all' as *;

package/styles/bds.css

@@ -1989,7 +1989,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-btn.e-flat.e-popup-close {
@@ -2006,7 +2006,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-today.e-flat.e-primary {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-month, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-day {
@@ -2036,7 +2036,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-title, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-title, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-title {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-prev, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-prev, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-prev {
@@ -2056,7 +2056,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-prev .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-prev .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-prev .e-icons {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-next, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-next, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-next {
@@ -2076,7 +2076,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-next .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-next .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-next .e-icons {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-icon-container, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-icon-container, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-icon-container {
@@ -2084,13 +2084,13 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar th {
-    font-size: 24px;
+    font-size: 18px;
     height: 48px;
   }
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content span.e-day {
-    font-size: 24px;
+    font-size: 18px;
     height: 64px;
     width: 64px;
     line-height: 64px;
@@ -2786,14 +2786,14 @@ ejs-calendar {
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container .e-calendar {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {
@@ -3604,7 +3604,7 @@ ejs-calendar {
 }
 
 .e-bigger.e-small .e-daterangepicker .e-calendar {
-  max-width: 276px;
+  max-width: 246px;
 }
 
 .e-bigger.e-small .e-daterangepicker.e-popup,

package/styles/bds.scss

@@ -1,24 +1,23 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-buttons/styles/button/bds-definition.scss';
-@import 'calendar/bds-definition.scss';
-@import 'calendar/icons/bds.scss';
-@import 'calendar/all.scss';
-@import 'calendar/bigger.scss';
-@import 'ej2-inputs/styles/input/bds-definition.scss';
-@import 'ej2-popups/styles/popup/bds-definition.scss';
-@import 'timepicker/bds-definition.scss';
-@import 'timepicker/icons/bds.scss';
-@import 'timepicker/all.scss';
-@import 'timepicker/bigger.scss';
-@import 'datepicker/bds-definition.scss';
-@import 'datepicker/icons/bds.scss';
-@import 'datepicker/all.scss';
-@import 'datepicker/bigger.scss';
-@import 'daterangepicker/bds-definition.scss';
-@import 'daterangepicker/icons/bds.scss';
-@import 'daterangepicker/all.scss';
-@import 'daterangepicker/bigger.scss';
-@import 'datetimepicker/bds-definition.scss';
-@import 'datetimepicker/icons/bds.scss';
-@import 'datetimepicker/all.scss';
-@import 'datetimepicker/bigger.scss';
+@use 'ej2-buttons/styles/button/bds-definition' as *;
+@use 'calendar/bds-definition' as *;
+@use 'calendar/icons/bds' as *;
+@use 'calendar/all' as *;
+@use 'calendar/bigger' as *;
+@use 'ej2-inputs/styles/input/bds-definition' as *;
+@use 'ej2-popups/styles/popup/bds-definition' as *;
+@use 'timepicker/bds-definition' as *;
+@use 'timepicker/icons/bds' as *;
+@use 'timepicker/all' as *;
+@use 'timepicker/bigger' as *;
+@use 'datepicker/bds-definition' as *;
+@use 'datepicker/icons/bds' as *;
+@use 'datepicker/all' as *;
+@use 'datepicker/bigger' as *;
+@use 'daterangepicker/bds-definition' as *;
+@use 'daterangepicker/icons/bds' as *;
+@use 'daterangepicker/all' as *;
+@use 'daterangepicker/bigger' as *;
+@use 'datetimepicker/bds-definition' as *;
+@use 'datetimepicker/icons/bds' as *;
+@use 'datetimepicker/all' as *;
+@use 'datetimepicker/bigger' as *;

package/styles/bootstrap-dark-lite.css

@@ -1033,7 +1033,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-btn.e-flat.e-popup-close {
@@ -1050,7 +1050,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-today.e-flat.e-primary {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-month, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-day {
@@ -1081,7 +1081,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-title, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-title, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-title {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-prev, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-prev, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-prev {
@@ -1101,7 +1101,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-prev .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-prev .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-prev .e-icons {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-next, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-next, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-next {
@@ -1121,7 +1121,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-next .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-next .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-next .e-icons {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-icon-container, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-icon-container, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-icon-container {
@@ -1129,13 +1129,13 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar th {
-    font-size: 24px;
+    font-size: 18px;
     height: 48px;
   }
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content span.e-day {
-    font-size: 24px;
+    font-size: 18px;
     height: 64px;
     width: 64px;
     line-height: 64px;
@@ -1766,14 +1766,14 @@ ejs-calendar {
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container .e-calendar {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {

package/styles/bootstrap-dark-lite.scss

@@ -1,19 +1,18 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
-@import 'calendar/bootstrap-dark-definition.scss';
-@import 'calendar/icons/bootstrap-dark.scss';
-@import 'calendar/all.scss';
-@import 'ej2-inputs/styles/input/bootstrap-dark-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap-dark-definition.scss';
-@import 'timepicker/bootstrap-dark-definition.scss';
-@import 'timepicker/icons/bootstrap-dark.scss';
-@import 'timepicker/all.scss';
-@import 'datepicker/bootstrap-dark-definition.scss';
-@import 'datepicker/icons/bootstrap-dark.scss';
-@import 'datepicker/all.scss';
-@import 'daterangepicker/bootstrap-dark-definition.scss';
-@import 'daterangepicker/icons/bootstrap-dark.scss';
-@import 'daterangepicker/all.scss';
-@import 'datetimepicker/bootstrap-dark-definition.scss';
-@import 'datetimepicker/icons/bootstrap-dark.scss';
-@import 'datetimepicker/all.scss';
+@use 'ej2-buttons/styles/button/bootstrap-dark-definition' as *;
+@use 'calendar/bootstrap-dark-definition' as *;
+@use 'calendar/icons/bootstrap-dark' as *;
+@use 'calendar/all' as *;
+@use 'ej2-inputs/styles/input/bootstrap-dark-definition' as *;
+@use 'ej2-popups/styles/popup/bootstrap-dark-definition' as *;
+@use 'timepicker/bootstrap-dark-definition' as *;
+@use 'timepicker/icons/bootstrap-dark' as *;
+@use 'timepicker/all' as *;
+@use 'datepicker/bootstrap-dark-definition' as *;
+@use 'datepicker/icons/bootstrap-dark' as *;
+@use 'datepicker/all' as *;
+@use 'daterangepicker/bootstrap-dark-definition' as *;
+@use 'daterangepicker/icons/bootstrap-dark' as *;
+@use 'daterangepicker/all' as *;
+@use 'datetimepicker/bootstrap-dark-definition' as *;
+@use 'datetimepicker/icons/bootstrap-dark' as *;
+@use 'datetimepicker/all' as *;

package/styles/bootstrap-dark.css

@@ -1660,7 +1660,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-popup-close {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-btn.e-flat.e-popup-close {
@@ -1677,7 +1677,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header .e-today.e-flat.e-primary {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-month, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-day {
@@ -1708,7 +1708,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-title, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-title, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-title {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-prev, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-prev, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-prev {
@@ -1728,7 +1728,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-prev .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-prev .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-prev .e-icons {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-next, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-next, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-next {
@@ -1748,7 +1748,7 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-next .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-next .e-icons, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-next .e-icons {
-    font-size: 24px;
+    font-size: 18px;
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-month .e-icon-container, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-year .e-icon-container, .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-header.e-decade .e-icon-container {
@@ -1756,13 +1756,13 @@ ejs-calendar {
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar th {
-    font-size: 24px;
+    font-size: 18px;
     height: 48px;
   }
 }
 @media (min-device-width: 768px) {
   .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content span.e-day {
-    font-size: 24px;
+    font-size: 18px;
     height: 64px;
     width: 64px;
     line-height: 64px;
@@ -2424,14 +2424,14 @@ ejs-calendar {
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-calendar-holder .e-calendar-container .e-calendar {
-    min-height: 78vh;
-    height: 78vh;
+    min-height: 100%;
+    height: 100%;
   }
 }
 @media (max-height: 600px) {

package/styles/bootstrap-dark.scss

@@ -1,24 +1,23 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
-@import 'calendar/bootstrap-dark-definition.scss';
-@import 'calendar/icons/bootstrap-dark.scss';
-@import 'calendar/all.scss';
-@import 'calendar/bigger.scss';
-@import 'ej2-inputs/styles/input/bootstrap-dark-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap-dark-definition.scss';
-@import 'timepicker/bootstrap-dark-definition.scss';
-@import 'timepicker/icons/bootstrap-dark.scss';
-@import 'timepicker/all.scss';
-@import 'timepicker/bigger.scss';
-@import 'datepicker/bootstrap-dark-definition.scss';
-@import 'datepicker/icons/bootstrap-dark.scss';
-@import 'datepicker/all.scss';
-@import 'datepicker/bigger.scss';
-@import 'daterangepicker/bootstrap-dark-definition.scss';
-@import 'daterangepicker/icons/bootstrap-dark.scss';
-@import 'daterangepicker/all.scss';
-@import 'daterangepicker/bigger.scss';
-@import 'datetimepicker/bootstrap-dark-definition.scss';
-@import 'datetimepicker/icons/bootstrap-dark.scss';
-@import 'datetimepicker/all.scss';
-@import 'datetimepicker/bigger.scss';
+@use 'ej2-buttons/styles/button/bootstrap-dark-definition' as *;
+@use 'calendar/bootstrap-dark-definition' as *;
+@use 'calendar/icons/bootstrap-dark' as *;
+@use 'calendar/all' as *;
+@use 'calendar/bigger' as *;
+@use 'ej2-inputs/styles/input/bootstrap-dark-definition' as *;
+@use 'ej2-popups/styles/popup/bootstrap-dark-definition' as *;
+@use 'timepicker/bootstrap-dark-definition' as *;
+@use 'timepicker/icons/bootstrap-dark' as *;
+@use 'timepicker/all' as *;
+@use 'timepicker/bigger' as *;
+@use 'datepicker/bootstrap-dark-definition' as *;
+@use 'datepicker/icons/bootstrap-dark' as *;
+@use 'datepicker/all' as *;
+@use 'datepicker/bigger' as *;
+@use 'daterangepicker/bootstrap-dark-definition' as *;
+@use 'daterangepicker/icons/bootstrap-dark' as *;
+@use 'daterangepicker/all' as *;
+@use 'daterangepicker/bigger' as *;
+@use 'datetimepicker/bootstrap-dark-definition' as *;
+@use 'datetimepicker/icons/bootstrap-dark' as *;
+@use 'datetimepicker/all' as *;
+@use 'datetimepicker/bigger' as *;