@syncfusion/ej2-schedule 19.4.55 → 20.1.50

package/styles/schedule/_layout.scss

@@ -70,7 +70,7 @@
           &.e-tbtn-txt {
             .e-icons.e-icon-right.e-btn-icon.e-icon-down-arrow {
               font-size: $schedule-tbar-down-arrow-font-size;
-              @if ($schedule-skin != 'bootstrap5') {
+              @if ($schedule-skin != 'bootstrap5' and $schedule-skin != 'FluentUI') {
                 padding-top: $schedule-tbar-down-arrow-padding-top;
               }
             }
@@ -303,7 +303,9 @@
       }
 
       .e-resource-tree.e-treeview .e-text-content {
-        padding: 0 0 0 12px;
+        @if ($schedule-skin != 'FluentUI') {
+          padding: 0 0 0 12px;
+        }
       }
     }
 
@@ -771,6 +773,10 @@
             line-height: 21px;
           }
 
+          @if ($schedule-skin == 'FluentUI') {
+            padding-top: $schedule-header-cells-padding;
+          }
+
           @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
             line-height: 24px;
           }
@@ -1778,6 +1784,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-event-table {
         position: absolute;
         top: 0;
@@ -2795,12 +2810,10 @@
             }
 
             &.e-tbtn-txt {
-              .e-icons {
-                padding: $schedule-tbar-btn-icn-bgr-padding;
-              }
-
               .e-icons.e-icon-right {
-                padding: $schedule-tbar-btn-icn-right-bgr-padding;
+                @if ($schedule-skin != 'FluentUI') {
+                  padding: $schedule-tbar-btn-icn-right-bgr-padding;
+                }
                 @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
                   font-size: 22px;
                 }
@@ -2835,12 +2848,20 @@
 
     .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;
+          }
         }
       }
 
@@ -3750,7 +3771,13 @@
       .e-resource-icon {
         color: $schedule-popup-content-icon-color;
         font-size: 18px;
-        padding-right: 13px;
+        @if ($schedule-skin == 'FluentUI' or $schedule-skin == 'tailwind') {
+          padding-right: 12px;
+        }
+
+        @else {
+          padding-right: 13px;
+        }
 
         @if ($schedule-skin == 'highcontrast' or $schedule-skin == 'fabric') {
           padding-top: 4px;
@@ -3789,11 +3816,6 @@
         padding-right: 4px;
       }
 
-      @if ($schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
-        background-color: $schedule-work-cells-bg-color;
-        border-radius: 0 0 6px 6px;
-      }
-
       .e-event-edit {
         margin-right: 8px;
       }
@@ -4019,7 +4041,14 @@
 
       .e-cell-popup .e-date-time-icon,
       .e-event-popup .e-date-time-icon {
-        padding-right: 10px;
+
+        @if ($schedule-skin == 'FluentUI') {
+          padding-right: 16px;
+        }
+
+        @else {
+          padding-right: 10px;
+        }
       }
 
       .e-cell-popup .e-popup-header .e-header-icon-wrapper .e-close .e-close-icon {
@@ -4075,6 +4104,12 @@
       }
     }
 
+    @if ($schedule-skin == 'FluentUI') {
+      .e-event-popup .e-popup-header .e-subject-wrap {
+        padding: $schedule-big-event-popup-subject-padding;
+      }
+    }
+
     .e-event-popup .e-popup-header .e-header-icon-wrapper {
       .e-close-icon,
       .e-edit-icon,
@@ -4113,6 +4148,11 @@
   }
 
   .e-bigger .e-agenda-view {
+    @if ($schedule-skin == 'FluentUI' or $schedule-skin == 'tailwind') {
+      .e-appointment {
+        padding: $schedule-agenda-big-appointment-padding;
+      }
+    }
     @if ($schedule-skin == 'bootstrap4' or $schedule-skin == 'tailwind' or $schedule-skin == 'bootstrap5') {
       .e-subject {
         font-size: 16px;
@@ -4267,6 +4307,7 @@
   }
 
   .e-more-event-content {
+    color: $schedule-primary-content-font-color;
     height: calc(100% - 35px);
     max-height: 150px;
     overflow-y: auto;

package/styles/schedule/_tailwind-definition.scss

@@ -28,6 +28,7 @@ $schedule-current-day-active-color: $schedule-active-color !default;
 
 $schedule-alternate-cell-border: dotted !default;
 $schedule-header-cells-padding: 8px 8px 0 !default;
+$schedule-agenda-big-appointment-padding: 7px 16px !default;
 $schedule-header-cells-height: 60px !default;
 $schedule-header-cells-width: 36px !default;
 $schedule-month-header-cells-nrml-height: 34px !default;

package/styles/schedule/_theme.scss

@@ -64,7 +64,9 @@
         border-style: $border-type;
         border-width: $schedule-vertical-work-cells-border;
         color: $schedule-header-font-color;
-        text-align: left;
+        @if ($schedule-skin != 'FluentUI') {
+          text-align: left;
+        }
 
         &.e-header-cells {
           border-bottom-width: 0;
@@ -199,7 +201,9 @@
         border-style: $border-type;
         border-width: $schedule-month-work-cells-border;
         color: $schedule-header-font-color;
-        text-align: left;
+        @if ($schedule-skin != 'FluentUI') {
+          text-align: left;
+        }
 
         @if ($schedule-skin == 'tailwind') {
           font-size: 12px;
@@ -254,13 +258,6 @@
         background-color: $schedule-select-bg-color;
         color: $schedule-select-font-color;
 
-        &.e-current-date .e-date-header {
-          @if ($schedule-skin == 'bootstrap5') {
-            background-color: $schedule-select-font-color;
-            color: $schedule-select-bg-color;
-          }
-        }
-
         .e-date-header {
           @if ($schedule-skin == 'highcontrast') {
             color: $schedule-select-font-color;

package/styles/schedule/bootstrap-dark.css

@@ -1847,6 +1847,15 @@
   text-decoration: underline;
 }
 
+.e-schedule .e-timeline-year-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-timeline-year-view.e-virtual-mask .e-work-cells:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
 .e-schedule .e-timeline-year-view .e-event-table {
   position: absolute;
   top: 0;
@@ -2878,13 +2887,6 @@
   min-width: 34px;
 }
 
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons {
-  padding: 0;
-}
-
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
@@ -4015,6 +4017,7 @@
 
 .e-bigger .e-more-popup-wrapper .e-more-event-content,
 .e-more-popup-wrapper .e-more-event-content {
+  color: #f0f0f0;
   height: calc(100% - 35px);
   max-height: 150px;
   overflow-y: auto;

package/styles/schedule/bootstrap.css

@@ -1844,6 +1844,15 @@
   text-decoration: underline;
 }
 
+.e-schedule .e-timeline-year-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-timeline-year-view.e-virtual-mask .e-work-cells:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
 .e-schedule .e-timeline-year-view .e-event-table {
   position: absolute;
   top: 0;
@@ -2875,13 +2884,6 @@
   min-width: 34px;
 }
 
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons {
-  padding: 0;
-}
-
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
@@ -4013,6 +4015,7 @@
 
 .e-bigger .e-more-popup-wrapper .e-more-event-content,
 .e-more-popup-wrapper .e-more-event-content {
+  color: #333;
   height: calc(100% - 35px);
   max-height: 150px;
   overflow-y: auto;

package/styles/schedule/bootstrap4.css

@@ -1818,7 +1818,7 @@
   cursor: default;
   font-weight: 400;
   height: 35px;
-  padding: 8px;
+  padding: 0;
   text-align: center;
 }
 
@@ -1850,6 +1850,15 @@
   text-decoration: underline;
 }
 
+.e-schedule .e-timeline-year-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-timeline-year-view.e-virtual-mask .e-work-cells:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
 .e-schedule .e-timeline-year-view .e-event-table {
   position: absolute;
   top: 0;
@@ -2882,13 +2891,6 @@
   min-width: 34px;
 }
 
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons {
-  padding: 0;
-}
-
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
@@ -4124,6 +4126,7 @@
 
 .e-bigger .e-more-popup-wrapper .e-more-event-content,
 .e-more-popup-wrapper .e-more-event-content {
+  color: #212529;
   height: calc(100% - 35px);
   max-height: 150px;
   overflow-y: auto;

package/styles/schedule/bootstrap5-dark.css

@@ -879,7 +879,7 @@
 .e-schedule .e-vertical-view .e-header-cells {
   font-size: 12px;
   height: 60px;
-  padding: 8px 8px 0;
+  padding: 4px;
 }
 
 .e-schedule .e-vertical-view .e-header-cells .e-header-day {
@@ -1854,6 +1854,15 @@
   text-decoration: underline;
 }
 
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells {
+  background-color: #343a40;
+  box-shadow: inset 0 0 0 8px #282d31;
+}
+
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells:hover {
+  background-color: #343a40;
+}
+
 .e-schedule .e-timeline-year-view .e-event-table {
   position: absolute;
   top: 0;
@@ -2621,7 +2630,7 @@
 .e-schedule .e-agenda-view .e-day-date-header {
   color: #e9ecef;
   cursor: default;
-  padding: 8px 34px 14px 18px;
+  padding: 8px 20px 14px 14px;
 }
 
 .e-schedule .e-agenda-view .e-day-date-header .e-m-date {
@@ -2738,7 +2747,7 @@
   border-left: 3px solid #0d6efd;
   border-right: 0;
   cursor: default;
-  padding: 0 12px;
+  padding: 0 14px;
 }
 
 .e-schedule .e-agenda-view .e-appointment:hover {
@@ -2893,13 +2902,6 @@
   padding: 8px;
 }
 
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons {
-  padding: 0;
-}
-
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
@@ -2926,6 +2928,12 @@
   font-size: 14px;
 }
 
+.e-bigger .e-schedule .e-vertical-view .e-header-cells,
+.e-bigger.e-schedule .e-vertical-view .e-header-cells {
+  height: 66px;
+  padding: 8px;
+}
+
 .e-bigger .e-schedule .e-vertical-view .e-header-cells .e-header-day,
 .e-bigger.e-schedule .e-vertical-view .e-header-cells .e-header-day {
   font-size: 14px;
@@ -3763,8 +3771,6 @@
   display: block;
   padding: 8px 18px 8px 18px;
   text-align: right;
-  background-color: #282d31;
-  border-radius: 0 0 6px 6px;
 }
 
 .e-quick-popup-wrapper .e-popup-footer .e-event-edit {
@@ -4131,6 +4137,7 @@
 
 .e-bigger .e-more-popup-wrapper .e-more-event-content,
 .e-more-popup-wrapper .e-more-event-content {
+  color: #fff;
   height: calc(100% - 35px);
   max-height: 150px;
   overflow-y: auto;
@@ -4204,7 +4211,7 @@
 
 .e-bigger .e-more-popup-wrapper .e-more-event-close .e-btn-icon,
 .e-more-popup-wrapper .e-more-event-close .e-btn-icon {
-  margin-top: 8px;
+  margin-top: 3px;
 }
 
 .e-bigger .e-more-popup-wrapper .e-more-event-close:focus, .e-bigger .e-more-popup-wrapper .e-more-event-close:hover,
@@ -4508,12 +4515,6 @@
   color: #fff;
 }
 
-.e-schedule .e-month-view .e-selected-cell.e-current-date .e-date-header,
-.e-schedule .e-month-agenda-view .e-selected-cell.e-current-date .e-date-header {
-  background-color: #fff;
-  color: #343a40;
-}
-
 .e-schedule .e-month-view .e-selected-cell .e-more-indicator,
 .e-schedule .e-month-agenda-view .e-selected-cell .e-more-indicator {
   color: #fff;

package/styles/schedule/bootstrap5.css

@@ -880,7 +880,7 @@
 .e-schedule .e-vertical-view .e-header-cells {
   font-size: 12px;
   height: 60px;
-  padding: 8px 8px 0;
+  padding: 4px;
 }
 
 .e-schedule .e-vertical-view .e-header-cells .e-header-day {
@@ -1855,6 +1855,15 @@
   text-decoration: underline;
 }
 
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells {
+  background-color: #e9ecef;
+  box-shadow: inset 0 0 0 8px #f8f9fa;
+}
+
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells:hover {
+  background-color: #e9ecef;
+}
+
 .e-schedule .e-timeline-year-view .e-event-table {
   position: absolute;
   top: 0;
@@ -2622,7 +2631,7 @@
 .e-schedule .e-agenda-view .e-day-date-header {
   color: #343a40;
   cursor: default;
-  padding: 8px 34px 14px 18px;
+  padding: 8px 20px 14px 14px;
 }
 
 .e-schedule .e-agenda-view .e-day-date-header .e-m-date {
@@ -2739,7 +2748,7 @@
   border-left: 3px solid #0d6efd;
   border-right: 0;
   cursor: default;
-  padding: 0 12px;
+  padding: 0 14px;
 }
 
 .e-schedule .e-agenda-view .e-appointment:hover {
@@ -2894,13 +2903,6 @@
   padding: 8px;
 }
 
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons {
-  padding: 0;
-}
-
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
@@ -2927,6 +2929,12 @@
   font-size: 14px;
 }
 
+.e-bigger .e-schedule .e-vertical-view .e-header-cells,
+.e-bigger.e-schedule .e-vertical-view .e-header-cells {
+  height: 66px;
+  padding: 8px;
+}
+
 .e-bigger .e-schedule .e-vertical-view .e-header-cells .e-header-day,
 .e-bigger.e-schedule .e-vertical-view .e-header-cells .e-header-day {
   font-size: 14px;
@@ -3764,8 +3772,6 @@
   display: block;
   padding: 8px 18px 8px 18px;
   text-align: right;
-  background-color: #f8f9fa;
-  border-radius: 0 0 6px 6px;
 }
 
 .e-quick-popup-wrapper .e-popup-footer .e-event-edit {
@@ -4132,6 +4138,7 @@
 
 .e-bigger .e-more-popup-wrapper .e-more-event-content,
 .e-more-popup-wrapper .e-more-event-content {
+  color: #212529;
   height: calc(100% - 35px);
   max-height: 150px;
   overflow-y: auto;
@@ -4205,7 +4212,7 @@
 
 .e-bigger .e-more-popup-wrapper .e-more-event-close .e-btn-icon,
 .e-more-popup-wrapper .e-more-event-close .e-btn-icon {
-  margin-top: 8px;
+  margin-top: 3px;
 }
 
 .e-bigger .e-more-popup-wrapper .e-more-event-close:focus, .e-bigger .e-more-popup-wrapper .e-more-event-close:hover,
@@ -4509,12 +4516,6 @@
   color: #212529;
 }
 
-.e-schedule .e-month-view .e-selected-cell.e-current-date .e-date-header,
-.e-schedule .e-month-agenda-view .e-selected-cell.e-current-date .e-date-header {
-  background-color: #212529;
-  color: #e9ecef;
-}
-
 .e-schedule .e-month-view .e-selected-cell .e-more-indicator,
 .e-schedule .e-month-agenda-view .e-selected-cell .e-more-indicator {
   color: #212529;

package/styles/schedule/fabric-dark.css

@@ -1847,6 +1847,15 @@
   text-decoration: underline;
 }
 
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells {
+  background-color: rgba(0, 0, 0, 0.08);
+  box-shadow: inset 0 0 0 8px #282727;
+}
+
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
 .e-schedule .e-timeline-year-view .e-event-table {
   position: absolute;
   top: 0;
@@ -2879,13 +2888,6 @@
   padding: 0 1.5px;
 }
 
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons {
-  padding: 0;
-}
-
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
@@ -4016,6 +4018,7 @@
 
 .e-bigger .e-more-popup-wrapper .e-more-event-content,
 .e-more-popup-wrapper .e-more-event-content {
+  color: #dadada;
   height: calc(100% - 35px);
   max-height: 150px;
   overflow-y: auto;

package/styles/schedule/fabric.css

@@ -1847,6 +1847,15 @@
   text-decoration: underline;
 }
 
+.e-schedule .e-timeline-year-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-timeline-year-view.e-virtual-mask .e-work-cells:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
 .e-schedule .e-timeline-year-view .e-event-table {
   position: absolute;
   top: 0;
@@ -2879,13 +2888,6 @@
   padding: 0 1.5px;
 }
 
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons {
-  padding: 0;
-}
-
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
@@ -4032,6 +4034,7 @@
 
 .e-bigger .e-more-popup-wrapper .e-more-event-content,
 .e-more-popup-wrapper .e-more-event-content {
+  color: #333;
   height: calc(100% - 35px);
   max-height: 150px;
   overflow-y: auto;