@syncfusion/ej2-calendars 31.2.18 → 32.1.20

package/styles/bootstrap5.3.scss

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

package/styles/bootstrap5.css

@@ -1739,7 +1739,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 {
@@ -1757,7 +1757,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 {
@@ -1787,7 +1787,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 {
@@ -1807,7 +1807,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 {
@@ -1827,7 +1827,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 {
@@ -1835,13 +1835,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;
@@ -2522,14 +2522,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/bootstrap5.scss

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

package/styles/calendar/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

package/styles/calendar/_bds-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
+
 /*! calendar theme variables */
 //month view
 $calendar-normal-month-view-height: 32px !default;
@@ -271,3 +274,14 @@ $calendar-today-btn-primary-color: $primary-text-color !default;
 $calendar-today-btn-primary-disabled-bgcolor: $primary-bg-color-disabled !default;
 $calendar-today-btn-primary-disabled-color: $primary-text-disabled !default;
 $calendar-today-btn-primary-disabled-border-color: $primary-border-color-disabled !default;
+
+$line-height: 14px;
+$margin-zero: 0;
+$padding-zero: 0;
+$calendar-bigger-rtl-header-text-indent: 6px !default;
+$calendar-zero-border-radius: 0 !default;
+$calendar-bigger-header-width: 60% !default;
+$calendar-bigger-placeholder-min-height: 392px !default;
+$calendar-small-min-height: 220px !default;
+
+$border-zero: 0;

package/styles/calendar/_bigger.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('calendar-bigger') {
 
   .e-bigger#{&}.e-calendar,
@@ -29,16 +31,17 @@
       @else {
         line-height: $calendar-bigger-header-height;
       }
-      @if $skin-name == 'fluent2' {
-        width: auto;
-      }
-      @else {
-        width: 60%;
+      width: $calendar-bigger-header-width;
+    }
+    #{if(&, '&', '*')}:not(.e-rtl) .e-header.e-year .e-title,
+    #{if(&, '&', '*')}:not(.e-rtl) .e-header.e-month .e-title {
+      @if $skin-name == 'Material3' {
+        margin-left: -3px;
       }
     }
     #{if(&, '&', '*')}.e-rtl .e-header .e-title {
       line-height: $calendar-bigger-header-height;
-      text-indent: 6px;
+      text-indent: $calendar-bigger-rtl-header-text-indent;
     }
     #{if(&, '&', '*')} .e-header {
       height: $calendar-bigger-header-height;
@@ -80,7 +83,7 @@
 
       #{if(&, '&', '*')} .e-selected ,
       #{if(&, '&', '*')} .e-state-hover {
-        border-radius: 0;
+        border-radius: $calendar-zero-border-radius;
       }
       #{if(&, '&', '*')} span.e-day {
         font-size: $calendar-bigger-month-font-size;
@@ -163,13 +166,13 @@
   .e-bigger .e-content-placeholder.e-calendar.e-placeholder-calendar,
   .e-bigger.e-content-placeholder.e-calendar.e-placeholder-calendar {
     background-size: 300px 392px;
-    min-height: 392px;
+    min-height: $calendar-bigger-placeholder-min-height;
   }
 
   .e-bigger.e-small #{&}.e-calendar {
     @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
       background: $calendar-bg-color;
-      border-radius: 8px;
+      border-radius: $calendar-bgr-small-border-radius;
     }
     @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
       background-color: $calendar-bg-color;
@@ -181,12 +184,12 @@
       color: $calendar-header-icon-color;
     }
     #{if(&, '&', '*')} th {
-      border-bottom: 0;
+      border-bottom: $border-zero;
       color: $calendar-week-header-font-color;
     }
     @at-root {
       #{if(&, '&', '*')} .e-header {
-        border-bottom: 0;
+        border-bottom: $border-zero;
         #{if(&, '&', '*')} a {
           #{if(&, '&', '*')} span {
             border: $calendar-default-border-color;
@@ -275,7 +278,7 @@
       #{if(&, '&', '*')} .e-content.e-decade {
         #{if(&, '&', '*')} td.e-selected span.e-day {
           @if $skin-name == 'fluent2' {
-            font-weight: 600;
+            font-weight: $font-weight-semibold;
           }
         }
       }
@@ -335,7 +338,7 @@
             box-shadow: $calendar-focused-state-box-shadow;
           }
           @if $skin-name == 'fluent2' {
-            font-weight: 600;
+            font-weight: $font-weight-semibold;
           }
         }
         #{if(&, '&', '*')} td.e-focused-date:hover span.e-day {
@@ -462,7 +465,7 @@
         }
         #{if(&, '&', '*')} .e-disabled span.e-day:hover {
           background: $calendar-none-style;
-          border: 0;
+          border: $border-zero;
           color: $calendar-disable-font-color;
         }
         #{if(&, '&', '*')} .e-other-month:hover span.e-day {
@@ -492,7 +495,7 @@
         }
         #{if(&, '&', '*')} thead {
           background: $calendar-week-header-bg-style;
-          border-bottom: 0;
+          border-bottom: $border-zero;
         }
         #{if(&, '&', '*')} td:hover span.e-day,
         #{if(&, '&', '*')} td:focus span.e-day {
@@ -553,7 +556,7 @@
           }
           border: $calendar-selected-border-color;
           @if $skin-name == 'tailwind3' {
-            border-radius: 40px;
+            border-radius: $calendar-selected-span-border-radius;
           }
           @else {
             border-radius: $calendar-border-radius;
@@ -629,7 +632,7 @@
         #{if(&, '&', '*')}.e-decade td.e-focused-date > span.e-day {
           @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             background: $calendar-none-style;
-            border-radius: 0;
+            border-radius: $calendar-zero-border-radius;
             box-shadow: $calendar-focused-state-month-box-shadow;
           }
         }
@@ -648,7 +651,7 @@
         #{if(&, '&', '*')}.e-decade td.e-focused-date:hover > span.e-day {
           @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
             background: $calendar-hover-color;
-            border-radius: 0;
+            border-radius: $calendar-zero-border-radius;
             box-shadow: $calendar-focused-state-month-box-shadow;
           }
         }
@@ -715,9 +718,9 @@
 
       #{if(&, '&', '*')} button {
         background: transparent;
-        border: 0;
+        border: $border-zero;
         margin-right: $calendar-icon-button-margin;
-        padding: 0;
+        padding: $padding-zero;
         text-decoration: $calendar-none-style;
       }
       #{if(&, '&', '*')} span {
@@ -746,15 +749,15 @@
     #{if(&, '&', '*')} .e-content {
       #{if(&, '&', '*')} .e-selected ,
       #{if(&, '&', '*')} .e-state-hover {
-        border-radius: 0;
+        border-radius: $calendar-zero-border-radius;
       }
       #{if(&, '&', '*')} span.e-day {
-        border-radius: 0;
+        border-radius: $calendar-zero-border-radius;
         cursor: $calendar-cursor-pointer-style;
         display: $calendar-inline-block-style;
         font-size: $calendar-date-font-size;
         overflow: hidden;
-        padding: 0;
+        padding: $padding-zero;
         text-align: center;
         text-decoration: $calendar-none-style;
         vertical-align: middle;
@@ -801,7 +804,7 @@
       }
       #{if(&, '&', '*')} td:hover {
         @if skin-name == 'fluent2' {
-          border-radius: 2px;
+          border-radius: $calendar-td-hover-border-radius;
           background: $calendar-hover-border-color;
         }
       }
@@ -809,9 +812,9 @@
       table {
         border-collapse: separate;
         border-spacing: 0;
-        border-width: 0;
+        border-width: $border-zero;
         float: $calendar-float-left-style;
-        margin: 0;
+        margin: $margin-zero;
         outline: 0;
         padding: $calendar-table-padding;
         table-layout: fixed;
@@ -954,7 +957,7 @@
     #{if(&, '&', '*')} .e-content {
       #{if(&, '&', '*')} .e-selected ,
       #{if(&, '&', '*')} .e-state-hover {
-        border-radius: 0;
+        border-radius: $calendar-zero-border-radius;
       }
       #{if(&, '&', '*')} span.e-day {
         border: $calendar-default-border-color;
@@ -1153,7 +1156,7 @@
   .e-bigger.e-small .e-calendar .e-content td.e-today:hover {
     @if $skin-name == 'fluent2' {
       background: $calendar-hover-border-color;
-      border-radius: 2px;
+      border-radius: $calendar-content-td-border-radius;
     }
   }
 }

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

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
 
 //month view
 $calendar-normal-month-view-height: 28px !default;
@@ -11,6 +13,7 @@ $calendar-bigger-month-view-padding: 0 !default;
 $calendar-bigger-month-view-height: 30px !default;
 $calendar-bigger-month-view-line-height: $calendar-bigger-month-view-height !default;
 $calendar-bigger-month-view-width: 36px !default;
+$border-zero: 0;
 
 //header dimension
 $calendar-header-font-size: 14px !default;
@@ -238,3 +241,12 @@ $calendar-bigger-small-yeardecade-font-size: 14px !default;
 $calendar-small-font-size: 12px !default;
 
 //endtoday button
+
+$line-height: 14px;
+$margin-zero: 0;
+$padding-zero: 0;
+$calendar-bigger-rtl-header-text-indent: 6px !default;
+$calendar-zero-border-radius: 0 !default;
+$calendar-bigger-header-width: 60% !default;
+$calendar-bigger-placeholder-min-height: 392px !default;
+$calendar-small-min-height: 220px !default;

package/styles/calendar/_bootstrap-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
 
 /*! calendar bootstrap theme variables */
 
@@ -13,6 +15,7 @@ $calendar-bigger-month-view-padding: 0 !default;
 $calendar-bigger-month-view-height: 30px !default;
 $calendar-bigger-month-view-line-height: $calendar-bigger-month-view-height !default;
 $calendar-bigger-month-view-width: 36px !default;
+$border-zero: 0;
 
 //header dimension
 $calendar-header-font-size: 14px !default;
@@ -238,3 +241,12 @@ $calendar-small-title-font-color: $grey-light-font !default;
 $calendar-bigger-small-table-padding: 0 0 10px !default;
 $calendar-bigger-small-yeardecade-font-size: 14px !default;
 $calendar-small-font-size: 12px !default;
+
+$line-height: 14px;
+$margin-zero: 0;
+$padding-zero: 0;
+$calendar-bigger-rtl-header-text-indent: 6px !default;
+$calendar-zero-border-radius: 0 !default;
+$calendar-bigger-header-width: 60% !default;
+$calendar-bigger-placeholder-min-height: 392px !default;
+$calendar-small-min-height: 220px !default;

package/styles/calendar/_bootstrap4-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
 
 /*! calendar bootstrap theme variables */
 
@@ -13,6 +15,7 @@ $calendar-bigger-month-view-padding: 0 !default;
 $calendar-bigger-month-view-height: 32px !default;
 $calendar-bigger-month-view-line-height: $calendar-bigger-month-view-height !default;
 $calendar-bigger-month-view-width: 38px !default;
+$border-zero: 0;
 
 //header dimension
 $calendar-header-font-size: 14px !default;
@@ -238,3 +241,12 @@ $calendar-small-title-font-color: $gray-900 !default;
 $calendar-bigger-small-table-padding: 0 12px 12px 12px !default;
 $calendar-bigger-small-yeardecade-font-size: 14px !default;
 $calendar-small-font-size: 12px !default;
+
+$line-height: 14px;
+$margin-zero: 0;
+$padding-zero: 0;
+$calendar-bigger-rtl-header-text-indent: 6px !default;
+$calendar-zero-border-radius: 0 !default;
+$calendar-bigger-header-width: 60% !default;
+$calendar-bigger-placeholder-min-height: 392px !default;
+$calendar-small-min-height: 220px !default;