@syncfusion/ej2-calendars 28.2.11 → 29.1.35

package/styles/bootstrap5-lite.css

@@ -431,14 +431,14 @@ ejs-calendar {
   cursor: pointer;
 }
 .e-calendar .e-header .e-prev:hover, .e-calendar .e-header .e-next:hover {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
 }
 .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus {
   -webkit-box-shadow: 0 0 0 1px #6c757d;
           box-shadow: 0 0 0 1px #6c757d;
 }
 .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active {
-  background: #51585e;
+  background: rgb(81, 87.75, 93.75);
   color: #fff;
 }
 .e-calendar .e-header button.e-prev:active span, .e-calendar .e-header button.e-next:active span {
@@ -467,7 +467,7 @@ ejs-calendar {
   color: #adb5bd;
 }
 .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 {
-  background-color: #0257d5;
+  background-color: rgb(1.762295082, 87.2336065574, 213.237704918);
 }
 .e-calendar .e-content.e-year td > span.e-day, .e-calendar .e-content.e-decade td > span.e-day {
   background: none;
@@ -522,7 +522,7 @@ ejs-calendar {
   color: #fff;
 }
 .e-calendar .e-content td.e-today.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected.e-focused-date span.e-day {
-  background: #0257d5;
+  background: rgb(1.762295082, 87.2336065574, 213.237704918);
   color: #fff;
 }
 .e-calendar .e-content span {
@@ -574,7 +574,7 @@ ejs-calendar {
   color: #0d6efd;
 }
 .e-calendar.e-device .e-prev:hover, .e-calendar.e-device .e-next:hover, .e-calendar.e-device .e-prev:active, .e-calendar.e-device .e-next:active, .e-calendar.e-device .e-prev:focus, .e-calendar.e-device .e-next:focus {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
 }
 .e-calendar.e-device button.e-prev:active span, .e-calendar.e-device button.e-next:active span {
   color: #6c757d;
@@ -620,8 +620,8 @@ ejs-calendar {
 
 .e-calendar .e-btn.e-today.e-flat.e-primary:hover,
 .e-calendar .e-css.e-btn.e-today.e-flat.e-primary:hover {
-  background-color: #0b5ed7;
-  border-color: #0a58ca;
+  background-color: rgb(11.05, 93.5, 215.05);
+  border-color: rgb(10.4, 88, 202.4);
   color: #fff;
 }
 
@@ -629,8 +629,8 @@ ejs-calendar {
 .e-calendar .e-btn.e-today.e-flat.e-primary.e-active,
 .e-calendar .e-css.e-btn.e-today.e-flat.e-primary:active,
 .e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-active {
-  background-color: #0a58ca;
-  border-color: #0a53be;
+  background-color: rgb(10.4, 88, 202.4);
+  border-color: rgb(9.75, 82.5, 189.75);
   color: #fff;
 }
 
@@ -871,8 +871,8 @@ ejs-calendar {
 }
 /* stylelint-enable */
 .e-time-wrapper .e-input-group-icon.e-icons.e-active {
-  background: #565e64;
-  border-color: #545b62;
+  background: rgb(86.4, 93.6, 100);
+  border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
   color: #fff;
 }
 .e-time-wrapper.e-input-group:not(.e-disabled) .e-input-group-icon.e-active:active {
@@ -1339,7 +1339,7 @@ ejs-calendar {
 }
 
 .e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active {
-  background: #565e64;
+  background: rgb(86.4, 93.6, 100);
   border-color: #ced4da;
   color: #fff;
 }
@@ -1753,12 +1753,6 @@ ejs-calendar {
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
   margin: 3vh 0 0 0;
 }
-.e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar {
-  min-width: 100%;
-  width: 100%;
-  padding: 0;
-  overflow: unset;
-}
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar {
     min-height: 100%;
@@ -1771,6 +1765,12 @@ ejs-calendar {
     height: 80vh;
   }
 }
+.e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar {
+  min-width: 100%;
+  width: 100%;
+  padding: 0;
+  overflow: unset;
+}
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade {
   height: 10vh;
   border-style: solid;
@@ -2138,8 +2138,8 @@ ejs-calendar {
 
 .e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary:hover,
 .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary:hover {
-  background-color: #0b5ed7;
-  border-color: #0a58ca;
+  background-color: rgb(11.05, 93.5, 215.05);
+  border-color: rgb(10.4, 88, 202.4);
   color: #fff;
 }
 
@@ -2147,8 +2147,8 @@ ejs-calendar {
 .e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary.e-active,
 .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary:active,
 .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary.e-active {
-  background-color: #0a58ca;
-  border-color: #0a53be;
+  background-color: rgb(10.4, 88, 202.4);
+  border-color: rgb(9.75, 82.5, 189.75);
   color: #fff;
 }
 
@@ -2170,8 +2170,8 @@ ejs-calendar {
 
 .e-daterangepicker.e-popup .e-footer .e-btn.e-flat:hover,
 .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-flat:hover {
-  background-color: #5c636a;
-  border-color: #565e64;
+  background-color: rgb(91.8, 99.45, 106.25);
+  border-color: rgb(86.4, 93.6, 100);
   color: #fff;
 }
 
@@ -2179,8 +2179,8 @@ ejs-calendar {
 .e-daterangepicker.e-popup .e-footer .e-btn.e-flat.e-active,
 .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-flat:active,
 .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-flat.e-active {
-  background-color: #51585e;
-  border-color: #51585e;
+  background-color: rgb(81, 87.75, 93.75);
+  border-color: rgb(81, 87.75, 93.75);
   color: #fff;
 }
 

package/styles/bootstrap5.3-lite.css

@@ -1734,12 +1734,6 @@ ejs-calendar {
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
   margin: 3vh 0 0 0;
 }
-.e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar {
-  min-width: 100%;
-  width: 100%;
-  padding: 0;
-  overflow: unset;
-}
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar {
     min-height: 100%;
@@ -1752,6 +1746,12 @@ ejs-calendar {
     height: 80vh;
   }
 }
+.e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar {
+  min-width: 100%;
+  width: 100%;
+  padding: 0;
+  overflow: unset;
+}
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade {
   height: 10vh;
   border-style: solid;

package/styles/bootstrap5.3.css

@@ -2418,12 +2418,6 @@ ejs-calendar {
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
   margin: 3vh 0 0 0;
 }
-.e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar {
-  min-width: 100%;
-  width: 100%;
-  padding: 0;
-  overflow: unset;
-}
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar {
     min-height: 100%;
@@ -2436,6 +2430,12 @@ ejs-calendar {
     height: 80vh;
   }
 }
+.e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar {
+  min-width: 100%;
+  width: 100%;
+  padding: 0;
+  overflow: unset;
+}
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade {
   height: 10vh;
   border-style: solid;

package/styles/bootstrap5.css

@@ -431,14 +431,14 @@ ejs-calendar {
   cursor: pointer;
 }
 .e-calendar .e-header .e-prev:hover, .e-calendar .e-header .e-next:hover {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
 }
 .e-calendar .e-header .e-prev:focus, .e-calendar .e-header .e-next:focus {
   -webkit-box-shadow: 0 0 0 1px #6c757d;
           box-shadow: 0 0 0 1px #6c757d;
 }
 .e-calendar .e-header .e-prev:active, .e-calendar .e-header .e-next:active {
-  background: #51585e;
+  background: rgb(81, 87.75, 93.75);
   color: #fff;
 }
 .e-calendar .e-header button.e-prev:active span, .e-calendar .e-header button.e-next:active span {
@@ -467,7 +467,7 @@ ejs-calendar {
   color: #adb5bd;
 }
 .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 {
-  background-color: #0257d5;
+  background-color: rgb(1.762295082, 87.2336065574, 213.237704918);
 }
 .e-calendar .e-content.e-year td > span.e-day, .e-calendar .e-content.e-decade td > span.e-day {
   background: none;
@@ -522,7 +522,7 @@ ejs-calendar {
   color: #fff;
 }
 .e-calendar .e-content td.e-today.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected:hover span.e-day, .e-calendar .e-content td.e-selected.e-focused-date span.e-day {
-  background: #0257d5;
+  background: rgb(1.762295082, 87.2336065574, 213.237704918);
   color: #fff;
 }
 .e-calendar .e-content span {
@@ -574,7 +574,7 @@ ejs-calendar {
   color: #0d6efd;
 }
 .e-calendar.e-device .e-prev:hover, .e-calendar.e-device .e-next:hover, .e-calendar.e-device .e-prev:active, .e-calendar.e-device .e-next:active, .e-calendar.e-device .e-prev:focus, .e-calendar.e-device .e-next:focus {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
 }
 .e-calendar.e-device button.e-prev:active span, .e-calendar.e-device button.e-next:active span {
   color: #6c757d;
@@ -620,8 +620,8 @@ ejs-calendar {
 
 .e-calendar .e-btn.e-today.e-flat.e-primary:hover,
 .e-calendar .e-css.e-btn.e-today.e-flat.e-primary:hover {
-  background-color: #0b5ed7;
-  border-color: #0a58ca;
+  background-color: rgb(11.05, 93.5, 215.05);
+  border-color: rgb(10.4, 88, 202.4);
   color: #fff;
 }
 
@@ -629,8 +629,8 @@ ejs-calendar {
 .e-calendar .e-btn.e-today.e-flat.e-primary.e-active,
 .e-calendar .e-css.e-btn.e-today.e-flat.e-primary:active,
 .e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-active {
-  background-color: #0a58ca;
-  border-color: #0a53be;
+  background-color: rgb(10.4, 88, 202.4);
+  border-color: rgb(9.75, 82.5, 189.75);
   color: #fff;
 }
 
@@ -825,14 +825,14 @@ ejs-calendar {
   cursor: pointer;
 }
 .e-bigger.e-small .e-calendar .e-header .e-prev:hover, .e-bigger.e-small .e-calendar .e-header .e-next:hover {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
 }
 .e-bigger.e-small .e-calendar .e-header .e-prev:focus, .e-bigger.e-small .e-calendar .e-header .e-next:focus {
   -webkit-box-shadow: 0 0 0 1px #6c757d;
           box-shadow: 0 0 0 1px #6c757d;
 }
 .e-bigger.e-small .e-calendar .e-header .e-prev:active, .e-bigger.e-small .e-calendar .e-header .e-next:active {
-  background: #51585e;
+  background: rgb(81, 87.75, 93.75);
   color: #fff;
 }
 .e-bigger.e-small .e-calendar .e-header button.e-prev:active span, .e-bigger.e-small .e-calendar .e-header button.e-next:active span {
@@ -861,7 +861,7 @@ ejs-calendar {
   color: #adb5bd;
 }
 .e-bigger.e-small .e-calendar .e-content.e-year td.e-selected:hover span.e-day, .e-bigger.e-small .e-calendar .e-content.e-decade td.e-selected:hover span.e-day {
-  background-color: #0257d5;
+  background-color: rgb(1.762295082, 87.2336065574, 213.237704918);
 }
 .e-bigger.e-small .e-calendar .e-content.e-year td > span.e-day, .e-bigger.e-small .e-calendar .e-content.e-decade td > span.e-day {
   background: none;
@@ -916,7 +916,7 @@ ejs-calendar {
   color: #fff;
 }
 .e-bigger.e-small .e-calendar .e-content td.e-today.e-selected:hover span.e-day, .e-bigger.e-small .e-calendar .e-content td.e-selected:hover span.e-day, .e-bigger.e-small .e-calendar .e-content td.e-selected.e-focused-date span.e-day {
-  background-color: #0257d5;
+  background-color: rgb(1.762295082, 87.2336065574, 213.237704918);
   color: #fff;
 }
 .e-bigger.e-small .e-calendar .e-content span {
@@ -968,7 +968,7 @@ ejs-calendar {
   color: #0d6efd;
 }
 .e-bigger.e-small .e-calendar.e-device .e-prev:hover, .e-bigger.e-small .e-calendar.e-device .e-next:hover, .e-bigger.e-small .e-calendar.e-device .e-prev:active, .e-bigger.e-small .e-calendar.e-device .e-next:active, .e-bigger.e-small .e-calendar.e-device .e-prev:focus, .e-bigger.e-small .e-calendar.e-device .e-next:focus {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
 }
 .e-bigger.e-small .e-calendar.e-device button.e-prev:active span, .e-bigger.e-small .e-calendar.e-device button.e-next:active span {
   color: #6c757d;
@@ -1478,8 +1478,8 @@ ejs-calendar {
 }
 /* stylelint-enable */
 .e-time-wrapper .e-input-group-icon.e-icons.e-active {
-  background: #565e64;
-  border-color: #545b62;
+  background: rgb(86.4, 93.6, 100);
+  border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
   color: #fff;
 }
 .e-time-wrapper.e-input-group:not(.e-disabled) .e-input-group-icon.e-active:active {
@@ -1989,7 +1989,7 @@ ejs-calendar {
 }
 
 .e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active {
-  background: #565e64;
+  background: rgb(86.4, 93.6, 100);
   border-color: #ced4da;
   color: #fff;
 }
@@ -2436,12 +2436,6 @@ ejs-calendar {
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-range-header .e-start-end {
   margin: 3vh 0 0 0;
 }
-.e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar {
-  min-width: 100%;
-  width: 100%;
-  padding: 0;
-  overflow: unset;
-}
 @media (max-height: 600px) {
   .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar {
     min-height: 100%;
@@ -2454,6 +2448,12 @@ ejs-calendar {
     height: 80vh;
   }
 }
+.e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar {
+  min-width: 100%;
+  width: 100%;
+  padding: 0;
+  overflow: unset;
+}
 .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-month, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-year, .e-daterangepick-mob-popup-wrap .e-daterangepicker.e-popup.e-popup-expand .e-date-range-container .e-calendar .e-header.e-decade {
   height: 10vh;
   border-style: solid;
@@ -2821,8 +2821,8 @@ ejs-calendar {
 
 .e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary:hover,
 .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary:hover {
-  background-color: #0b5ed7;
-  border-color: #0a58ca;
+  background-color: rgb(11.05, 93.5, 215.05);
+  border-color: rgb(10.4, 88, 202.4);
   color: #fff;
 }
 
@@ -2830,8 +2830,8 @@ ejs-calendar {
 .e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary.e-active,
 .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary:active,
 .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary.e-active {
-  background-color: #0a58ca;
-  border-color: #0a53be;
+  background-color: rgb(10.4, 88, 202.4);
+  border-color: rgb(9.75, 82.5, 189.75);
   color: #fff;
 }
 
@@ -2853,8 +2853,8 @@ ejs-calendar {
 
 .e-daterangepicker.e-popup .e-footer .e-btn.e-flat:hover,
 .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-flat:hover {
-  background-color: #5c636a;
-  border-color: #565e64;
+  background-color: rgb(91.8, 99.45, 106.25);
+  border-color: rgb(86.4, 93.6, 100);
   color: #fff;
 }
 
@@ -2862,8 +2862,8 @@ ejs-calendar {
 .e-daterangepicker.e-popup .e-footer .e-btn.e-flat.e-active,
 .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-flat:active,
 .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-flat.e-active {
-  background-color: #51585e;
-  border-color: #51585e;
+  background-color: rgb(81, 87.75, 93.75);
+  border-color: rgb(81, 87.75, 93.75);
   color: #fff;
 }
 

package/styles/calendar/_bigger.scss

@@ -5,6 +5,9 @@
     max-width: $calendar-bigger-max-width;
     min-width: $calendar-bigger-min-width;
     padding: $calendar-popup-bigger-padding;
+    @if $skin-name == 'fluent2' {
+      min-height: $calendar-bigger-min-height;
+    }
 
     #{if(&, '&', '*')}.e-calendar-day-header-lg {
       max-width: $calendar-lg-day-header-format-max-width;

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

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 //month view
 $calendar-normal-month-view-height: 28px !default;
 $calendar-normal-month-view-line-height: $calendar-normal-month-view-height !default;
@@ -98,7 +100,7 @@ $calendar-normal-today-button-height: 36px !default;
 //color
 $calendar-yeardecade-bg-color: none !default;
 $calendar-yeardecade-hover-bg: $grey-88 !default;
-$calendar-yeardecade-selected-hover-bg: darken($brand-primary, 10%) !default;
+$calendar-yeardecade-selected-hover-bg: color.adjust($brand-primary, $lightness: -10%) !default;
 
 //dimension
 $calendar-normal-year-decade-height: 54px !default;
@@ -151,7 +153,7 @@ $calendar-active-font-color: $brand-primary-font !default;
 $calendar-active-bg-color: $brand-primary !default;
 $calendar-active-bg-box-shadow: inset 1px 0 $brand-primary, inset 0 1px $brand-primary, inset -1px 0 $brand-primary, inset 0 -1px $brand-primary !default;
 $calendar-active-bg-border-color: none !default;
-$calendar-active-hover-bg-color: darken($brand-primary, 10%) !default;
+$calendar-active-hover-bg-color: color.adjust($brand-primary, $lightness: -10%) !default;
 $calendar-hover-color:  $grey-88 !default;
 $calendar-text-color: $grey-dark-font !default;
 $calendar-hover-text: $calendar-text-color !default;

package/styles/calendar/_bootstrap-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 /*! calendar bootstrap theme variables */
 
 //month view
@@ -95,7 +97,7 @@ $calendar-normal-today-button-height: 36px !default;
 //color
 $calendar-yeardecade-bg-color: none !default;
 $calendar-yeardecade-hover-bg: $grey-e6 !default;
-$calendar-yeardecade-selected-hover-bg: darken($brand-primary, 10%) !default;
+$calendar-yeardecade-selected-hover-bg: color.adjust($brand-primary, $lightness: -10%) !default;
 
 //dimension
 $calendar-normal-year-decade-height: 54px !default;
@@ -152,7 +154,7 @@ $calendar-active-today-hover-font-color: $brand-primary-font !default;
 $calendar-active-bg-color: $brand-primary !default;
 $calendar-active-bg-box-shadow: inset 1px 0 $brand-primary, inset 0 1px $brand-primary, inset -1px 0 $brand-primary, inset 0 -1px $brand-primary !default;
 $calendar-active-bg-border-color: none !default;
-$calendar-active-hover-bg-color: darken($brand-primary, 10%) !default;
+$calendar-active-hover-bg-color: color.adjust($brand-primary, $lightness: -10%) !default;
 $calendar-hover-color:  $grey-e6 !default;
 $calendar-text-color: $grey-light-font !default;
 $calendar-hover-text: $calendar-text-color !default;

package/styles/calendar/_bootstrap4-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 /*! calendar bootstrap theme variables */
 
 //month view
@@ -46,11 +48,11 @@ $calendar-icon-font-color: $gray-900 !default;
 $calendar-active-icon-color: $white !default;
 $calendar-title-hover-color: $gray-900 !default;
 $calendar-icon-hover-color: $gray-900 !default;
-$calendar-icon-hover-bg-color: darken($gray-100, 2%) !default;
+$calendar-icon-hover-bg-color: color.adjust($gray-100, $lightness: -2%) !default;
 $calendar-device-icon-hover-bg-color: none !default;
 $calendar-default-border-color: none !default;
 $calendar-icon-hover-border-color: $calendar-default-border-color !default;
-$calendar-active-state-icon-bg-color: darken($gray-600, 10%) !default;
+$calendar-active-state-icon-bg-color: color.adjust($gray-600, $lightness: -10%) !default;
 
 // common styles
 
@@ -94,8 +96,8 @@ $calendar-normal-today-button-height: 36px !default;
 
 //color
 $calendar-yeardecade-bg-color: none !default;
-$calendar-yeardecade-hover-bg: darken($gray-100, 2%) !default;
-$calendar-yeardecade-selected-hover-bg: darken($primary, 7.5%) !default;
+$calendar-yeardecade-hover-bg: color.adjust($gray-100, $lightness: -2%) !default;
+$calendar-yeardecade-selected-hover-bg: color.adjust($primary, $lightness: -7.5%) !default;
 
 //dimension
 $calendar-normal-year-decade-height: 53px !default;
@@ -152,12 +154,12 @@ $calendar-active-today-hover-font-color: $primary-font !default;
 $calendar-active-bg-color: $primary !default;
 $calendar-active-bg-box-shadow: inset 1px 0 $primary, inset 0 1px $primary, inset -1px 0 $primary, inset 0 -1px $primary !default;
 $calendar-active-bg-border-color: none !default;
-$calendar-active-hover-bg-color: darken($primary, 7.5%) !default;
-$calendar-hover-color: darken($gray-100, 2%) !default;
+$calendar-active-hover-bg-color: color.adjust($primary, $lightness: -7.5%) !default;
+$calendar-hover-color: color.adjust($gray-100, $lightness: -2%) !default;
 $calendar-text-color: $gray-900 !default;
 $calendar-hover-text: $calendar-text-color !default;
-$calendar-focus-bg-color: darken($gray-100, 2%) !default;
-$calendar-focused-today-bg-style: darken($gray-100, 2%) !default;
+$calendar-focus-bg-color: color.adjust($gray-100, $lightness: -2%) !default;
+$calendar-focused-today-bg-style: color.adjust($gray-100, $lightness: -2%) !default;
 $calendar-focused-today-box-shadow: inset 1px 0 $primary, inset 0 1px $primary, inset -1px 0 $primary, inset 0 -1px $primary !default;
 $calendar-focused-today-border-style: none !default;
 $calendar-focus-box-shadow: none !default;
@@ -172,7 +174,7 @@ $calendar-thead-padding: 0 0 6px !default;
 $calendar-date-font-size: 14px !default;
 $calendar-bigger-day-font-size: 15px !default;
 $calendar-link-font-weight-style: normal !default;
-$calendar-focused-date-bg-style: darken($gray-100, 2%) !default;
+$calendar-focused-date-bg-style: color.adjust($gray-100, $lightness: 2%) !default;
 $calendar-disable-font-weight-style: normal !default;
 $calendar-border-radius: 4px !default;
 
@@ -180,7 +182,7 @@ $calendar-border-radius: 4px !default;
 
 //today date
 $calendar-today-bg-style: $white !default;
-$calendar-today-bg-hover-color: darken($gray-100, 2%) !default;
+$calendar-today-bg-hover-color: color.adjust($gray-100, $lightness: 2%) !default;
 $calendar-today-box-shadow: inset 1px 0 $primary, inset 0 1px $primary, inset -1px 0 $primary, inset 0 -1px $primary !default;
 $calendar-today-border-color: none !default;
 $calendar-selected-border-color: none !default;

package/styles/calendar/_bootstrap5-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 /*! calendar bootstrap5 theme variables */
 //month view
 $calendar-normal-month-view-height: 32px !default;
@@ -183,7 +185,7 @@ $calendar-box-shadow: none !default;
 //color
 $calendar-yeardecade-bg-color: none !default;
 $calendar-yeardecade-hover-bg: $content-bg-color-hover !default;
-$calendar-yeardecade-selected-hover-bg: darken($primary-bg-color, 10%) !default;
+$calendar-yeardecade-selected-hover-bg: color.adjust($primary-bg-color, $lightness: -10%) !default;
 
 //decade view color
 $calendar-other-decade-cell-color: $content-text-color-alt2 !default;
@@ -203,7 +205,7 @@ $calendar-active-today-hover-font-color: $primary-text-pressed !default;
 $calendar-active-bg-color: $primary-bg-color !default;
 $calendar-active-bg-box-shadow: inset 1px 0 $primary-bg-color, inset 0 1px $primary-bg-color, inset -1px 0 $primary-bg-color, inset 0 -1px $primary-bg-color !default;
 $calendar-active-bg-border-color: none !default;
-$calendar-active-hover-bg-color: darken($primary-bg-color, 10%) !default;
+$calendar-active-hover-bg-color: color.adjust($primary-bg-color, $lightness: -10%) !default;
 $calendar-hover-color: $flyout-bg-color-hover !default;
 $calendar-text-color: $content-text-color !default;
 $calendar-hover-text: $calendar-text-color !default;

package/styles/calendar/_fabric-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 /*! calendar fabric theme variables */
 $calendar-title-hover-color: $theme-darker !default;
 $calendar-icon-hover-color: $neutral-light-fontalt !default;
@@ -149,7 +151,7 @@ $calendar-bigger-year-decade-width: $calendar-bigger-year-decade-height !default
 $calendar-today-bg-hover-color: $alert-bg !default;
 $calendar-disable-font-color: $calendar-light-font !default;
 $calendar-disable-opacity: .35 !default;
-$calendar-active-hover-bg-color: darken($calendar-active-bg-color, 10%) !default;
+$calendar-active-hover-bg-color: color.adjust($calendar-active-bg-color, $lightness: -10%) !default;
 $calendar-other-decade-cell-color: $calendar-other-month-date !default;
 $calendar-decade-title-left-margin-style: $calendar-title-margin-left-style !default;
 $calendar-icon-padding: 7px !default;

package/styles/calendar/_fluent2-definition.scss

@@ -282,6 +282,7 @@ $calendar-today-btn-primary-disabled-border-color: $primary-border-color-disable
 $calendar-disabled-today-box-shadow: none !default;
 $calendar-disabled-today-font-color: $primary-text-disabled !default;
 $calendar-normal-min-height: 256px !default;
+$calendar-bigger-min-height: 300px !default;
 $calendar-normal-year-decade-height-inside: 40px !default;
 $calendar-bigger-year-decade-height-inside: 40px !default;
 $calendar-selected-box-shadow: none !default;

package/styles/calendar/_fusionnew-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 /*! calendar bootstrap5 theme variables */
 //month view
 $calendar-normal-month-view-height: 32px !default;
@@ -185,7 +187,7 @@ $calendar-box-shadow: none !default;
 //color
 $calendar-yeardecade-bg-color: none !default;
 $calendar-yeardecade-hover-bg: $content-bg-color-hover !default;
-$calendar-yeardecade-selected-hover-bg: darken($primary-bg-color, 10%) !default;
+$calendar-yeardecade-selected-hover-bg: color.adjust($primary-bg-color, $lightness: -10%) !default;
 
 //decade view color
 $calendar-other-decade-cell-color: $content-text-color-alt2 !default;
@@ -205,7 +207,7 @@ $calendar-active-today-hover-font-color: $primary-text-pressed !default;
 $calendar-active-bg-color: $primary-bg-color !default;
 $calendar-active-bg-box-shadow: inset 1px 0 $primary-bg-color, inset 0 1px $primary-bg-color, inset -1px 0 $primary-bg-color, inset 0 -1px $primary-bg-color !default;
 $calendar-active-bg-border-color: none !default;
-$calendar-active-hover-bg-color: darken($primary-bg-color, 10%) !default;
+$calendar-active-hover-bg-color: color.adjust($primary-bg-color, $lightness: -10%) !default;
 $calendar-hover-color: $flyout-bg-color-hover !default;
 $calendar-text-color: $content-text-color !default;
 $calendar-hover-text: $calendar-text-color !default;

package/styles/calendar/_highcontrast-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 /*! calendar fabric theme variables */
 $calendar-title-hover-color: $selection-bg !default;
 $calendar-icon-hover-color: $hover-font !default;
@@ -147,7 +149,7 @@ $calendar-bigger-year-decade-width: $calendar-bigger-year-decade-height !default
 $calendar-today-bg-hover-color: $bg-base-20 !default;
 $calendar-disable-font-color: $disable !default;
 $calendar-disable-opacity: 1 !default;
-$calendar-active-hover-bg-color: lighten($selection-bg, 15%) !default;
+$calendar-active-hover-bg-color: color.adjust($selection-bg, $lightness: 15%) !default;
 $calendar-other-decade-cell-color: $calendar-other-month-date !default;
 $calendar-decade-title-left-margin-style: $calendar-title-margin-left-style !default;
 $calendar-icon-padding: 6px 7px !default;

package/styles/calendar/_material-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 /*! calendar material theme variables */
 $calendar-title-hover-color: rgba($grey-light-font, .75) !default;
 $calendar-icon-hover-color: rgba($grey-light-font, .75) !default;
@@ -147,7 +149,7 @@ $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;
 $calendar-disable-opacity: .35 !default;
-$calendar-active-hover-bg-color: darken($calendar-active-bg-color, 10%) !default;
+$calendar-active-hover-bg-color: color.adjust($calendar-active-bg-color, $lightness: -10%) !default;
 $calendar-other-decade-cell-color: $calendar-other-month-date !default;
 $calendar-icon-padding: 10px !default;
 $calendar-icon-button-margin: 0 !default;

package/styles/calendar/_tailwind-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 /*! calendar tailwind theme variables */
 //month view
 $calendar-normal-month-view-height: 30px !default;
@@ -198,7 +200,7 @@ $calendar-box-shadow: $shadow-sm !default;
 //color
 $calendar-yeardecade-bg-color: none !default;
 $calendar-yeardecade-hover-bg: $content-bg-color-hover !default;
-$calendar-yeardecade-selected-hover-bg: darken($primary-bg-color, 10%) !default;
+$calendar-yeardecade-selected-hover-bg: color.adjust($primary-bg-color, $lightness: -10%) !default;
 
 //decade view color
 $calendar-other-decade-cell-color: $content-text-color-alt2 !default;
@@ -218,7 +220,7 @@ $calendar-active-today-hover-font-color: $primary-text-pressed !default;
 $calendar-active-bg-color: $primary-bg-color !default;
 $calendar-active-bg-box-shadow: inset 1px 0 $primary-bg-color, inset 0 1px $primary-bg-color, inset -1px 0 $primary-bg-color, inset 0 -1px $primary-bg-color !default;
 $calendar-active-bg-border-color: none !default;
-$calendar-active-hover-bg-color: darken($primary-bg-color, 10%) !default;
+$calendar-active-hover-bg-color: color.adjust($primary-bg-color, $lightness: -10%) !default;
 $calendar-hover-color:  $content-bg-color-hover !default;
 $calendar-text-color: $content-text-color-alt1 !default;
 $calendar-hover-text: $calendar-text-color !default;

package/styles/calendar/_theme.scss

@@ -578,7 +578,7 @@
 
   .e-calendar .e-content.e-month .e-selected.e-focused-date {
     @if $skin-name == 'tailwind3' {
-      box-shadow: $calendar-active-bg-box-shadow;
+      box-shadow: none;
     }
   }
   .e-calendar .e-content.e-year td.e-selected span.e-day,