@syncfusion/ej2-schedule 23.2.7 → 24.2.3

package/styles/recurrence-editor/tailwind-dark.css

@@ -152,6 +152,7 @@
 .e-recurrenceeditor .e-input-wrapper.e-end-on-date,
 .e-recurrenceeditor .e-input-wrapper.e-end-on-count {
   padding-right: 0;
+  margin-top: 24px;
 }
 .e-recurrenceeditor.e-rtl .e-end-on > div,
 .e-recurrenceeditor.e-rtl .e-month-expander > div > div {
@@ -191,8 +192,8 @@
   width: 30px;
 }
 .e-recurrenceeditor .e-days .e-week-expander-label {
-  font-size: 14px;
-  font-weight: 400;
+  font-size: 12px;
+  font-weight: 500;
   margin-bottom: 8px;
 }
 .e-recurrenceeditor .e-days button {
@@ -226,13 +227,6 @@
   padding: 16px 20px 0;
   width: 50%;
 }
-.e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-label {
-  float: none;
-  font-size: 14px;
-  font-weight: 400;
-  margin-bottom: 7px;
-  padding-right: 16px;
-}
 .e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 16px;
 }
@@ -240,9 +234,9 @@
   margin: 0;
 }
 .e-recurrenceeditor .e-input-wrapper-side.e-non-week > .e-month-expander-label {
-  font-size: 14px;
-  font-weight: 400;
-  margin-bottom: 7px;
+  font-size: 12px;
+  font-weight: 500;
+  margin-bottom: 6px;
   padding-right: 16px;
 }
 .e-recurrenceeditor .e-input-wrapper-side .e-days .e-form-left {
@@ -285,6 +279,7 @@
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-non-week > .e-month-expander-label {
   font-size: 16px;
   margin-bottom: 0;
+  font-weight: 500;
 }
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 2px;
@@ -382,7 +377,7 @@
 .e-device .e-recurrenceeditor.e-end-on .e-end-on-label {
   float: none;
   font-size: 12px;
-  font-weight: 400;
+  font-weight: 500;
   margin-bottom: 7px;
 }
 .e-device .e-recurrenceeditor.e-end-on .e-end-on-left {
@@ -450,7 +445,7 @@
   }
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-non-week > .e-month-expander-label,
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-end-on .e-end-on-label {
-    margin-bottom: 7px;
+    margin-bottom: 6px;
   }
   .e-recurrenceeditor .e-editor > div {
     margin-top: 20px;

package/styles/recurrence-editor/tailwind.css

@@ -152,6 +152,7 @@
 .e-recurrenceeditor .e-input-wrapper.e-end-on-date,
 .e-recurrenceeditor .e-input-wrapper.e-end-on-count {
   padding-right: 0;
+  margin-top: 24px;
 }
 .e-recurrenceeditor.e-rtl .e-end-on > div,
 .e-recurrenceeditor.e-rtl .e-month-expander > div > div {
@@ -191,8 +192,8 @@
   width: 30px;
 }
 .e-recurrenceeditor .e-days .e-week-expander-label {
-  font-size: 14px;
-  font-weight: 400;
+  font-size: 12px;
+  font-weight: 500;
   margin-bottom: 8px;
 }
 .e-recurrenceeditor .e-days button {
@@ -226,13 +227,6 @@
   padding: 16px 20px 0;
   width: 50%;
 }
-.e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-label {
-  float: none;
-  font-size: 14px;
-  font-weight: 400;
-  margin-bottom: 7px;
-  padding-right: 16px;
-}
 .e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 16px;
 }
@@ -240,9 +234,9 @@
   margin: 0;
 }
 .e-recurrenceeditor .e-input-wrapper-side.e-non-week > .e-month-expander-label {
-  font-size: 14px;
-  font-weight: 400;
-  margin-bottom: 7px;
+  font-size: 12px;
+  font-weight: 500;
+  margin-bottom: 6px;
   padding-right: 16px;
 }
 .e-recurrenceeditor .e-input-wrapper-side .e-days .e-form-left {
@@ -285,6 +279,7 @@
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-non-week > .e-month-expander-label {
   font-size: 16px;
   margin-bottom: 0;
+  font-weight: 500;
 }
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 2px;
@@ -382,7 +377,7 @@
 .e-device .e-recurrenceeditor.e-end-on .e-end-on-label {
   float: none;
   font-size: 12px;
-  font-weight: 400;
+  font-weight: 500;
   margin-bottom: 7px;
 }
 .e-device .e-recurrenceeditor.e-end-on .e-end-on-left {
@@ -450,7 +445,7 @@
   }
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-non-week > .e-month-expander-label,
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-end-on .e-end-on-label {
-    margin-bottom: 7px;
+    margin-bottom: 6px;
   }
   .e-recurrenceeditor .e-editor > div {
     margin-top: 20px;

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

@@ -87,7 +87,7 @@ $schedule-current-time-bgr-font-size: 12px !default;
 $schedule-current-time-bgr-device-font-size: 9px !default;
 $schedule-popup-header-icon-font-size: 11px !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 35px !default;
+$schedule-device-time-scale-width: 60px !default;
 $schedule-header-date-line-height: unset !default;
 $schedule-header-padding-top: 0 !default;
 
@@ -197,7 +197,11 @@ $schedule-event-popup-header-close-icon-position: relative !default;
 $schedule-event-popup-header-close-icon-right: 2px !default;
 $schedule-multiple-event-popup-icon-bg-color: transparent !default;
 $schedule-multiple-event-popup-icon-color: $schedule-primary-content-font-color !default;
-$schedule-multiple-event-popup-subject-padding: 0 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: 14px !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 35px !default;
 
 $schedule-event-box-shadow-1: 0 6px 10px 0 rgba($shadow, .14) !default;
 $schedule-event-box-shadow-2: 0 1px 18px 0 rgba($shadow, .12) !default;

package/styles/schedule/_bootstrap-definition.scss

@@ -84,7 +84,7 @@ $schedule-current-time-bgr-font-size: 12px !default;
 $schedule-current-time-bgr-device-font-size: 9px !default;
 $schedule-popup-header-icon-font-size: 11px !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 35px !default;
+$schedule-device-time-scale-width: 60px !default;
 
 $schedule-vertical-work-cells-border: 0 0 1px 1px !default;
 $schedule-rtl-vertical-work-cells-border: 0 1px 1px 0 !default;
@@ -196,7 +196,11 @@ $schedule-bgr-event-popup-header-icon-size: 2em !default;
 $schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 13px !default;
 $schedule-multiple-event-popup-icon-bg-color: transparent !default;
 $schedule-multiple-event-popup-icon-color: $schedule-primary-content-font-color !default;
-$schedule-multiple-event-popup-subject-padding: 0 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: 14px !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 35px !default;
 
 $schedule-event-box-shadow-1: 0 6px 10px 0 rgba($shadow, .14) !default;
 $schedule-event-box-shadow-2: 0 1px 18px 0 rgba($shadow, .12) !default;

package/styles/schedule/_bootstrap4-definition.scss

@@ -89,7 +89,7 @@ $schedule-current-time-bgr-font-size: 13px !default;
 $schedule-current-time-bgr-device-font-size: 9px !default;
 $schedule-popup-header-icon-font-size: 14px !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 35px !default;
+$schedule-device-time-scale-width: 60px !default;
 $schedule-header-date-line-height: 21px !default;
 $schedule-header-padding-top: 0 !default;
 
@@ -200,7 +200,11 @@ $schedule-bgr-event-popup-header-icon-size: 2em !default;
 $schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 13px !default;
 $schedule-multiple-event-popup-icon-bg-color: $schedule-header-bg-color !default;
 $schedule-multiple-event-popup-icon-color: $schedule-popup-header-icon-color !default;
-$schedule-multiple-event-popup-subject-padding: 0 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: 14px !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 35px !default;
 
 $schedule-event-box-shadow-1: 0 6px 10px 0 rgba($black, .14) !default;
 $schedule-event-box-shadow-2: 0 1px 18px 0 rgba($black, .12) !default;

package/styles/schedule/_bootstrap5-definition.scss

@@ -119,7 +119,11 @@ $schedule-device-event-popup-subject-padding: 12px 24px !default;
 $schedule-bgr-event-popup-header-icon-size: 2em !default;
 $schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 16px !default;
 $schedule-multiple-event-popup-icon-color: $schedule-popup-header-icon-color !default;
-$schedule-multiple-event-popup-subject-padding: 0 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 0 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: 14px !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 1px 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 30px !default;
 
 // schedule toolbar definitions
 $border-size: 1px;
@@ -224,7 +228,7 @@ $schedule-timezone-enable-nrml-height: 60px !default;
 $schedule-timezone-enable-bgr-height: 66px !default;
 $schedule-header-cells-padding: 4px !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 35px !default;
+$schedule-device-time-scale-width: 60px !default;
 $border-type: solid !default;
 $schedule-alternate-cell-border: dotted !default;
 $schedule-header-hover-border-radius: 4px !default;

package/styles/schedule/_fabric-dark-definition.scss

@@ -89,7 +89,7 @@ $schedule-current-time-bgr-font-size: 13px !default;
 $schedule-current-time-bgr-device-font-size: 9px !default;
 $schedule-popup-header-icon-font-size: 11px !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 35px !default;
+$schedule-device-time-scale-width: 60px !default;
 
 $schedule-vertical-work-cells-border: 0 0 1px 1px !default;
 $schedule-rtl-vertical-work-cells-border: 0 1px 1px 0 !default;
@@ -197,7 +197,11 @@ $schedule-device-event-popup-subject-padding: 12px 24px !default;
 $schedule-bgr-event-popup-header-icon-size: 2em !default;
 $schedule-multiple-event-popup-icon-bg-color: transparent !default;
 $schedule-multiple-event-popup-icon-color: $schedule-primary-content-font-color !default;
-$schedule-multiple-event-popup-subject-padding: 0 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 1px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: 14px !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 0 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 35px !default;
 
 $schedule-event-box-shadow-1: 0 6px 10px 0 rgba($shadow, .14) !default;
 $schedule-event-box-shadow-2: 0 1px 18px 0 rgba($shadow, .12) !default;

package/styles/schedule/_fabric-definition.scss

@@ -86,7 +86,7 @@ $schedule-current-time-bgr-font-size: 13px !default;
 $schedule-current-time-bgr-device-font-size: 9px !default;
 $schedule-popup-header-icon-font-size: 11px !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 35px !default;
+$schedule-device-time-scale-width: 60px !default;
 $schedule-header-date-line-height: unset !default;
 $schedule-header-padding-top: 0 !default;
 
@@ -197,7 +197,11 @@ $schedule-bgr-event-popup-header-icon-size: 2em !default;
 $schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 13px !default;
 $schedule-multiple-event-popup-icon-bg-color: transparent !default;
 $schedule-multiple-event-popup-icon-color: $schedule-primary-content-font-color !default;
-$schedule-multiple-event-popup-subject-padding: 0 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 1px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: 14px !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 0 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 35px !default;
 
 $schedule-event-box-shadow-1: 0 6px 10px 0 rgba($shadow, .14) !default;
 $schedule-event-box-shadow-2: 0 1px 18px 0 rgba($shadow, .12) !default;

package/styles/schedule/_fluent-definition.scss

@@ -91,7 +91,7 @@ $schedule-current-time-nrml-font-size: $text-xxs !default;
 $schedule-current-time-bgr-font-size: $text-xs !default;
 $schedule-current-time-bgr-device-font-size: $text-xs !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 35px !default;
+$schedule-device-time-scale-width: 60px !default;
 $schedule-header-date-line-height: unset !default;
 $schedule-header-padding-top: $schedule-header-cells-padding !default;
 
@@ -201,7 +201,11 @@ $schedule-device-event-popup-subject-padding: 12px 24px !default;
 $schedule-bgr-event-popup-header-icon-size: 2em !default;
 $schedule-multiple-event-popup-icon-bg-color: transparent !default;
 $schedule-multiple-event-popup-icon-color: $schedule-primary-content-font-color !default;
-$schedule-multiple-event-popup-subject-padding: 0 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 1px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: 14px !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 1px 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 30px !default;
 
 $schedule-event-box-shadow-1: $shadow-xl !default;
 $schedule-event-box-shadow-2: $shadow-md !default;

package/styles/schedule/_fusionnew-definition.scss

@@ -119,7 +119,11 @@ $schedule-bgr-event-popup-header-icon-size: 2em !default;
 $schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 13px !default;
 $schedule-multiple-event-popup-icon-bg-color: transparent !default;
 $schedule-multiple-event-popup-icon-color: $schedule-primary-content-font-color !default;
-$schedule-multiple-event-popup-subject-padding: 0 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: 14px !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 35px !default;
 
 // schedule toolbar definitions
 $border-size: 1px;
@@ -221,7 +225,7 @@ $schedule-timezone-enable-nrml-height: 60px !default;
 $schedule-timezone-enable-bgr-height: 66px !default;
 $schedule-header-cells-padding: 4px !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 35px !default;
+$schedule-device-time-scale-width: 60px !default;
 $border-type: solid !default;
 $schedule-alternate-cell-border: dotted !default;
 $schedule-header-hover-border-radius: 4px !default;

package/styles/schedule/_highcontrast-definition.scss

@@ -88,7 +88,7 @@ $schedule-current-time-bgr-font-size: 13px !default;
 $schedule-current-time-bgr-device-font-size: 9px !default;
 $schedule-popup-header-icon-font-size: 11px !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 35px !default;
+$schedule-device-time-scale-width: 60px !default;
 
 $schedule-vertical-work-cells-border: 0 0 1px 1px !default;
 $schedule-rtl-vertical-work-cells-border: 0 1px 1px 0 !default;
@@ -197,7 +197,11 @@ $schedule-bgr-event-popup-header-icon-size: 2em !default;
 $schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 13px !default;
 $schedule-multiple-event-popup-icon-bg-color: transparent !default;
 $schedule-multiple-event-popup-icon-color: $schedule-primary-content-font-color !default;
-$schedule-multiple-event-popup-subject-padding: 0 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 1px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: 14px !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 0 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 35px !default;
 
 $schedule-event-box-shadow-1: 0 6px 10px 0 rgba($shadow, .14) !default;
 $schedule-event-box-shadow-2: 0 1px 18px 0 rgba($shadow, .12) !default;

package/styles/schedule/_highcontrast-light-definition.scss

@@ -88,7 +88,7 @@ $schedule-current-time-bgr-font-size: 13px !default;
 $schedule-current-time-bgr-device-font-size: 9px !default;
 $schedule-popup-header-icon-font-size: 11px !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 35px !default;
+$schedule-device-time-scale-width: 60px !default;
 
 $schedule-vertical-work-cells-border: 0 0 1px 1px !default;
 $schedule-rtl-vertical-work-cells-border: 0 1px 1px 0 !default;
@@ -198,7 +198,11 @@ $schedule-bgr-event-popup-header-icon-size: 2em !default;
 $schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 13px !default;
 $schedule-multiple-event-popup-icon-bg-color: transparent !default;
 $schedule-multiple-event-popup-icon-color: $schedule-primary-content-font-color !default;
-$schedule-multiple-event-popup-subject-padding: 0 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 1px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: 14px !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 0 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 35px !default;
 
 $schedule-event-box-shadow-1: 0 6px 10px 0 rgba($shadow, .14) !default;
 $schedule-event-box-shadow-2: 0 1px 18px 0 rgba($shadow, .12) !default;

package/styles/schedule/_layout.scss

@@ -3752,8 +3752,8 @@
           background: $schedule-multiple-event-popup-icon-bg-color;
           border: 0;
           color: $schedule-multiple-event-popup-icon-color;
-          height: 40px;
-          width: 40px;
+          height: 35px;
+          width: 35px;
           &:focus,
           &:hover {
             background: none;
@@ -3763,16 +3763,16 @@
         .e-subject {
           font-size: 15px;
           font-weight: 500;
-          height: 40px;
+          height: 35px;
           line-height: 2.25;
-          padding: 4px 5px;
-          width: calc(100% - 95px);
+          padding: $schedule-multiple-event-popup-subject-padding;
+          width: calc(100% - 105px);
         }
 
         .e-close-icon,
         .e-edit-icon,
         .e-delete-icon {
-          font-size: 14px;
+          font-size: $schedule-multiple-event-popup-icon-font-size;
         }
       }
 
@@ -3819,13 +3819,20 @@
       }
     }
 
-    .e-edit.e-btn.e-small.e-round,
-    .e-delete.e-btn.e-small.e-round,
-    .e-close.e-btn.e-small.e-round {
+    .e-cell-popup .e-close.e-btn.e-small.e-round {
       height: $schedule-bgr-event-popup-header-icon-size;
       width: $schedule-bgr-event-popup-header-icon-size;
     }
 
+    .e-event-popup {
+      .e-edit.e-btn.e-small.e-round,
+      .e-delete.e-btn.e-small.e-round,
+      .e-close.e-btn.e-small.e-round {
+        height: $schedule-bgr-event-popup-header-icon-size;
+        width: $schedule-bgr-event-popup-header-icon-size;
+      }
+    }
+
     .e-event-popup .e-popup-header .e-header-icon-wrapper {
       .e-close-icon,
       .e-edit-icon,
@@ -3844,8 +3851,14 @@
       }
 
       .e-multiple-event-popup .e-popup-header {
+        .e-edit.e-btn.e-small.e-round,
+        .e-delete.e-btn.e-small.e-round,
+        .e-close.e-btn.e-small.e-round {
+          height: $schedule-bgr-multiple-event-popup-icon-height;
+        }
+
         .e-subject {
-          padding: $schedule-multiple-event-popup-subject-padding;
+          padding: $schedule-bgr-multiple-event-popup-subject-padding;
         }
       }
     }

package/styles/schedule/_material-dark-definition.scss

@@ -88,7 +88,7 @@ $schedule-current-time-bgr-font-size: 12px !default;
 $schedule-current-time-bgr-device-font-size: 9px !default;
 $schedule-popup-header-icon-font-size: 11px !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 35px !default;
+$schedule-device-time-scale-width: 60px !default;
 
 $schedule-vertical-work-cells-border: 0 0 1px 1px !default;
 $schedule-rtl-vertical-work-cells-border: 0 1px 1px 0 !default;
@@ -197,7 +197,11 @@ $schedule-bgr-event-popup-header-icon-size: 2.8572em !default;
 $schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 13px !default;
 $schedule-multiple-event-popup-icon-bg-color: transparent !default;
 $schedule-multiple-event-popup-icon-color: $schedule-primary-content-font-color !default;
-$schedule-multiple-event-popup-subject-padding: 5px 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: 14px !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 3px 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 35px !default;
 
 $schedule-event-box-shadow-1: 0 6px 10px 0 rgba($grey-black, .14) !default;
 $schedule-event-box-shadow-2: 0 1px 18px 0 rgba($grey-black, .12) !default;

package/styles/schedule/_material-definition.scss

@@ -89,7 +89,7 @@ $schedule-current-time-bgr-font-size: 12px !default;
 $schedule-current-time-bgr-device-font-size: 9px !default;
 $schedule-popup-header-icon-font-size: 11px !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 35px !default;
+$schedule-device-time-scale-width: 60px !default;
 
 $schedule-vertical-work-cells-border: 0 0 1px 1px !default;
 $schedule-rtl-vertical-work-cells-border: 0 1px 1px 0 !default;
@@ -194,7 +194,11 @@ $schedule-bgr-event-popup-header-icon-size: 2.8572em !default;
 $schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 13px !default;
 $schedule-multiple-event-popup-icon-bg-color: transparent !default;
 $schedule-multiple-event-popup-icon-color: $schedule-primary-content-font-color !default;
-$schedule-multiple-event-popup-subject-padding: 5px 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: 14px !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 3px 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 35px !default;
 
 $schedule-event-box-shadow-1: 0 6px 10px 0 rgba($grey-black, .14) !default;
 $schedule-event-box-shadow-2: 0 1px 18px 0 rgba($grey-black, .12) !default;

package/styles/schedule/_material3-definition.scss

@@ -121,7 +121,11 @@ $schedule-bgr-event-popup-header-icon-size: 30px !default;
 $schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 13px !default;
 $schedule-multiple-event-popup-icon-bg-color: transparent !default;
 $schedule-multiple-event-popup-icon-color: rgba($icon-color) !default;
-$schedule-multiple-event-popup-subject-padding: 5px 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: $text-base !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 35px !default;
 
 // schedule toolbar definitions
 $border-size: 1px;
@@ -229,7 +233,7 @@ $schedule-timezone-enable-nrml-height: 60px !default;
 $schedule-timezone-enable-bgr-height: 66px !default;
 $schedule-header-cells-padding: 3px 3px 2px !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 44px !default;
+$schedule-device-time-scale-width: 60px !default;
 $border-type: solid !default;
 $schedule-alternate-cell-border: dashed !default;
 $schedule-header-hover-border-radius: 4px !default;

package/styles/schedule/_tailwind-definition.scss

@@ -93,7 +93,7 @@ $schedule-current-time-bgr-font-size: $text-xs !default;
 $schedule-current-time-bgr-device-font-size: $text-xs !default;
 $schedule-popup-header-icon-font-size: $text-lg !default;
 $schedule-time-scale-width: 85px !default;
-$schedule-device-time-scale-width: 35px !default;
+$schedule-device-time-scale-width: 60px !default;
 $schedule-header-date-line-height: 24px !default;
 $schedule-header-padding-top: 0 !default;
 
@@ -200,7 +200,11 @@ $schedule-bgr-event-popup-header-icon-size: 2em !default;
 $schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 16px !default;
 $schedule-multiple-event-popup-icon-bg-color: $schedule-header-bg-color !default;
 $schedule-multiple-event-popup-icon-color: $schedule-popup-header-icon-color !default;
-$schedule-multiple-event-popup-subject-padding: 0 5px 0 8px !default;
+$schedule-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-multiple-event-popup-icon-height: 35px !default;
+$schedule-multiple-event-popup-icon-font-size: 18px !default;
+$schedule-bgr-multiple-event-popup-subject-padding: 2px 5px !default;
+$schedule-bgr-multiple-event-popup-icon-height: 35px !default;
 
 $schedule-event-box-shadow-1: $shadow-lg !default;
 $schedule-event-box-shadow-2: $shadow-lg !default;

package/styles/schedule/bootstrap-dark.css

@@ -1154,7 +1154,7 @@
   text-decoration: none;
 }
 .e-schedule.e-device .e-vertical-view .e-left-indent {
-  width: 35px;
+  width: 60px;
 }
 .e-schedule.e-device .e-vertical-view .e-clone-time-indicator,
 .e-schedule.e-device .e-vertical-view .e-current-time {
@@ -1162,7 +1162,7 @@
 }
 .e-schedule.e-device .e-vertical-view .e-time-cells-wrap {
   float: left;
-  width: 35px;
+  width: 60px;
 }
 .e-schedule.e-device .e-vertical-view .e-time-cells-wrap table td {
   font-size: 11px;
@@ -1200,7 +1200,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-schedule .e-vertical-view .e-left-indent {
-    width: 35px;
+    width: 60px;
   }
 }
 .e-schedule .e-month-view .e-left-indent,
@@ -3350,8 +3350,8 @@
   background: transparent;
   border: 0;
   color: #f0f0f0;
-  height: 40px;
-  width: 40px;
+  height: 35px;
+  width: 35px;
 }
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close:focus, .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close:hover,
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit:focus,
@@ -3363,10 +3363,10 @@
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-subject {
   font-size: 15px;
   font-weight: 500;
-  height: 40px;
+  height: 35px;
   line-height: 2.25;
-  padding: 4px 5px;
-  width: calc(100% - 95px);
+  padding: 2px 5px;
+  width: calc(100% - 105px);
 }
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close-icon,
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit-icon,
@@ -3400,9 +3400,13 @@
 .e-bigger .e-quick-popup-wrapper.e-rtl .e-event-popup .e-date-time-icon {
   padding-right: 13px;
 }
-.e-bigger .e-quick-popup-wrapper .e-edit.e-btn.e-small.e-round,
-.e-bigger .e-quick-popup-wrapper .e-delete.e-btn.e-small.e-round,
-.e-bigger .e-quick-popup-wrapper .e-close.e-btn.e-small.e-round {
+.e-bigger .e-quick-popup-wrapper .e-cell-popup .e-close.e-btn.e-small.e-round {
+  height: 2em;
+  width: 2em;
+}
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-edit.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-delete.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-close.e-btn.e-small.e-round {
   height: 2em;
   width: 2em;
 }
@@ -3416,8 +3420,13 @@
 .e-bigger .e-quick-popup-wrapper.e-device .e-event-popup .e-popup-header .e-header-icon-wrapper .e-delete-icon {
   font-size: 14px;
 }
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-delete.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close.e-btn.e-small.e-round {
+  height: 35px;
+}
 .e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-subject {
-  padding: 0 5px 0 8px;
+  padding: 2px 5px;
 }
 
 .e-bigger .e-agenda-view .e-appointment {