@syncfusion/ej2-calendars 31.2.16 → 32.1.19

package/styles/fabric-dark.css

@@ -1668,7 +1668,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 {
@@ -1685,7 +1685,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 {
@@ -1715,7 +1715,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 {
@@ -1735,7 +1735,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 {
@@ -1755,7 +1755,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 {
@@ -1763,13 +1763,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;
@@ -2437,14 +2437,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/fabric-dark.scss

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

package/styles/fabric-lite.css

@@ -1776,14 +1776,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) {
@@ -1900,10 +1900,10 @@ ejs-calendar {
     font-size: 18px;
   }
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header .e-popup-close {
-    padding: 1vh 2vw;
+    padding: 1vh 1vw;
   }
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header .e-model-title {
-    padding: 1vh 2vw;
+    padding: 1vh 1vw;
   }
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header {
     width: 100%;

package/styles/fabric-lite.scss

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

package/styles/fabric.css

@@ -2444,14 +2444,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) {
@@ -2568,10 +2568,10 @@ ejs-calendar {
     font-size: 18px;
   }
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header .e-popup-close {
-    padding: 1vh 2vw;
+    padding: 1vh 1vw;
   }
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-range-mob-popup-wrap .e-model-header .e-model-title {
-    padding: 1vh 2vw;
+    padding: 1vh 1vw;
   }
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header {
     width: 100%;

package/styles/fabric.scss

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

package/styles/fluent-dark-lite.css

@@ -1050,7 +1050,7 @@ ejs-calendar {
 }
 .e-input-group-icon.e-date-icon:focus,
 *.e-control-wrapper .e-input-group-icon.e-date-icon:focus {
-  background: #f3f2f1;
+  background: #323130;
   border-radius: 50%;
 }
 
@@ -1193,7 +1193,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 {
@@ -1210,7 +1210,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 {
@@ -1240,7 +1240,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 {
@@ -1260,7 +1260,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 {
@@ -1280,7 +1280,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 {
@@ -1288,13 +1288,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;
@@ -1456,6 +1456,14 @@ ejs-calendar {
   width: 61%;
 }
 
+.e-daterangepicker.e-popup .e-calendar .e-header .e-title {
+  width: 65%;
+}
+
+.e-daterangepicker.e-popup.e-small .e-calendar .e-header .e-title {
+  width: 61%;
+}
+
 /*! component icons */
 .e-input-group-icon.e-range-icon,
 *.e-control-wrapper .e-input-group-icon.e-range-icon {
@@ -1475,7 +1483,7 @@ ejs-calendar {
 }
 .e-input-group-icon.e-range-icon:focus,
 *.e-control-wrapper .e-input-group-icon.e-range-icon:focus {
-  background: #252423;
+  background: #f3f2f1;
   border-radius: 50%;
 }
 
@@ -1937,14 +1945,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/fluent-dark-lite.scss

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

package/styles/fluent-dark.css

@@ -1785,7 +1785,7 @@ ejs-calendar {
 }
 .e-input-group-icon.e-date-icon:focus,
 *.e-control-wrapper .e-input-group-icon.e-date-icon:focus {
-  background: #f3f2f1;
+  background: #323130;
   border-radius: 50%;
 }
 
@@ -1928,7 +1928,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 {
@@ -1945,7 +1945,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 {
@@ -1975,7 +1975,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 {
@@ -1995,7 +1995,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 {
@@ -2015,7 +2015,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 {
@@ -2023,13 +2023,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;
@@ -2224,6 +2224,14 @@ ejs-calendar {
   width: 61%;
 }
 
+.e-daterangepicker.e-popup .e-calendar .e-header .e-title {
+  width: 65%;
+}
+
+.e-daterangepicker.e-popup.e-small .e-calendar .e-header .e-title {
+  width: 61%;
+}
+
 /*! component icons */
 .e-input-group-icon.e-range-icon,
 *.e-control-wrapper .e-input-group-icon.e-range-icon {
@@ -2243,7 +2251,7 @@ ejs-calendar {
 }
 .e-input-group-icon.e-range-icon:focus,
 *.e-control-wrapper .e-input-group-icon.e-range-icon:focus {
-  background: #252423;
+  background: #f3f2f1;
   border-radius: 50%;
 }
 
@@ -2705,14 +2713,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/fluent-dark.scss

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