@syncfusion/ej2-calendars 27.2.2 → 28.1.33

package/styles/bds.scss

@@ -0,0 +1,24 @@
+@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';

package/styles/bootstrap-dark-lite.css

@@ -282,6 +282,7 @@ ejs-calendar {
 .e-calendar .e-footer-container {
   background-color: transparent;
   border-top: none;
+  text-align: center;
   cursor: default;
   display: inline-block;
   -webkit-box-orient: horizontal;
@@ -292,7 +293,6 @@ ejs-calendar {
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding: 10px 0 0 0;
-  text-align: center;
   width: 100%;
 }
 .e-small.e-calendar,
@@ -1085,7 +1085,7 @@ ejs-calendar {
   }
 }
 .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 {
-  margin-right: 75vw;
+  margin-right: 18px;
   vertical-align: inherit;
   height: 35px;
   width: 35px;
@@ -2113,6 +2113,12 @@ ejs-calendar {
   margin: 0;
 }
 
+.e-control.e-datetimepicker.e-popup-wrapper.e-popup-container.e-popup-expand.e-popup.e-popup-open .e-datetime-mob-popup-wrap {
+  -webkit-box-align: normal;
+      -ms-flex-align: normal;
+          align-items: normal;
+}
+
 .e-datetime-mob-popup-wrap {
   -webkit-box-align: center;
       -ms-flex-align: center;

package/styles/bootstrap-dark.css

@@ -282,6 +282,7 @@ ejs-calendar {
 .e-calendar .e-footer-container {
   background-color: transparent;
   border-top: none;
+  text-align: center;
   cursor: default;
   display: inline-block;
   -webkit-box-orient: horizontal;
@@ -292,7 +293,6 @@ ejs-calendar {
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding: 10px 0 0 0;
-  text-align: center;
   width: 100%;
 }
 .e-small.e-calendar,
@@ -1161,6 +1161,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-footer-container {
   background-color: transparent;
   border-top: none;
+  text-align: center;
   cursor: default;
   display: inline-block;
   -webkit-box-orient: horizontal;
@@ -1171,7 +1172,6 @@ ejs-calendar {
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding: 10px 0 0 0;
-  text-align: center;
   width: 100%;
 }
 .e-small.e-bigger.e-calendar .e-content.e-year span.e-day,
@@ -1712,7 +1712,7 @@ ejs-calendar {
   }
 }
 .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 {
-  margin-right: 75vw;
+  margin-right: 18px;
   vertical-align: inherit;
   height: 35px;
   width: 35px;
@@ -3397,6 +3397,12 @@ ejs-calendar {
   margin: 0;
 }
 
+.e-control.e-datetimepicker.e-popup-wrapper.e-popup-container.e-popup-expand.e-popup.e-popup-open .e-datetime-mob-popup-wrap {
+  -webkit-box-align: normal;
+      -ms-flex-align: normal;
+          align-items: normal;
+}
+
 .e-datetime-mob-popup-wrap {
   -webkit-box-align: center;
       -ms-flex-align: center;

package/styles/bootstrap-lite.css

@@ -283,6 +283,7 @@ ejs-calendar {
 .e-calendar .e-footer-container {
   background-color: #fff;
   border-top: none;
+  text-align: center;
   cursor: default;
   display: inline-block;
   -webkit-box-orient: horizontal;
@@ -293,7 +294,6 @@ ejs-calendar {
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding: 10px 0 0 0;
-  text-align: center;
   width: 100%;
 }
 .e-small.e-calendar,
@@ -2120,6 +2120,12 @@ ejs-calendar {
   margin: 0;
 }
 
+.e-control.e-datetimepicker.e-popup-wrapper.e-popup-container.e-popup-expand.e-popup.e-popup-open .e-datetime-mob-popup-wrap {
+  -webkit-box-align: normal;
+      -ms-flex-align: normal;
+          align-items: normal;
+}
+
 .e-datetime-mob-popup-wrap {
   -webkit-box-align: center;
       -ms-flex-align: center;

package/styles/bootstrap.css

@@ -283,6 +283,7 @@ ejs-calendar {
 .e-calendar .e-footer-container {
   background-color: #fff;
   border-top: none;
+  text-align: center;
   cursor: default;
   display: inline-block;
   -webkit-box-orient: horizontal;
@@ -293,7 +294,6 @@ ejs-calendar {
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding: 10px 0 0 0;
-  text-align: center;
   width: 100%;
 }
 .e-small.e-calendar,
@@ -1162,6 +1162,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-footer-container {
   background-color: #fff;
   border-top: none;
+  text-align: center;
   cursor: default;
   display: inline-block;
   -webkit-box-orient: horizontal;
@@ -1172,7 +1173,6 @@ ejs-calendar {
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding: 10px 0 0 0;
-  text-align: center;
   width: 100%;
 }
 .e-small.e-bigger.e-calendar .e-content.e-year span.e-day,
@@ -3409,6 +3409,12 @@ ejs-calendar {
   margin: 0;
 }
 
+.e-control.e-datetimepicker.e-popup-wrapper.e-popup-container.e-popup-expand.e-popup.e-popup-open .e-datetime-mob-popup-wrap {
+  -webkit-box-align: normal;
+      -ms-flex-align: normal;
+          align-items: normal;
+}
+
 .e-datetime-mob-popup-wrap {
   -webkit-box-align: center;
       -ms-flex-align: center;

package/styles/bootstrap4-lite.css

@@ -283,6 +283,7 @@ ejs-calendar {
 .e-calendar .e-footer-container {
   background-color: #fff;
   border-top: 1px solid #e9ecef;
+  text-align: center;
   cursor: default;
   display: inline-block;
   -webkit-box-orient: horizontal;
@@ -293,7 +294,6 @@ ejs-calendar {
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding: 12px;
-  text-align: center;
   width: 100%;
 }
 .e-small.e-calendar,
@@ -2139,6 +2139,12 @@ ejs-calendar {
   margin: 0;
 }
 
+.e-control.e-datetimepicker.e-popup-wrapper.e-popup-container.e-popup-expand.e-popup.e-popup-open .e-datetime-mob-popup-wrap {
+  -webkit-box-align: normal;
+      -ms-flex-align: normal;
+          align-items: normal;
+}
+
 .e-datetime-mob-popup-wrap {
   -webkit-box-align: center;
       -ms-flex-align: center;

package/styles/bootstrap4.css

@@ -283,6 +283,7 @@ ejs-calendar {
 .e-calendar .e-footer-container {
   background-color: #fff;
   border-top: 1px solid #e9ecef;
+  text-align: center;
   cursor: default;
   display: inline-block;
   -webkit-box-orient: horizontal;
@@ -293,7 +294,6 @@ ejs-calendar {
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding: 12px;
-  text-align: center;
   width: 100%;
 }
 .e-small.e-calendar,
@@ -1162,6 +1162,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-footer-container {
   background-color: #fff;
   border-top: 1px solid #e9ecef;
+  text-align: center;
   cursor: default;
   display: inline-block;
   -webkit-box-orient: horizontal;
@@ -1172,7 +1173,6 @@ ejs-calendar {
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding: 12px;
-  text-align: center;
   width: 100%;
 }
 .e-small.e-bigger.e-calendar .e-content.e-year span.e-day,
@@ -3435,6 +3435,12 @@ ejs-calendar {
   margin: 0;
 }
 
+.e-control.e-datetimepicker.e-popup-wrapper.e-popup-container.e-popup-expand.e-popup.e-popup-open .e-datetime-mob-popup-wrap {
+  -webkit-box-align: normal;
+      -ms-flex-align: normal;
+          align-items: normal;
+}
+
 .e-datetime-mob-popup-wrap {
   -webkit-box-align: center;
       -ms-flex-align: center;

package/styles/bootstrap5-dark-lite.css

@@ -283,6 +283,7 @@ ejs-calendar {
 .e-calendar .e-footer-container {
   background-color: transparent;
   border-top: 1px solid #444c54;
+  text-align: center;
   cursor: default;
   display: inline-block;
   -webkit-box-orient: horizontal;
@@ -293,7 +294,6 @@ ejs-calendar {
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding: 8px;
-  text-align: center;
   width: 100%;
 }
 .e-calendar.e-rtl .e-header .e-title {
@@ -2250,6 +2250,12 @@ ejs-calendar {
   margin: 0;
 }
 
+.e-control.e-datetimepicker.e-popup-wrapper.e-popup-container.e-popup-expand.e-popup.e-popup-open .e-datetime-mob-popup-wrap {
+  -webkit-box-align: normal;
+      -ms-flex-align: normal;
+          align-items: normal;
+}
+
 .e-datetime-mob-popup-wrap {
   -webkit-box-align: center;
       -ms-flex-align: center;

package/styles/bootstrap5-dark.css

@@ -283,6 +283,7 @@ ejs-calendar {
 .e-calendar .e-footer-container {
   background-color: transparent;
   border-top: 1px solid #444c54;
+  text-align: center;
   cursor: default;
   display: inline-block;
   -webkit-box-orient: horizontal;
@@ -293,7 +294,6 @@ ejs-calendar {
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding: 8px;
-  text-align: center;
   width: 100%;
 }
 .e-calendar.e-rtl .e-header .e-title {
@@ -1221,6 +1221,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-footer-container {
   background-color: transparent;
   border-top: 1px solid #444c54;
+  text-align: center;
   cursor: default;
   display: inline-block;
   -webkit-box-orient: horizontal;
@@ -1231,7 +1232,6 @@ ejs-calendar {
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding: 8px;
-  text-align: center;
   width: 100%;
 }
 .e-bigger.e-small .e-calendar.e-rtl .e-header .e-title {
@@ -3569,6 +3569,12 @@ ejs-calendar {
   margin: 0;
 }
 
+.e-control.e-datetimepicker.e-popup-wrapper.e-popup-container.e-popup-expand.e-popup.e-popup-open .e-datetime-mob-popup-wrap {
+  -webkit-box-align: normal;
+      -ms-flex-align: normal;
+          align-items: normal;
+}
+
 .e-datetime-mob-popup-wrap {
   -webkit-box-align: center;
       -ms-flex-align: center;

package/styles/bootstrap5-lite.css

@@ -283,6 +283,7 @@ ejs-calendar {
 .e-calendar .e-footer-container {
   background-color: transparent;
   border-top: 1px solid #dee2e6;
+  text-align: center;
   cursor: default;
   display: inline-block;
   -webkit-box-orient: horizontal;
@@ -293,7 +294,6 @@ ejs-calendar {
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding: 8px;
-  text-align: center;
   width: 100%;
 }
 .e-calendar.e-rtl .e-header .e-title {
@@ -2250,6 +2250,12 @@ ejs-calendar {
   margin: 0;
 }
 
+.e-control.e-datetimepicker.e-popup-wrapper.e-popup-container.e-popup-expand.e-popup.e-popup-open .e-datetime-mob-popup-wrap {
+  -webkit-box-align: normal;
+      -ms-flex-align: normal;
+          align-items: normal;
+}
+
 .e-datetime-mob-popup-wrap {
   -webkit-box-align: center;
       -ms-flex-align: center;

package/styles/bootstrap5.3-lite.css

@@ -287,6 +287,7 @@ ejs-calendar {
 .e-calendar .e-footer-container {
   background-color: transparent;
   border-top: 1px solid var(--color-sf-border-light);
+  text-align: center;
   cursor: default;
   display: inline-block;
   -webkit-box-orient: horizontal;
@@ -297,7 +298,6 @@ ejs-calendar {
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding: 8px;
-  text-align: center;
   width: 100%;
 }
 .e-calendar.e-rtl .e-header .e-title {
@@ -1121,7 +1121,7 @@ ejs-calendar {
   }
 }
 .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 {
-  margin-right: 75vw;
+  margin-right: 18px;
   vertical-align: inherit;
   height: 46px;
   width: 46px;
@@ -2231,6 +2231,12 @@ ejs-calendar {
   margin: 0;
 }
 
+.e-control.e-datetimepicker.e-popup-wrapper.e-popup-container.e-popup-expand.e-popup.e-popup-open .e-datetime-mob-popup-wrap {
+  -webkit-box-align: normal;
+      -ms-flex-align: normal;
+          align-items: normal;
+}
+
 .e-datetime-mob-popup-wrap {
   -webkit-box-align: center;
       -ms-flex-align: center;

package/styles/bootstrap5.3.css

@@ -287,6 +287,7 @@ ejs-calendar {
 .e-calendar .e-footer-container {
   background-color: transparent;
   border-top: 1px solid var(--color-sf-border-light);
+  text-align: center;
   cursor: default;
   display: inline-block;
   -webkit-box-orient: horizontal;
@@ -297,7 +298,6 @@ ejs-calendar {
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding: 8px;
-  text-align: center;
   width: 100%;
 }
 .e-calendar.e-rtl .e-header .e-title {
@@ -1202,6 +1202,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-footer-container {
   background-color: transparent;
   border-top: 1px solid var(--color-sf-border-light);
+  text-align: center;
   cursor: default;
   display: inline-block;
   -webkit-box-orient: horizontal;
@@ -1212,7 +1213,6 @@ ejs-calendar {
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding: 8px;
-  text-align: center;
   width: 100%;
 }
 .e-bigger.e-small .e-calendar.e-rtl .e-header .e-title {
@@ -1772,7 +1772,7 @@ ejs-calendar {
   }
 }
 .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 {
-  margin-right: 75vw;
+  margin-right: 18px;
   vertical-align: inherit;
   height: 46px;
   width: 46px;
@@ -3551,6 +3551,12 @@ ejs-calendar {
   margin: 0;
 }
 
+.e-control.e-datetimepicker.e-popup-wrapper.e-popup-container.e-popup-expand.e-popup.e-popup-open .e-datetime-mob-popup-wrap {
+  -webkit-box-align: normal;
+      -ms-flex-align: normal;
+          align-items: normal;
+}
+
 .e-datetime-mob-popup-wrap {
   -webkit-box-align: center;
       -ms-flex-align: center;

package/styles/bootstrap5.css

@@ -283,6 +283,7 @@ ejs-calendar {
 .e-calendar .e-footer-container {
   background-color: transparent;
   border-top: 1px solid #dee2e6;
+  text-align: center;
   cursor: default;
   display: inline-block;
   -webkit-box-orient: horizontal;
@@ -293,7 +294,6 @@ ejs-calendar {
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding: 8px;
-  text-align: center;
   width: 100%;
 }
 .e-calendar.e-rtl .e-header .e-title {
@@ -1221,6 +1221,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-footer-container {
   background-color: transparent;
   border-top: 1px solid #dee2e6;
+  text-align: center;
   cursor: default;
   display: inline-block;
   -webkit-box-orient: horizontal;
@@ -1231,7 +1232,6 @@ ejs-calendar {
       -ms-flex-pack: end;
           justify-content: flex-end;
   padding: 8px;
-  text-align: center;
   width: 100%;
 }
 .e-bigger.e-small .e-calendar.e-rtl .e-header .e-title {
@@ -3569,6 +3569,12 @@ ejs-calendar {
   margin: 0;
 }
 
+.e-control.e-datetimepicker.e-popup-wrapper.e-popup-container.e-popup-expand.e-popup.e-popup-open .e-datetime-mob-popup-wrap {
+  -webkit-box-align: normal;
+      -ms-flex-align: normal;
+          align-items: normal;
+}
+
 .e-datetime-mob-popup-wrap {
   -webkit-box-align: center;
       -ms-flex-align: center;

package/styles/calendar/_bigger.scss

@@ -139,7 +139,9 @@
       }
     }
     #{if(&, '&', '*')} .e-footer-container {
-      border-top: $calendar-bigger-footer-border;
+      @if $skin-name != 'tailwind3' {
+        border-top: $calendar-bigger-footer-border;
+      }
       padding: $calendar-bigger-footer-container-padding;
     }
     #{if(&, '&', '*')} .e-header .e-title {
@@ -318,7 +320,9 @@
         #{if(&, '&', '*')} td.e-focused-date span.e-day,
         #{if(&, '&', '*')} td.e-focused-date:hover span.e-day,
         #{if(&, '&', '*')} td.e-focused-date:focus span.e-day {
-          background: $calendar-focused-date-bg-style;
+          @if $skin-name != 'tailwind3' {
+            background: $calendar-focused-date-bg-style;
+          }
           border: $calendar-focus-border-color;
           border-radius: $calendar-border-radius;
           box-shadow: $calendar-focus-box-shadow;
@@ -437,7 +441,7 @@
         #{if(&, '&', '*')} td.e-today.e-selected:hover span.e-day,
         #{if(&, '&', '*')} td.e-selected:hover span.e-day,
         #{if(&, '&', '*')} td.e-selected.e-focused-date span.e-day {
-          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
+          @if ($skin-name != 'Material3' and $skin-name != 'fluent2' and $skin-name != 'tailwind3') {
             background-color: $calendar-active-hover-bg-color;
           }
           @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
@@ -531,13 +535,13 @@
           }
         }
         #{if(&, '&', '*')} td.e-selected span.e-day {
-          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
+          @if ($skin-name != 'Material3' and $skin-name != 'fluent2' and $skin-name != 'tailwind3') {
             background-color: $calendar-active-bg-color;
           }
           @if $skin-name == 'Material3' {
             background: $calendar-active-bg-color;
           }
-          @if $skin-name == 'fluent2' {
+          @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
             background: $calendar-active-bg-color;
             color: $calendar-active-font-colour;
           }
@@ -545,7 +549,12 @@
             color: $calendar-active-font-color;
           }
           border: $calendar-selected-border-color;
-          border-radius: $calendar-border-radius;
+          @if $skin-name == 'tailwind3' {
+            border-radius: 40px;
+          }
+          @else {
+            border-radius: $calendar-border-radius;
+          }
         }
         #{if(&, '&', '*')} td.e-selected:not(.e-focused-date) span.e-day {
           @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
@@ -1031,13 +1040,18 @@
       @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
         background: $calendar-footer-background;
       }
-      border-top: $calendar-footer-border;
+      @if $skin-name == 'tailwind3' {
+        text-align: right;
+      }
+      @if $skin-name != 'tailwind3' {
+        border-top: $calendar-footer-border;
+        text-align: center;
+      }
       cursor: $calendar-cursor-default-style;
       display: $calendar-display-style;
       flex-direction: row;
       justify-content: flex-end;
       padding: $calendar-footer-container-padding;
-      text-align: center;
       width: $calendar-full-width;
     }
     #{if(&, '&', '*')}.e-rtl .e-header .e-title {

package/styles/calendar/_fluent2-definition.scss

@@ -51,12 +51,12 @@ $calendar-small-max-width: 212px !default;
 $calendar-small-min-width: 212px !default;
 $calendar-normal-max-width: 244px !default;
 $calendar-normal-min-width: 244px !default;
-$calendar-bigger-max-width: 280px !default;
-$calendar-bigger-min-width: 280px !default;
+$calendar-bigger-max-width: 300px !default;
+$calendar-bigger-min-width: 300px !default;
 $calendar-bigger-small-max-width: 276px !default;
 $calendar-bigger-small-min-width: 276px !default;
-$calendar-weeknumber-min-width: 262px !default;
-$calendar-weeknumber-bigger-width: 300px !default;
+$calendar-weeknumber-min-width: 280px !default;
+$calendar-weeknumber-bigger-width: 335px !default;
 $calendar-popup-padding: 0 !default;
 $calendar-popup-bigger-padding: 0 !default;
 
@@ -292,3 +292,7 @@ $calendar-focused-state-border-radius: 2px !default;
 $calendar-focused-state-box-shadow: none !default;
 $calendar-focused-state-month-box-shadow: none !default;
 $calendar-selected-month-bg-color: $primary-lighter !default;
+
+.e-small:not(.e-bigger) .e-calendar.e-week-number {
+  min-width: 230px;
+}

package/styles/calendar/_layout.scss

@@ -235,6 +235,10 @@
       display: $calendar-inline-block-style;
       float: $calendar-float-right-style;
       padding-top: $calendar-icon-padding-top;
+      @if $skin-name == 'tailwind3' {
+        position: inherit;
+        top: 4px;
+      }
     }
     #{if(&, '&', '*')} .e-footer-container {
       text-transform: uppercase;
@@ -349,6 +353,14 @@
         width: $calendar-normal-year-decade-width;
       }
     }
+    #{if(&, '&', '*')} .e-content.e-year td .e-selected,
+    #{if(&, '&', '*')} .e-content.e-decade td .e-selected {
+      @if $skin-name == 'tailwind3' {
+        background: $calendar-active-bg-color;
+        border-radius: 6px;
+      }
+    }
+
     #{if(&, '&', '*')} .e-content.e-year td > span.e-day,
     #{if(&, '&', '*')} .e-content.e-decade td > span.e-day {
       @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
@@ -392,13 +404,18 @@
       @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
         background: $calendar-footer-background;
       }
-      border-top: $calendar-footer-border;
+      @if $skin-name == 'tailwind3' {
+        text-align: right;
+      }
+      @if $skin-name != 'tailwind3' {
+        border-top: $calendar-footer-border;
+        text-align: center;
+      }
       cursor: $calendar-cursor-default-style;
       display: $calendar-display-style;
       flex-direction: row;
       justify-content: flex-end;
       padding: $calendar-footer-container-padding;
-      text-align: center;
       width: $calendar-full-width;
     }
     #{if(&, '&', '*')}.e-rtl .e-header .e-title {