@syncfusion/ej2-schedule 20.2.45 → 20.3.47

package/styles/schedule/_layout.scss

@@ -1,4 +1,5 @@
-@include export-module('schedule-layout') {
+@include export-module('schedule-layout') {
+
   /*! schedule component layout */
 
   .e-schedule {
@@ -79,7 +80,7 @@
 
         .e-toolbar-left {
           .e-tbar-btn.e-icon-btn {
-            &:focus ,
+            &:focus,
             &:hover {
               border-radius: $schedule-header-hover-border-radius;
             }
@@ -354,8 +355,8 @@
       width: 100%;
     }
 
-    .e-schedule-table>tbody>tr>th,
-    .e-schedule-table>tbody>tr>td {
+    .e-schedule-table > tbody > tr > th,
+    .e-schedule-table > tbody > tr > td {
       box-sizing: border-box;
       font-weight: normal;
       overflow: hidden;
@@ -363,7 +364,7 @@
       white-space: nowrap;
     }
 
-    .e-outer-table>tbody>tr>td {
+    .e-outer-table > tbody > tr > td {
       padding: 0;
       vertical-align: top;
     }
@@ -385,7 +386,7 @@
 
     .e-content-wrap,
     .e-scroll-container {
-      -webkit-overflow-scrolling: touch; // sass-lint:disable-line no-vendor-prefixes
+      -webkit-overflow-scrolling: touch; /* stylelint-disable-line property-no-vendor-prefix */
       overflow: auto;
     }
 
@@ -626,7 +627,7 @@
 
         .e-all-day-row,
         .e-all-day-cells {
-          height: 0 !important; // sass-lint:disable-line no-important
+          height: 0 !important; /* stylelint-disable-line declaration-no-important */
         }
 
         .e-appointment {
@@ -905,6 +906,15 @@
         }
       }
 
+      &.e-virtual-mask .e-work-cells {
+        background-color: $schedule-disable-dates-color;
+        box-shadow: inset 0 0 0 8px $schedule-work-cells-bg-color;
+
+        &:hover {
+          background-color: $schedule-disable-dates-color;
+        }
+      }
+
       .e-current-time {
         font-size: $schedule-current-time-nrml-font-size;
       }
@@ -1198,7 +1208,7 @@
         .e-vertical-view .e-time-cells-wrap {
           float: right;
         }
-       }
+      }
     }
 
     @media screen and (max-width: 480px) {
@@ -1206,7 +1216,7 @@
         .e-left-indent {
           width: $schedule-device-time-scale-width;
         }
-       }
+      }
     }
 
     .e-month-view,
@@ -1268,7 +1278,7 @@
 
       .e-header-cells {
         cursor: default;
-        font-weight: 400;
+        font-weight: normal;
         height: $schedule-month-header-cells-nrml-height;
         padding: $schedule-month-header-cells-padding;
       }
@@ -1306,6 +1316,15 @@
         }
       }
 
+      &.e-virtual-mask .e-work-cells {
+        background-color: $schedule-disable-dates-color;
+        box-shadow: inset 0 0 0 8px $schedule-work-cells-bg-color;
+
+        &:hover {
+          background-color: $schedule-disable-dates-color;
+        }
+      }
+
       .e-date-header {
         cursor: pointer;
         display: table;
@@ -1749,7 +1768,7 @@
       .e-left-indent,
       .e-header-cells {
         cursor: default;
-        font-weight: 400;
+        font-weight: normal;
         height: $schedule-month-header-cells-nrml-height;
         padding: $schedule-timeline-year-left-indent-padding;
         text-align: center;
@@ -2191,9 +2210,23 @@
     }
 
     .e-virtual-scroll {
+      &.e-vertical-view,
+      &.e-month-view {
+        .e-content-table {
+          transform: translateX(0);
+        }
+      }
+
+      &.e-timeline-view,
+      &.e-timeline-month-view,
+      &.e-timeline-year-view.e-vertical {
+        .e-content-table {
+          transform: translateY(0);
+        }
+      }
+
       .e-content-table {
         position: absolute;
-        transform: translateY(0);
 
         &.e-virtual-relative {
           position: relative;
@@ -2341,7 +2374,7 @@
 
       .e-header-cells {
         cursor: default;
-        font-weight: 400;
+        font-weight: normal;
         height: $schedule-month-header-cells-nrml-height;
         padding: 5px;
         text-align: center;
@@ -2412,7 +2445,7 @@
         color: $schedule-secondary-content-font-color;
         line-height: 26px;
         padding: 0 10px;
-       }
+      }
 
       .e-date-time {
         color: $schedule-secondary-content-font-color;
@@ -2628,7 +2661,7 @@
         color: $schedule-primary-content-font-color;
         line-height: 21px;
         padding: 0 10px;
-       }
+      }
 
       .e-date-time {
         color: $schedule-secondary-content-font-color;
@@ -2833,15 +2866,15 @@
                 padding-top: 3px;
               }
             }
-           }
+          }
 
           @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
             .e-tbar-btn .e-tbar-btn-text {
               font-size: $schedule-header-bgr-font-size;
             }
-           }
-         }
-       }
+          }
+        }
+      }
     }
 
     .e-more-popup-wrapper {
@@ -2852,20 +2885,12 @@
 
     .e-vertical-view {
       .e-header-cells {
-        @if ($schedule-skin == 'FluentUI' or $schedule-skin == 'bootstrap5') {
-          height: $schedule-timezone-enable-bgr-height;
-          padding: $schedule-tbar-btn-bgr-padding;
-        }
-
         .e-header-day {
           font-size: $schedule-header-day-bgr-font-size;
         }
 
         .e-header-date {
           font-size: $schedule-header-date-bgr-font-size;
-          @if ($schedule-skin == 'FluentUI') {
-            padding-top: $schedule-more-popup-close-margin-top;
-          }
         }
       }
 
@@ -2912,7 +2937,7 @@
         @if ($schedule-skin == 'bootstrap4') {
           line-height: 24px;
           margin: 8px 0 0 8px;
-          }
+        }
       }
 
       .e-header-cells {
@@ -3238,7 +3263,7 @@
         float: right;
       }
     }
-   }
+  }
 
   .e-ddl.e-popup {
     .e-resource-template {
@@ -3550,7 +3575,7 @@
       .e-end-time-zone-container,
       .e-all-day-container {
         padding-right: 0;
-        }
+      }
     }
 
     .e-recurrence-container {
@@ -3734,7 +3759,7 @@
             @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
               border-radius: 4px;
               padding: 8px;
-              }
+            }
           }
         }
       }
@@ -4266,7 +4291,7 @@
         }
       }
     }
-}
+  }
 
   .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.e-schedule-event-clone {
     .e-appointment-details {

package/styles/schedule/_material3-definition.scss

@@ -1,5 +1,5 @@
 /*! Schedule's bootstrap5 theme wise override definitions and variables */
-// sass-lint:disable-all
+/* stylelint-disable */
 $schedule-skin: $skin-name !default;
 
 // font definitions

package/styles/schedule/_theme.scss

@@ -1,4 +1,5 @@
-@include export-module('schedule-theme') {
+@include export-module('schedule-theme') {
+
   /*! schedule component theme */
   .e-schedule {
     background-color: $schedule-header-bg-color;
@@ -56,7 +57,7 @@
         &.e-resource-cells {
           border-bottom-color: transparent;
         }
-       }
+      }
 
       .e-date-header-wrap table tbody td {
         background-color: $schedule-header-bg-color;
@@ -64,9 +65,7 @@
         border-style: $border-type;
         border-width: $schedule-vertical-work-cells-border;
         color: $schedule-header-font-color;
-        @if ($schedule-skin != 'FluentUI') {
-          text-align: left;
-        }
+        text-align: left;
 
         &.e-header-cells {
           border-bottom-width: 0;
@@ -175,7 +174,7 @@
 
       .e-previous-timeline {
         border-top: 1px dotted $schedule-active-border-color;
-       }
+      }
 
       &.e-by-date {
         .e-date-header-wrap table tbody td {
@@ -183,7 +182,7 @@
             border-bottom-width: 1px;
           }
         }
-       }
+      }
     }
 
     .e-month-view {
@@ -201,9 +200,7 @@
         border-style: $border-type;
         border-width: $schedule-month-work-cells-border;
         color: $schedule-header-font-color;
-        @if ($schedule-skin != 'FluentUI') {
-          text-align: left;
-        }
+        text-align: left;
 
         @if ($schedule-skin == 'tailwind') {
           font-size: 12px;
@@ -395,6 +392,10 @@
           border-right-width: 0;
         }
 
+        .e-date-header-wrap table tbody td {
+          text-align: right;
+        }
+
         .e-date-header-wrap table tbody td,
         .e-work-cells {
           border-width: $schedule-rtl-vertical-work-cells-border;
@@ -418,6 +419,7 @@
         }
 
         .e-date-header-wrap table td {
+          text-align: right;
           border-width: $schedule-rtl-month-work-cells-border;
         }
       }

package/styles/schedule/bootstrap-dark.css

@@ -411,7 +411,7 @@
 }
 .e-schedule .e-content-wrap,
 .e-schedule .e-scroll-container {
-  -webkit-overflow-scrolling: touch;
+  -webkit-overflow-scrolling: touch; /* stylelint-disable-line property-no-vendor-prefix */
   overflow: auto;
 }
 .e-schedule .e-hide-childs > * {
@@ -586,7 +586,7 @@
 }
 .e-schedule .e-vertical-view.e-timescale-disable .e-all-day-row,
 .e-schedule .e-vertical-view.e-timescale-disable .e-all-day-cells {
-  height: 0 !important;
+  height: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-schedule .e-vertical-view.e-timescale-disable .e-appointment {
   background: #0070f0;
@@ -798,6 +798,13 @@
 .e-schedule .e-vertical-view .e-work-cells.e-disable-dates:hover {
   background-color: rgba(0, 0, 0, 0.08);
 }
+.e-schedule .e-vertical-view.e-virtual-mask .e-work-cells {
+  background-color: rgba(0, 0, 0, 0.08);
+  box-shadow: inset 0 0 0 8px #2a2a2a;
+}
+.e-schedule .e-vertical-view.e-virtual-mask .e-work-cells:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
 .e-schedule .e-vertical-view .e-current-time {
   font-size: 11px;
 }
@@ -1086,7 +1093,7 @@
 }
 .e-schedule .e-month-view .e-header-cells {
   cursor: default;
-  font-weight: 400;
+  font-weight: normal;
   height: 30px;
   padding: 3px;
 }
@@ -1114,6 +1121,13 @@
 .e-schedule .e-month-view .e-work-cells.e-disable-dates:hover {
   background-color: rgba(0, 0, 0, 0.08);
 }
+.e-schedule .e-month-view.e-virtual-mask .e-work-cells {
+  background-color: rgba(0, 0, 0, 0.08);
+  box-shadow: inset 0 0 0 8px #2a2a2a;
+}
+.e-schedule .e-month-view.e-virtual-mask .e-work-cells:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
 .e-schedule .e-month-view .e-date-header {
   cursor: pointer;
   display: table;
@@ -1461,7 +1475,7 @@
 .e-schedule .e-timeline-year-view .e-left-indent,
 .e-schedule .e-timeline-year-view .e-header-cells {
   cursor: default;
-  font-weight: 400;
+  font-weight: normal;
   height: 30px;
   padding: 0;
   text-align: center;
@@ -1865,9 +1879,14 @@
 .e-schedule .e-timeline-month-view .e-content-wrap table col {
   width: 70px;
 }
+.e-schedule .e-virtual-scroll.e-vertical-view .e-content-table, .e-schedule .e-virtual-scroll.e-month-view .e-content-table {
+  transform: translateX(0);
+}
+.e-schedule .e-virtual-scroll.e-timeline-view .e-content-table, .e-schedule .e-virtual-scroll.e-timeline-month-view .e-content-table, .e-schedule .e-virtual-scroll.e-timeline-year-view.e-vertical .e-content-table {
+  transform: translateY(0);
+}
 .e-schedule .e-virtual-scroll .e-content-table {
   position: absolute;
-  transform: translateY(0);
 }
 .e-schedule .e-virtual-scroll .e-content-table.e-virtual-relative {
   position: relative;
@@ -1984,7 +2003,7 @@
 }
 .e-schedule .e-month-agenda-view .e-header-cells {
   cursor: default;
-  font-weight: 400;
+  font-weight: normal;
   height: 30px;
   padding: 5px;
   text-align: center;
@@ -3729,6 +3748,9 @@
 .e-schedule.e-rtl .e-vertical-view .e-content-wrap table td:first-child {
   border-right-width: 0;
 }
+.e-schedule.e-rtl .e-vertical-view .e-date-header-wrap table tbody td {
+  text-align: right;
+}
 .e-schedule.e-rtl .e-vertical-view .e-date-header-wrap table tbody td,
 .e-schedule.e-rtl .e-vertical-view .e-work-cells {
   border-width: 0 1px 1px 0;
@@ -3746,6 +3768,7 @@
   border-right-width: 0;
 }
 .e-schedule.e-rtl .e-month-view .e-date-header-wrap table td {
+  text-align: right;
   border-width: 0 1px 1px 0;
 }
 .e-schedule.e-rtl .e-month-view .e-work-cells,

package/styles/schedule/bootstrap.css

@@ -409,7 +409,7 @@
 }
 .e-schedule .e-content-wrap,
 .e-schedule .e-scroll-container {
-  -webkit-overflow-scrolling: touch;
+  -webkit-overflow-scrolling: touch; /* stylelint-disable-line property-no-vendor-prefix */
   overflow: auto;
 }
 .e-schedule .e-hide-childs > * {
@@ -584,7 +584,7 @@
 }
 .e-schedule .e-vertical-view.e-timescale-disable .e-all-day-row,
 .e-schedule .e-vertical-view.e-timescale-disable .e-all-day-cells {
-  height: 0 !important;
+  height: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-schedule .e-vertical-view.e-timescale-disable .e-appointment {
   background: #317ab9;
@@ -796,6 +796,13 @@
 .e-schedule .e-vertical-view .e-work-cells.e-disable-dates:hover {
   background-color: rgba(0, 0, 0, 0.08);
 }
+.e-schedule .e-vertical-view.e-virtual-mask .e-work-cells {
+  background-color: rgba(0, 0, 0, 0.08);
+  box-shadow: inset 0 0 0 8px #f8f8f8;
+}
+.e-schedule .e-vertical-view.e-virtual-mask .e-work-cells:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
 .e-schedule .e-vertical-view .e-current-time {
   font-size: 11px;
 }
@@ -1084,7 +1091,7 @@
 }
 .e-schedule .e-month-view .e-header-cells {
   cursor: default;
-  font-weight: 400;
+  font-weight: normal;
   height: 30px;
   padding: 3px;
 }
@@ -1112,6 +1119,13 @@
 .e-schedule .e-month-view .e-work-cells.e-disable-dates:hover {
   background-color: rgba(0, 0, 0, 0.08);
 }
+.e-schedule .e-month-view.e-virtual-mask .e-work-cells {
+  background-color: rgba(0, 0, 0, 0.08);
+  box-shadow: inset 0 0 0 8px #f8f8f8;
+}
+.e-schedule .e-month-view.e-virtual-mask .e-work-cells:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
 .e-schedule .e-month-view .e-date-header {
   cursor: pointer;
   display: table;
@@ -1459,7 +1473,7 @@
 .e-schedule .e-timeline-year-view .e-left-indent,
 .e-schedule .e-timeline-year-view .e-header-cells {
   cursor: default;
-  font-weight: 400;
+  font-weight: normal;
   height: 30px;
   padding: 0;
   text-align: center;
@@ -1863,9 +1877,14 @@
 .e-schedule .e-timeline-month-view .e-content-wrap table col {
   width: 70px;
 }
+.e-schedule .e-virtual-scroll.e-vertical-view .e-content-table, .e-schedule .e-virtual-scroll.e-month-view .e-content-table {
+  transform: translateX(0);
+}
+.e-schedule .e-virtual-scroll.e-timeline-view .e-content-table, .e-schedule .e-virtual-scroll.e-timeline-month-view .e-content-table, .e-schedule .e-virtual-scroll.e-timeline-year-view.e-vertical .e-content-table {
+  transform: translateY(0);
+}
 .e-schedule .e-virtual-scroll .e-content-table {
   position: absolute;
-  transform: translateY(0);
 }
 .e-schedule .e-virtual-scroll .e-content-table.e-virtual-relative {
   position: relative;
@@ -1982,7 +2001,7 @@
 }
 .e-schedule .e-month-agenda-view .e-header-cells {
   cursor: default;
-  font-weight: 400;
+  font-weight: normal;
   height: 30px;
   padding: 5px;
   text-align: center;
@@ -3728,6 +3747,9 @@
 .e-schedule.e-rtl .e-vertical-view .e-content-wrap table td:first-child {
   border-right-width: 0;
 }
+.e-schedule.e-rtl .e-vertical-view .e-date-header-wrap table tbody td {
+  text-align: right;
+}
 .e-schedule.e-rtl .e-vertical-view .e-date-header-wrap table tbody td,
 .e-schedule.e-rtl .e-vertical-view .e-work-cells {
   border-width: 0 1px 1px 0;
@@ -3745,6 +3767,7 @@
   border-right-width: 0;
 }
 .e-schedule.e-rtl .e-month-view .e-date-header-wrap table td {
+  text-align: right;
   border-width: 0 1px 1px 0;
 }
 .e-schedule.e-rtl .e-month-view .e-work-cells,

package/styles/schedule/bootstrap4.css

@@ -407,7 +407,7 @@
 }
 .e-schedule .e-content-wrap,
 .e-schedule .e-scroll-container {
-  -webkit-overflow-scrolling: touch;
+  -webkit-overflow-scrolling: touch; /* stylelint-disable-line property-no-vendor-prefix */
   overflow: auto;
 }
 .e-schedule .e-hide-childs > * {
@@ -581,7 +581,7 @@
 }
 .e-schedule .e-vertical-view.e-timescale-disable .e-all-day-row,
 .e-schedule .e-vertical-view.e-timescale-disable .e-all-day-cells {
-  height: 0 !important;
+  height: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-schedule .e-vertical-view.e-timescale-disable .e-appointment {
   background: #007bff;
@@ -797,6 +797,13 @@
 .e-schedule .e-vertical-view .e-work-cells.e-disable-dates:hover {
   background-color: rgba(0, 0, 0, 0.08);
 }
+.e-schedule .e-vertical-view.e-virtual-mask .e-work-cells {
+  background-color: rgba(0, 0, 0, 0.08);
+  box-shadow: inset 0 0 0 8px #f8f9fa;
+}
+.e-schedule .e-vertical-view.e-virtual-mask .e-work-cells:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
 .e-schedule .e-vertical-view .e-current-time {
   font-size: 12px;
 }
@@ -1086,7 +1093,7 @@
 }
 .e-schedule .e-month-view .e-header-cells {
   cursor: default;
-  font-weight: 400;
+  font-weight: normal;
   height: 35px;
   padding: 8px;
 }
@@ -1114,6 +1121,13 @@
 .e-schedule .e-month-view .e-work-cells.e-disable-dates:hover {
   background-color: rgba(0, 0, 0, 0.08);
 }
+.e-schedule .e-month-view.e-virtual-mask .e-work-cells {
+  background-color: rgba(0, 0, 0, 0.08);
+  box-shadow: inset 0 0 0 8px #f8f9fa;
+}
+.e-schedule .e-month-view.e-virtual-mask .e-work-cells:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
 .e-schedule .e-month-view .e-date-header {
   cursor: pointer;
   display: table;
@@ -1464,7 +1478,7 @@
 .e-schedule .e-timeline-year-view .e-left-indent,
 .e-schedule .e-timeline-year-view .e-header-cells {
   cursor: default;
-  font-weight: 400;
+  font-weight: normal;
   height: 35px;
   padding: 0;
   text-align: center;
@@ -1868,9 +1882,14 @@
 .e-schedule .e-timeline-month-view .e-content-wrap table col {
   width: 60px;
 }
+.e-schedule .e-virtual-scroll.e-vertical-view .e-content-table, .e-schedule .e-virtual-scroll.e-month-view .e-content-table {
+  transform: translateX(0);
+}
+.e-schedule .e-virtual-scroll.e-timeline-view .e-content-table, .e-schedule .e-virtual-scroll.e-timeline-month-view .e-content-table, .e-schedule .e-virtual-scroll.e-timeline-year-view.e-vertical .e-content-table {
+  transform: translateY(0);
+}
 .e-schedule .e-virtual-scroll .e-content-table {
   position: absolute;
-  transform: translateY(0);
 }
 .e-schedule .e-virtual-scroll .e-content-table.e-virtual-relative {
   position: relative;
@@ -1987,7 +2006,7 @@
 }
 .e-schedule .e-month-agenda-view .e-header-cells {
   cursor: default;
-  font-weight: 400;
+  font-weight: normal;
   height: 35px;
   padding: 5px;
   text-align: center;
@@ -3831,6 +3850,9 @@
 .e-schedule.e-rtl .e-vertical-view .e-content-wrap table td:first-child {
   border-right-width: 0;
 }
+.e-schedule.e-rtl .e-vertical-view .e-date-header-wrap table tbody td {
+  text-align: right;
+}
 .e-schedule.e-rtl .e-vertical-view .e-date-header-wrap table tbody td,
 .e-schedule.e-rtl .e-vertical-view .e-work-cells {
   border-width: 0 1px 1px 0;
@@ -3848,6 +3870,7 @@
   border-right-width: 0;
 }
 .e-schedule.e-rtl .e-month-view .e-date-header-wrap table td {
+  text-align: right;
   border-width: 0 1px 1px 0;
 }
 .e-schedule.e-rtl .e-month-view .e-work-cells,