@syncfusion/ej2-calendars 24.2.9 → 25.1.37

package/styles/calendar/_tailwind-definition.scss

@@ -14,7 +14,7 @@ $calendar-bigger-month-view-height: 36px !default;
 $calendar-bigger-month-view-line-height: $calendar-bigger-month-view-height !default;
 $calendar-bigger-month-view-width: 36px !default;
 
-// Focus related styles
+//Focus related styles
 $calendar-title-focus-box-shadow: 0 0 0 1px $content-text-color-alt3 !default;
 $calendar-title-focus-background: none !default;
 $calendar-title-active-background: none !default;

package/styles/calendar/_theme.scss

@@ -475,7 +475,7 @@
     }
   }
 
-  .e-zoomin {
+  .e-calendar .e-zoomin {
     animation: animatezoom .3s;
   }
 
@@ -548,7 +548,7 @@
       color: $calendar-today-disabled-color;
     }
   }
-  .e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
+  .e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
     box-shadow: $calendar-focused-cell-box-shadow;
     border-radius: $calendar-border-radius;
   }

package/styles/calendar/bootstrap-dark.css

@@ -830,7 +830,7 @@ ejs-calendar {
   color: #f0f0f0;
 }
 
-.e-zoomin {
+.e-calendar .e-zoomin {
   animation: animatezoom 0.3s;
 }
 
@@ -842,7 +842,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
+.e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #fff;
   border-radius: 4px;
 }

package/styles/calendar/bootstrap.css

@@ -831,7 +831,7 @@ ejs-calendar {
   color: #333;
 }
 
-.e-zoomin {
+.e-calendar .e-zoomin {
   animation: animatezoom 0.3s;
 }
 
@@ -843,7 +843,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
+.e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #000;
   border-radius: 4px;
 }

package/styles/calendar/bootstrap4.css

@@ -831,7 +831,7 @@ ejs-calendar {
   color: #212529;
 }
 
-.e-zoomin {
+.e-calendar .e-zoomin {
   animation: animatezoom 0.3s;
 }
 
@@ -843,7 +843,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
+.e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #212529;
   border-radius: 4px;
 }

package/styles/calendar/bootstrap5-dark.css

@@ -868,7 +868,7 @@ ejs-calendar {
   color: #e9ecef;
 }
 
-.e-zoomin {
+.e-calendar .e-zoomin {
   animation: animatezoom 0.3s;
 }
 
@@ -913,7 +913,7 @@ ejs-calendar {
   color: rgba(255, 255, 255, 0.65);
 }
 
-.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
+.e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #7b848d;
   border-radius: 4px;
 }

package/styles/calendar/bootstrap5.css

@@ -868,7 +868,7 @@ ejs-calendar {
   color: #343a40;
 }
 
-.e-zoomin {
+.e-calendar .e-zoomin {
   animation: animatezoom 0.3s;
 }
 
@@ -913,7 +913,7 @@ ejs-calendar {
   color: rgba(255, 255, 255, 0.65);
 }
 
-.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
+.e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #6c757d;
   border-radius: 4px;
 }

package/styles/calendar/fabric-dark.css

@@ -836,7 +836,7 @@ ejs-calendar {
   color: #dadada;
 }
 
-.e-zoomin {
+.e-calendar .e-zoomin {
   animation: animatezoom 0.3s;
 }
 
@@ -848,7 +848,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
+.e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #333232;
   border-radius: 0;
 }

package/styles/calendar/fabric.css

@@ -841,7 +841,7 @@ ejs-calendar {
   color: #0078d6;
 }
 
-.e-zoomin {
+.e-calendar .e-zoomin {
   animation: animatezoom 0.3s;
 }
 
@@ -853,7 +853,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
+.e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #000;
   border-radius: 0;
 }

package/styles/calendar/fluent-dark.css

@@ -195,7 +195,7 @@ ejs-calendar {
 .e-calendar .e-header .e-prev, .e-calendar .e-header .e-next,
 .e-bigger.e-small .e-calendar .e-header .e-prev,
 .e-bigger.e-small .e-calendar .e-header .e-next {
-  border-radius: 2px;
+  border-radius: 0;
   display: inline-block;
   font-size: 14px;
   vertical-align: middle;
@@ -726,7 +726,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date:focus span.e-day {
   background: #252423;
   border: none;
-  border-radius: 2px;
+  border-radius: 0;
   box-shadow: none;
   background: none;
   border-radius: 4px;
@@ -736,7 +736,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date:hover span.e-day {
   background-color: #323130;
   border: none;
-  border-radius: 2px;
+  border-radius: 0;
   color: #f3f2f1;
 }
 .e-calendar .e-content td.e-today span.e-day, .e-calendar .e-content td.e-focused-date.e-today span.e-day,
@@ -744,7 +744,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
   background: #0078d4;
   border: none;
-  border-radius: 2px;
+  border-radius: 0;
   box-shadow: inset 1px 0 #0078d4, inset 0 1px #0078d4, inset -1px 0 #0078d4, inset 0 -1px #0078d4;
   color: #1b1a19;
   border-radius: 50%;
@@ -761,7 +761,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day {
   background-color: #3b3a39;
   border: none;
-  border-radius: 2px;
+  border-radius: 0;
   color: #1b1a19;
   background-color: #0078d4;
   border-radius: 50%;
@@ -832,7 +832,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td:focus span.e-day {
   background-color: #323130;
   border: none;
-  border-radius: 2px;
+  border-radius: 0;
   color: #f3f2f1;
 }
 .e-calendar .e-content td:focus span.e-day,
@@ -840,7 +840,7 @@ ejs-calendar {
   background-color: #3b3a39;
   color: #f3f2f1;
   border: none;
-  border-radius: 2px;
+  border-radius: 0;
   border-radius: 50%;
 }
 .e-calendar .e-content td.e-disabled span.e-day, .e-calendar .e-content td.e-disabled:hover span.e-day, .e-calendar .e-content td.e-disabled:focus span.e-day,
@@ -863,7 +863,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day {
   background-color: #3b3a39;
   border: none;
-  border-radius: 2px;
+  border-radius: 0;
   color: #f3f2f1;
 }
 .e-calendar .e-content td.e-selected:not(.e-focused-date) span.e-day,
@@ -898,7 +898,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-selected:hover span.e-day {
   background-color: #3b3a39;
   border: none;
-  border-radius: 2px;
+  border-radius: 0;
   color: #f3f2f1;
 }
 .e-calendar .e-content td.e-selected.e-focused-date span.e-day,
@@ -963,7 +963,7 @@ ejs-calendar {
   color: #f3f2f1;
 }
 
-.e-zoomin {
+.e-calendar .e-zoomin {
   animation: animatezoom 0.3s;
 }
 
@@ -1019,7 +1019,7 @@ ejs-calendar {
   color: #484644;
 }
 
-.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
+.e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #a19f9d;
-  border-radius: 2px;
+  border-radius: 0;
 }

package/styles/calendar/fluent.css

@@ -195,7 +195,7 @@ ejs-calendar {
 .e-calendar .e-header .e-prev, .e-calendar .e-header .e-next,
 .e-bigger.e-small .e-calendar .e-header .e-prev,
 .e-bigger.e-small .e-calendar .e-header .e-next {
-  border-radius: 2px;
+  border-radius: 0;
   display: inline-block;
   font-size: 14px;
   vertical-align: middle;
@@ -726,7 +726,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date:focus span.e-day {
   background: #f3f2f1;
   border: none;
-  border-radius: 2px;
+  border-radius: 0;
   box-shadow: none;
   background: none;
   border-radius: 4px;
@@ -736,7 +736,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date:hover span.e-day {
   background-color: #f3f2f1;
   border: none;
-  border-radius: 2px;
+  border-radius: 0;
   color: #201f1e;
 }
 .e-calendar .e-content td.e-today span.e-day, .e-calendar .e-content td.e-focused-date.e-today span.e-day,
@@ -744,7 +744,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today span.e-day {
   background: #0078d4;
   border: none;
-  border-radius: 2px;
+  border-radius: 0;
   box-shadow: inset 1px 0 #0078d4, inset 0 1px #0078d4, inset -1px 0 #0078d4, inset 0 -1px #0078d4;
   color: #fff;
   border-radius: 50%;
@@ -761,7 +761,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-focused-date.e-today:focus span.e-day {
   background-color: #edebe9;
   border: none;
-  border-radius: 2px;
+  border-radius: 0;
   color: #fff;
   background-color: #0078d4;
   border-radius: 50%;
@@ -832,7 +832,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td:focus span.e-day {
   background-color: #f3f2f1;
   border: none;
-  border-radius: 2px;
+  border-radius: 0;
   color: #201f1e;
 }
 .e-calendar .e-content td:focus span.e-day,
@@ -840,7 +840,7 @@ ejs-calendar {
   background-color: #edebe9;
   color: #201f1e;
   border: none;
-  border-radius: 2px;
+  border-radius: 0;
   border-radius: 50%;
 }
 .e-calendar .e-content td.e-disabled span.e-day, .e-calendar .e-content td.e-disabled:hover span.e-day, .e-calendar .e-content td.e-disabled:focus span.e-day,
@@ -863,7 +863,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-selected span.e-day {
   background-color: #edebe9;
   border: none;
-  border-radius: 2px;
+  border-radius: 0;
   color: #201f1e;
 }
 .e-calendar .e-content td.e-selected:not(.e-focused-date) span.e-day,
@@ -898,7 +898,7 @@ ejs-calendar {
 .e-bigger.e-small .e-calendar .e-content td.e-selected:hover span.e-day {
   background-color: #edebe9;
   border: none;
-  border-radius: 2px;
+  border-radius: 0;
   color: #201f1e;
 }
 .e-calendar .e-content td.e-selected.e-focused-date span.e-day,
@@ -963,7 +963,7 @@ ejs-calendar {
   color: #201f1e;
 }
 
-.e-zoomin {
+.e-calendar .e-zoomin {
   animation: animatezoom 0.3s;
 }
 
@@ -1019,7 +1019,7 @@ ejs-calendar {
   color: #a19f9d;
 }
 
-.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
+.e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #605e5c;
-  border-radius: 2px;
+  border-radius: 0;
 }

package/styles/calendar/highcontrast-light.css

@@ -831,7 +831,7 @@ ejs-calendar {
   color: #400074;
 }
 
-.e-zoomin {
+.e-calendar .e-zoomin {
   animation: animatezoom 0.3s;
 }
 
@@ -843,7 +843,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
+.e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #fff;
   border-radius: 0;
 }

package/styles/calendar/highcontrast.css

@@ -841,7 +841,7 @@ ejs-calendar {
   color: #ffd939;
 }
 
-.e-zoomin {
+.e-calendar .e-zoomin {
   animation: animatezoom 0.3s;
 }
 
@@ -853,7 +853,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
+.e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #fff;
   border-radius: 0;
 }

package/styles/calendar/icons/_bds.scss

@@ -0,0 +1,13 @@
+@include export-module('calendar-bds-icons') {
+
+  /*! component icons */
+  .e-calendar .e-header {
+    #{if(&, '&', '*')} .e-date-icon-prev::before {
+      content: '\e776';
+    }
+
+    #{if(&, '&', '*')} .e-date-icon-next::before {
+      content: '\e729';
+    }
+  }
+}

package/styles/calendar/material-dark.css

@@ -840,7 +840,7 @@ ejs-calendar {
   color: #fff;
 }
 
-.e-zoomin {
+.e-calendar .e-zoomin {
   animation: animatezoom 0.3s;
 }
 
@@ -852,7 +852,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
+.e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #fff;
   border-radius: 50%;
 }

package/styles/calendar/material.css

@@ -841,7 +841,7 @@ ejs-calendar {
   color: rgba(0, 0, 0, 0.87);
 }
 
-.e-zoomin {
+.e-calendar .e-zoomin {
   animation: animatezoom 0.3s;
 }
 
@@ -853,7 +853,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
+.e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #212121;
   border-radius: 50%;
 }

package/styles/calendar/material3-dark.css

@@ -900,7 +900,7 @@ ejs-calendar {
   color: rgba(var(--color-sf-on-surface));
 }
 
-.e-zoomin {
+.e-calendar .e-zoomin {
   animation: animatezoom 0.3s;
 }
 
@@ -912,7 +912,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
+.e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
   border-radius: 32px;
 }

package/styles/calendar/material3.css

@@ -956,7 +956,7 @@ ejs-calendar {
   color: rgba(var(--color-sf-on-surface));
 }
 
-.e-zoomin {
+.e-calendar .e-zoomin {
   animation: animatezoom 0.3s;
 }
 
@@ -968,7 +968,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
+.e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px rgba(var(--color-sf-primary));
   border-radius: 32px;
 }

package/styles/calendar/tailwind-dark.css

@@ -933,7 +933,7 @@ ejs-calendar {
   color: #000;
 }
 
-.e-zoomin {
+.e-calendar .e-zoomin {
   animation: animatezoom 0.3s;
 }
 
@@ -945,7 +945,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
+.e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #8b919e;
   border-radius: 4px;
 }

package/styles/calendar/tailwind.css

@@ -933,7 +933,7 @@ ejs-calendar {
   color: #fff;
 }
 
-.e-zoomin {
+.e-calendar .e-zoomin {
   animation: animatezoom 0.3s;
 }
 
@@ -945,7 +945,7 @@ ejs-calendar {
     transform: scale(1);
   }
 }
-.e-calendar .e-content-table .e-cell.e-focused-cell span.e-day {
+.e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
   box-shadow: 0 0 0 1px #9ca3af;
   border-radius: 4px;
 }

package/styles/datepicker/_bds-definition.scss

@@ -0,0 +1,105 @@
+//default
+$datepicker-icon: '\e901' !default;
+$datepicker-icon-font-size: $font-icon-16 !default;
+$datepicker-icon-container-min-height: 18px !default;
+$datepicker-icon-container-min-width: 20px !default;
+$datepicker-bigger-icon-container-min-height: 18px !default;
+$datepicker-bigger-icon-container-min-width: 20px !default;
+$datepicker-bigger-icon-font-size: $font-icon-18 !default;
+$datepicker-icon-normal-margin: 0 !default;
+$datepicker-icon-bigger-margin: 0 !default;
+$datepicker-icon-border-radius: 50% !default;
+$datepicker-popup-border-radius: 8px !default;
+$datepicker-box-sizing: border-box !default;
+$datepicker-modal-header-display: block !default;
+$datepicker-calendar-tbody-landscape-height: 130px !default;
+$datepicker-popup-bigger-margin-top: 0 !default;
+
+// mouse small icon
+$datepicker-small-icon-font-size: $font-icon-16 !default;
+
+// Touch small icon
+$datepicker-bigger-small-icon-font-size: $font-icon-20 !default;
+
+// color variables
+$datepicker-popup-border: 1px solid $border-light !default;
+$datepicker-input-border-style: none !default;
+$datepicker-calendar-border-style: none !default;
+$datepicker-icon-color: $icon-color !default;
+$datepicker-active-icon-color: $datepicker-icon-color !default;
+$datepicker-popup-box-shadow: $shadow-lg !default;
+$datepicker-overlay: $overlay-bg-color !default;
+$datepicker-icon-hover-color: $secondary-text-color-hover !default;
+$datepicker-popup-bg-color: $flyout-bg-color !default;
+$datepicker-othermonth-row: none !default;
+$datepicker-modal-header-bg: $icon-color !default;
+$datepicker-modal-header-color: $content-bg-color-alt2 !default;
+$modal-year-font-size: $text-sm !default;
+$modal-year-font-weight: $font-weight-medium !default;
+$modal-year-line-height: 32px !default;
+$modal-month-font-size: $text-xl !default;
+$modal-month-font-weight: $font-weight-medium !default;
+$modal-month-line-height: 32px !default;
+
+// modal dialog dimensions and styles
+$modal-portrait-year-font-size: 4vw !default;
+$modal-portrait-header-year-margin: 12vh 0 0 0 !default;
+$modal-portrait-month-font-size: 5vw !default;
+$modal-portrait-header-padding: 2vh 6vw !default;
+$modal-portrait-month-header-padding: 2vh 2vw !default;
+$modal-portrait-month-header-vertical-align: middle !default;
+$modal-month-header-line-height: 5vh !default;
+$modal-month-header-title-line-height: inherit !default;
+
+$modal-header-border-style: none !default;
+$modal-header-border-width: 0 !default;
+$modal-header-border-color: $border-light !default;
+
+// Touch modal popup cancel icon style
+$modal-portrait-cancel-icon-float-style: left !default;
+$modal-portrait-cancel-icon-padding: 2px !default;
+$modal-portrait-prev-icon-margin: 73vw !default;
+$modal-portrait-next-icon-margin: 0 !default;
+$modal-portrait-header-title-margin: 21vw !default;
+$modal-portrait-header-title-position: absolute !default;
+$modal-portrait-header-title-text: center !default;
+$modal-portrait-header-title-width: 50vw !default;
+$modal-portrait-cancel-icon-color: inherit !default;
+$modal-header-day-line-height: 6vw !default;
+
+//Touch modal popup today styles
+$modal-portrait-today-float-style: right !default;
+$modal-today-text-color: inherit !default;
+$modal-portrait-footer-display-style: none !default;
+$modal-portrait-icon-float: none !default;
+
+// Touch modal popup styles
+$modal-portrait-header-height: 20vh !default;
+$modal-portrait-header-month-height: 10vh !default;
+$modal-portrait-calendar-container-height: 79vh !default;
+$modal-portrait-calendar-min-height: 100% !default;
+$modal-portrait-calendar-min-width: 100% !default;
+$modal-portrait-calendar-height: 100% !default;
+$modal-portrait-calendar-content-height: 69vh !default;
+$modal-portrait-calendar-tabel-height: 69vh !default;
+
+// Touch modal popup landscape styles
+$datepicker-modal-popup-landscape-max-width: 100% !default;
+$modal-landscape-header-height: 30vh !default;
+$modal-landscape-header-big-height: 25vh !default;
+$modal-landscape-calendar-content-height: 60vh !default;
+$modal-landscape-calendar-content-table-height: 65vh !default;
+$modal-landscape-calendar-content-big-height: 65vh !default;
+$modal-landscape-header-year-margin: 12vh 0 0 0 !default;
+$modal-landscape-prev-icon-margin: 73vw !default;
+$modal-year-landscape-font-size: 3vw !default;
+$modal-month-landscape-font-size: 4vw !default;
+$datepicker-modal-landscape-overflow: visible !default;
+$modal-month-landscape-title-line-height: 12vh !default;
+
+// tablet device style changes for modal popup
+$modal-tablet-font-size: 18px !default;
+$modal-tablet-content-dimension: 64px !default;
+$modal-tablet-table-header-height: 48px !default;
+
+//enddefault