@syncfusion/ej2-schedule 28.2.11 → 29.1.34

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

@@ -201,6 +201,10 @@
 .e-recurrenceeditor .e-month-expander-checkbox-wrapper.e-input-wrapper .e-month-type .e-label {
   display: none;
 }
+.e-recurrenceeditor .e-input-wrapper.e-month-expander-checkbox-wrapper.e-repeat-on-week-selector {
+  min-width: 30px;
+  margin-bottom: 18px;
+}
 .e-recurrenceeditor .e-input-wrapper-side {
   float: left;
   padding: 16px 20px 0;
@@ -372,7 +376,7 @@
     width: 65%;
   }
   .e-recurrenceeditor .e-editor .e-recurrence-table .e-day-position {
-    padding-left: 50px;
+    padding-left: 59px;
   }
   .e-recurrenceeditor.e-rtl .e-input-wrapper-side.e-end-on .e-end-on-left {
     padding-right: 0;

package/styles/recurrence-editor/tailwind.css

@@ -201,6 +201,10 @@
 .e-recurrenceeditor .e-month-expander-checkbox-wrapper.e-input-wrapper .e-month-type .e-label {
   display: none;
 }
+.e-recurrenceeditor .e-input-wrapper.e-month-expander-checkbox-wrapper.e-repeat-on-week-selector {
+  min-width: 30px;
+  margin-bottom: 18px;
+}
 .e-recurrenceeditor .e-input-wrapper-side {
   float: left;
   padding: 16px 20px 0;
@@ -372,7 +376,7 @@
     width: 65%;
   }
   .e-recurrenceeditor .e-editor .e-recurrence-table .e-day-position {
-    padding-left: 50px;
+    padding-left: 59px;
   }
   .e-recurrenceeditor.e-rtl .e-input-wrapper-side.e-end-on .e-end-on-left {
     padding-right: 0;

package/styles/recurrence-editor/tailwind3.css

@@ -231,6 +231,10 @@
 .e-recurrenceeditor .e-month-expander-checkbox-wrapper.e-input-wrapper .e-month-type .e-label {
   display: none;
 }
+.e-recurrenceeditor .e-input-wrapper.e-month-expander-checkbox-wrapper.e-repeat-on-week-selector {
+  min-width: 30px;
+  margin-bottom: 18px;
+}
 .e-recurrenceeditor .e-input-wrapper-side {
   float: left;
   padding: 16px 20px 0;
@@ -402,7 +406,7 @@
     width: 65%;
   }
   .e-recurrenceeditor .e-editor .e-recurrence-table .e-day-position {
-    padding-left: 50px;
+    padding-left: 59px;
   }
   .e-recurrenceeditor.e-rtl .e-input-wrapper-side.e-end-on .e-end-on-left {
     padding-right: 0;

package/styles/schedule/_bds-definition.scss

@@ -262,6 +262,8 @@ $schedule-header-icon-wrapper-bg-color: $schedule-content-bg-color !default;
 $schedule-bgr-date-time-icon-padding-right: 16px !default;
 $schedule-bgr-more-event-close-icon-padding: 1px !default;
 $schedule-bgr-tbar-btn-text-font-size: $schedule-header-bgr-font-size !default;
+$schedule-calendar-width: 300px !default;
+$schedule-bgr-calendar-width: 345px !default;
 
 @mixin tbar-btn-animation {
   content: '';

package/styles/schedule/_bigger.scss

@@ -161,7 +161,7 @@
     }
 
     .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar {
-      min-width: 306px;
+      min-width: $schedule-bgr-calendar-width;
     }
   }
 
@@ -176,7 +176,7 @@
   }
 
   .e-bigger .e-dialog.e-quick-dialog.e-following-events-dialog {
-    width: 502px;
+    width: 520px;
   }
 
   .e-bigger .e-dialog.e-quick-dialog {
@@ -208,17 +208,6 @@
         position: relative;
       }
 
-      .e-event-cancel,
-      .e-event-delete {
-        border: $schedule-popup-btn-border;
-        box-shadow: none;
-      }
-
-      .e-footer-content .e-btn.e-event-delete {
-        float: left;
-        margin-left: 0;
-      }
-
       .e-subject-container,
       .e-start-container,
       .e-start-time-zone-container,
@@ -324,10 +313,6 @@
           padding-left: 0;
           padding-right: 12px;
         }
-
-        .e-event-delete {
-          float: right;
-        }
       }
     }
   }

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

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $schedule-skin: $skin-name !default;
 $schedule-header-bg-color: $grey-base !default;
 $schedule-header-border-color: $grey-99 !default;
@@ -19,7 +21,7 @@ $schedule-resource-focus-bg-color: $schedule-hover-bg-color !default;
 $schedule-hover-font-color: $header-font-color !default;
 $schedule-active-color: $brand-primary-font !default;
 $schedule-active-border-color: $brand-primary !default;
-$schedule-active-font-color: lighten($brand-primary, 15%) !default;
+$schedule-active-font-color: color.adjust($brand-primary, $lightness: 15%) !default;
 $schedule-current-day-active-color: $schedule-active-color !default;
 $schedule-calendar-background: none !default;
 $schedule-calendar-shadow: none !default;
@@ -259,6 +261,8 @@ $schedule-header-icon-wrapper-bg-color: $schedule-content-bg-color !default;
 $schedule-bgr-date-time-icon-padding-right: 13px !default;
 $schedule-bgr-more-event-close-icon-padding: unset !default;
 $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
+$schedule-calendar-width: 300px !default;
+$schedule-bgr-calendar-width: 345px !default;
 
 @mixin tbar-btn-animation {
   content: '';

package/styles/schedule/_bootstrap-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $schedule-skin: $skin-name !default;
 $schedule-header-bg-color: $grey-white !default;
 $schedule-header-border-color: $grey-dd !default;
@@ -50,7 +52,7 @@ $schedule-month-date-header-cell-text-transform: none !default;
 $schedule-appointment-details-padding: 0 4px !default;
 $schedule-appointment-bg-color: $brand-primary !default;
 $schedule-appointment-font-color: $brand-primary-font !default;
-$schedule-appointment-border-color: lighten($schedule-appointment-bg-color, 40%) !default;
+$schedule-appointment-border-color: color.adjust($schedule-appointment-bg-color, $lightness: 40%) !default;
 $schedule-appointment-border-radius: 2px !default;
 $schedule-appointment-active-border-color: $grey-base !default;
 $schedule-month-agenda-app-indicator-color: $grey-light-font !default;
@@ -259,6 +261,8 @@ $schedule-header-icon-wrapper-bg-color: $schedule-content-bg-color !default;
 $schedule-bgr-date-time-icon-padding-right: 13px !default;
 $schedule-bgr-more-event-close-icon-padding: unset !default;
 $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
+$schedule-calendar-width: 300px !default;
+$schedule-bgr-calendar-width: 345px !default;
 
 @mixin tbar-btn-animation {
   content: '';

package/styles/schedule/_bootstrap4-definition.scss

@@ -1,10 +1,12 @@
+@use 'sass:color';
+
 $border-type: solid !default;
 $border-size: 1px !default;
 $schedule-skin: $skin-name !default;
 $schedule-header-bg-color: $content-bg !default;
 $schedule-header-border-color: $gray-300 !default;
 $schedule-header-font-color: $gray-900 !default;
-$schedule-header-hover-color: darken($gray-600, 7.5%) !default;
+$schedule-header-hover-color: color.adjust($gray-600, $lightness: -7.5%) !default;
 $schedule-content-bg-color: $content-bg !default;
 $schedule-content-border-color: $gray-300 !default;
 $schedule-primary-content-font-color: $gray-900 !default;
@@ -16,7 +18,7 @@ $schedule-current-date-bg-color: $primary !default;
 $schedule-disable-dates-color: rgba($black, .08) !default;
 $schedule-disable-font-color: $primary-font !default;
 $schedule-workhour-bg-color: $content-bg !default;
-$schedule-hover-bg-color: darken($gray-100, 2%) !default;
+$schedule-hover-bg-color: color.adjust($gray-100, $lightness: -2%) !default;
 $schedule-resource-focus-bg-color: $schedule-hover-bg-color !default;
 $schedule-hover-font-color: $gray-900 !default;
 $schedule-active-color: $primary-font !default;
@@ -56,7 +58,7 @@ $schedule-month-date-header-cell-text-transform: none !default;
 $schedule-appointment-details-padding: 4px 8px 0 !default;
 $schedule-appointment-bg-color: $primary !default;
 $schedule-appointment-font-color: $primary-font !default;
-$schedule-appointment-border-color: lighten($schedule-appointment-bg-color, 40%) !default;
+$schedule-appointment-border-color: color.adjust($schedule-appointment-bg-color, $lightness: 40%) !default;
 $schedule-appointment-border-radius: 4px !default;
 $schedule-appointment-selected-border: 1px solid rgba($black, .5) !default;
 $schedule-appointment-active-border-color: #333 !default;
@@ -125,7 +127,7 @@ $schedule-tbar-default-bg: $gray-100 !default;
 $schedule-tbar-separator-border: $gray-300 !default;
 $schedule-tbar-border-nav: 1px !default;
 $schedule-tbar-border-nav-type: solid !default;
-$schedule-tbar-hover-bg: darken($gray-600, 10%) !default;
+$schedule-tbar-hover-bg: color.adjust($gray-600, $lightness: -10%) !default;
 $schedule-tbar-hover-font: $primary-font !default;
 $schedule-tbar-nav-bgr-width: 32px !default;
 $schedule-tbar-bgr-item-size: 34px !default;
@@ -262,6 +264,8 @@ $schedule-header-icon-wrapper-bg-color: $schedule-content-bg-color !default;
 $schedule-bgr-date-time-icon-padding-right: 10px !default;
 $schedule-bgr-more-event-close-icon-padding: unset !default;
 $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
+$schedule-calendar-width: 300px !default;
+$schedule-bgr-calendar-width: 345px !default;
 
 @mixin tbar-btn-animation {
   content: '';
@@ -270,4 +274,4 @@ $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
   content: '';
 }
 
-$schedule-tbar-border-hover-color: darken($gray-600, 12.5%) !default;
+$schedule-tbar-border-hover-color: color.adjust($gray-600, $lightness: -12.5%) !default;

package/styles/schedule/_bootstrap5-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $schedule-skin: $skin-name !default;
 $schedule-date-navigation-font-size: $text-lg !default;
 $schedule-header-nrml-font-size: $text-sm !default;
@@ -229,7 +231,7 @@ $schedule-work-cells-bg-color: $content-bg-color-alt1 !default;
 $schedule-current-date-bg-color: $primary !default;
 $schedule-disable-dates-color: $content-bg-color-alt2 !default;
 $schedule-workhour-bg-color: $content-bg-color !default;
-$schedule-hover-bg-color: darken($content-bg-color-alt1, 2%) !default;
+$schedule-hover-bg-color: color.adjust($content-bg-color-alt1, $lightness: -2%) !default;
 $schedule-resource-focus-bg-color: $schedule-hover-bg-color !default;
 $schedule-active-color: $content-bg-color !default;
 $schedule-current-day-active-color: $schedule-active-color !default;
@@ -264,6 +266,8 @@ $schedule-bgr-date-time-icon-padding-right: 10px !default;
 $schedule-bgr-more-event-close-icon-padding: unset !default;
 $schedule-bgr-tbar-btn-text-font-size: $schedule-header-bgr-font-size !default;
 $schedule-multiple-event-popup-icon-bg-color: $schedule-header-bg-color !default;
+$schedule-calendar-width: 300px !default;
+$schedule-bgr-calendar-width: 345px !default;
 
 @mixin tbar-btn-animation {
   content: '';

package/styles/schedule/_bootstrap5.3-definition.scss

@@ -266,6 +266,8 @@ $schedule-bgr-date-time-icon-padding-right: 10px !default;
 $schedule-bgr-more-event-close-icon-padding: unset !default;
 $schedule-bgr-tbar-btn-text-font-size: $schedule-header-bgr-font-size !default;
 $schedule-multiple-event-popup-icon-bg-color: $schedule-header-bg-color !default;
+$schedule-calendar-width: 300px !default;
+$schedule-bgr-calendar-width: 345px !default;
 
 @mixin tbar-btn-animation {
   content: '';

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

@@ -259,6 +259,8 @@ $schedule-bgr-date-time-icon-padding-right: 13px !default;
 $schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 13px !default;
 $schedule-bgr-more-event-close-icon-padding: unset !default;
 $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
+$schedule-calendar-width: 300px !default;
+$schedule-bgr-calendar-width: 345px !default;
 
 @mixin tbar-btn-animation {
   content: '';

package/styles/schedule/_fabric-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $schedule-skin: $skin-name !default;
 $schedule-header-bg-color: $neutral-white !default;
 $schedule-header-border-color: $neutral-quintenaryalt !default;
@@ -54,7 +56,7 @@ $schedule-timezone-enable-bgr-height: 70px !default;
 $schedule-appointment-bg-color: $theme-primary !default;
 $schedule-appointment-details-padding: 0 4px !default;
 $schedule-appointment-font-color: $theme-primary-font !default;
-$schedule-appointment-border-color: lighten($schedule-appointment-bg-color, 40%) !default;
+$schedule-appointment-border-color: color.adjust($schedule-appointment-bg-color, $lightness: 40%) !default;
 $schedule-appointment-border-radius: 2px !default;
 $schedule-appointment-selected-border: 1px solid rgba($neutral-black, .5) !default;
 $schedule-appointment-active-border-color: #000 !default;
@@ -259,6 +261,8 @@ $schedule-header-icon-wrapper-bg-color: $schedule-content-bg-color !default;
 $schedule-bgr-date-time-icon-padding-right: 13px !default;
 $schedule-bgr-more-event-close-icon-padding: unset !default;
 $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
+$schedule-calendar-width: 300px !default;
+$schedule-bgr-calendar-width: 345px !default;
 
 @mixin tbar-btn-animation {
   content: '';

package/styles/schedule/_fluent-definition.scss

@@ -113,7 +113,7 @@ $schedule-tbar-bgr-min-height: 54px !default;
 $schedule-tbar-border-bottom-size: 1px solid $border-light !default;
 $schedule-tbar-box-shadow: 0 1px 2px rgba($black, .15) !default;
 $schedule-tbar-box-shadow-bottom-margin: 3px !default;
-$schedule-tbar-min-height: 38px !default;
+$schedule-tbar-min-height: 40px !default;
 $schedule-tbar-down-arrow-font-size: $text-base !default;
 $schedule-tbar-down-arrow-margin-top: 4px !default;
 $schedule-tbar-default-icon-color: $icon-color !default;
@@ -264,6 +264,8 @@ $schedule-bgr-date-time-icon-padding-right: 13px !default;
 $schedule-bgr-more-event-close-icon-padding: unset !default;
 $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
 $schedule-header-icon-wrapper-bg-color: $schedule-content-bg-color !default;
+$schedule-calendar-width: 260px !default;
+$schedule-bgr-calendar-width: 306px !default;
 
 @mixin tbar-btn-animation {
   content: '';

package/styles/schedule/_fluent2-definition.scss

@@ -243,7 +243,7 @@ $schedule-val-error-bg-color: $danger-light !default;
 $schedule-block-appointment-bg-color: $holiday-bg-color !default;
 $schedule-block-appointment-font-color: $content-text-color !default;
 $schedule-resource-color-margin-top: 10px !default;
-$schedule-bigger-resource-color-margin-top: 10px !default;
+$schedule-bigger-resource-color-margin-top: 12px !default;
 $schedule-resource-color-size: 14px !default;
 $schedule-bigger-resource-color-size: 16px !default;
 $schedule-resource-tree-text-content-padding: 0 0 0 12px !default;
@@ -264,6 +264,8 @@ $schedule-header-icon-wrapper-bg-color: $schedule-content-bg-color !default;
 $schedule-bgr-date-time-icon-padding-right: 12px !default;
 $schedule-bgr-more-event-close-icon-padding: 1px !default;
 $schedule-bgr-tbar-btn-text-font-size: $schedule-header-bgr-font-size !default;
+$schedule-calendar-width: 295px !default;
+$schedule-bgr-calendar-width: 345px !default;
 
 @mixin tbar-btn-animation {
   content: '';

package/styles/schedule/_fusionnew-definition.scss

@@ -264,6 +264,8 @@ $schedule-bgr-date-time-icon-padding-right: 13px !default;
 $schedule-bgr-more-event-close-icon-padding: unset !default;
 $schedule-header-icon-wrapper-bg-color: $schedule-content-bg-color !default;
 $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
+$schedule-calendar-width: 300px !default;
+$schedule-bgr-calendar-width: 345px !default;
 
 @mixin tbar-btn-animation {
   content: '';

package/styles/schedule/_highcontrast-definition.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $schedule-skin: $skin-name !default;
 $schedule-header-bg-color: $bg-base-0 !default;
 $schedule-header-border-color: $border-default !default;
@@ -51,7 +53,7 @@ $schedule-month-date-header-cell-text-align: left !default;
 $schedule-month-date-header-cell-text-transform: none !default;
 $schedule-timezone-enable-nrml-height: 60px !default;
 $schedule-timezone-enable-bgr-height: 70px !default;
-$schedule-appointment-bg-color: lighten($success-bg, 5%) !default;
+$schedule-appointment-bg-color: color.adjust($success-bg, $lightness: 5%) !default;
 $schedule-appointment-details-padding: 0 4px !default;
 $schedule-appointment-font-color: $content-font !default;
 $schedule-appointment-active-border-color: $selection-bg !default;
@@ -161,7 +163,7 @@ $schedule-popup-icon-hover-bg-color: $hover-bg !default;
 $schedule-popup-content-icon-color: $schedule-primary-content-font-color !default;
 $schedule-event-popup-content-padding: 0 18px 16px 26px !default;
 $schedule-event-popup-fields-padding: 12px !default;
-$schedule-popup-title-color: rgba($color: lighten($success-bg, 5%), $alpha: .3) !default;
+$schedule-popup-title-color: rgba($color: color.adjust($success-bg, $lightness: 5%), $alpha: .3) !default;
 $schedule-popup-btn-border: $border-size $border-type $content-font !default;
 $schedule-alert-dialog-border: none !default;
 $schedule-btn-txt-bgr-padding: 5px 12px !default;
@@ -259,6 +261,8 @@ $schedule-header-icon-wrapper-bg-color: $schedule-content-bg-color !default;
 $schedule-bgr-date-time-icon-padding-right: 13px !default;
 $schedule-bgr-more-event-close-icon-padding: unset !default;
 $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
+$schedule-calendar-width: 280px !default;
+$schedule-bgr-calendar-width: 345px !default;
 
 @mixin tbar-btn-animation {
   content: '';

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

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $schedule-skin: $skin-name !default;
 $schedule-header-bg-color: $bg-base-0 !default;
 $schedule-header-border-color: $border-default !default;
@@ -51,7 +53,7 @@ $schedule-month-date-header-cell-text-align: left !default;
 $schedule-month-date-header-cell-text-transform: none !default;
 $schedule-timezone-enable-nrml-height: 60px !default;
 $schedule-timezone-enable-bgr-height: 70px !default;
-$schedule-appointment-bg-color: lighten($success-bg, 5%) !default;
+$schedule-appointment-bg-color: color.adjust($success-bg, $lightness: 5%) !default;
 $schedule-appointment-details-padding: 0 4px !default;
 $schedule-appointment-font-color: $invert-font !default;
 $schedule-appointment-active-border-color: $selection-bg !default;
@@ -161,7 +163,7 @@ $schedule-popup-icon-hover-bg-color: $hover-bg !default;
 $schedule-popup-content-icon-color: $schedule-primary-content-font-color !default;
 $schedule-event-popup-content-padding: 0 18px 16px 26px !default;
 $schedule-event-popup-fields-padding: 12px !default;
-$schedule-popup-title-color: rgba($color: lighten($success-bg, 5%), $alpha: .3) !default;
+$schedule-popup-title-color: rgba($color: color.adjust($success-bg, $lightness: 5%), $alpha: .3) !default;
 $schedule-popup-btn-border: $border-size $border-type $content-font !default;
 $schedule-alert-dialog-border: none !default;
 $schedule-btn-txt-bgr-padding: 5px 12px !default;
@@ -259,6 +261,8 @@ $schedule-following-events-dlg-padding: 2% !default;
 $schedule-bgr-date-time-icon-padding-right: 13px !default;
 $schedule-bgr-more-event-close-icon-padding: unset !default;
 $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
+$schedule-calendar-width: 300px !default;
+$schedule-bgr-calendar-width: 350px !default;
 
 @mixin tbar-btn-animation {
   content: '';

package/styles/schedule/_layout.scss

@@ -179,9 +179,14 @@
             border-right: $schedule-tbar-separator-size $border-type $schedule-tbar-separator-border;
           }
 
-          &.e-date-range .e-tbar-btn .e-tbar-btn-text {
-            font-size: $schedule-header-nrml-font-size;
-            text-transform: initial;
+          &.e-date-range .e-tbar-btn {
+            &.e-schedule-date-range-tbtn {
+              width: auto;
+            }
+            .e-tbar-btn-text {
+              font-size: $schedule-header-nrml-font-size;
+              text-transform: initial;
+            }
           }
         }
       }
@@ -1309,6 +1314,11 @@
     }
 
     .e-month-view {
+      .e-month-event-table {
+        position: absolute;
+        top: 0;
+      }
+
       .e-content-wrap table tr:last-child td {
         border-bottom-width: 0;
       }
@@ -1510,7 +1520,7 @@
           border: 0;
           flex: 0 25%;
           max-width: 100%;
-          min-width: 260px;
+          min-width: $schedule-calendar-width;
           padding: 10px;
           @if ($theme-name == 'fluent2') {
             box-shadow: none;
@@ -2472,6 +2482,10 @@
     .e-agenda-view {
       background: $schedule-agenda-color;
 
+      .e-agenda-load-more {
+        font-size: 14px;
+      }
+
       .e-content-wrap table td:first-child,
       .e-date-column {
         vertical-align: top;
@@ -2783,11 +2797,19 @@
     visibility: hidden;
   }
 
+  .e-field-error-message {
+    display: block;
+  }
+
   .e-dialog.e-quick-dialog.e-following-events-dialog {
-    width: 420px;
+    width: 440px;
 
     .e-footer-content {
       padding: $schedule-following-events-dlg-padding;
+
+      button {
+        margin-bottom: 6px;
+      }
     }
     @media screen and (max-width: 767px) {
       width: 289px;
@@ -2816,10 +2838,10 @@
 
     .e-footer-content {
       border-top: $schedule-alert-dialog-border;
-    }
 
-    .e-quick-dialog-cancel {
-      box-shadow: none;
+      button {
+        margin-bottom: 6px;
+      }
     }
 
     &.e-rtl {
@@ -2984,7 +3006,12 @@
       }
     }
   }
-  
+
+  .e-editor-content-item-template {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
   /*! schedule event window for smaller viewports*/
   @media screen and (max-width: 320px) {
     .e-schedule-dialog.e-popup.e-popup-open {
@@ -3327,6 +3354,9 @@
 
     .e-cell-popup,
     .e-event-popup {
+      .e-popup-header .e-popup-header-title-text {
+        display: none;
+      }
       .e-header-icon-wrapper {
         display: flex;
         justify-content: flex-end;

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

@@ -259,6 +259,8 @@ $schedule-header-icon-wrapper-bg-color: unset !default;
 $schedule-bgr-date-time-icon-padding-right: 13px !default;
 $schedule-bgr-more-event-close-icon-padding: unset !default;
 $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
+$schedule-calendar-width: 260px !default;
+$schedule-bgr-calendar-width: 306px !default;
 
 @mixin tbar-btn-animation {
   content: '';

package/styles/schedule/_material-definition.scss

@@ -259,6 +259,8 @@ $schedule-header-icon-wrapper-bg-color: unset !default;
 $schedule-bgr-date-time-icon-padding-right: 13px !default;
 $schedule-bgr-more-event-close-icon-padding: unset !default;
 $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
+$schedule-calendar-width: 260px !default;
+$schedule-bgr-calendar-width: 306px !default;
 
 @mixin tbar-btn-animation {
   content: '';

package/styles/schedule/_material3-definition.scss

@@ -192,8 +192,8 @@ $schedule-month-agenda-appointment-padding: 0 16px !default;
 $schedule-month-agenda-item-padding: 12px 0 !default;
 $schedule-all-day-section-hover-color: $schedule-tbar-default-icon-color !default;
 $schedule-timeline-resources-width: 224px !default;
-$schedule-resource-color-margin-top: 10px !default;
-$schedule-bigger-resource-color-margin-top: 14px !default;
+$schedule-resource-color-margin-top: 9px !default;
+$schedule-bigger-resource-color-margin-top: 11px !default;
 $schedule-resource-color-size: 14px !default;
 $schedule-bigger-resource-color-size: 16px !default;
 $schedule-resource-tree-text-content-padding: 0 0 0 8px !default;
@@ -266,6 +266,8 @@ $schedule-header-icon-wrapper-bg-color: unset !default;
 $schedule-bgr-date-time-icon-padding-right: 8px !default;
 $schedule-bgr-more-event-close-icon-padding: unset !default;
 $schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
+$schedule-calendar-width: 310px !default;
+$schedule-bgr-calendar-width: 345px !default;
 
 @mixin tbar-btn-animation {
   content: '';

package/styles/schedule/_tailwind-definition.scss

@@ -262,6 +262,8 @@ $schedule-header-icon-wrapper-bg-color: $schedule-content-bg-color !default;
 $schedule-bgr-date-time-icon-padding-right: 10px !default;
 $schedule-bgr-more-event-close-icon-padding: 1px !default;
 $schedule-bgr-tbar-btn-text-font-size: $schedule-header-bgr-font-size !default;
+$schedule-calendar-width: 292px !default;
+$schedule-bgr-calendar-width: 350px !default;
 
 @mixin tbar-btn-animation {
   content: '';

package/styles/schedule/_tailwind3-definition.scss

@@ -189,8 +189,8 @@ $schedule-agenda-big-appointment-padding: $schedule-agenda-appointment-padding !
 $schedule-month-agenda-appointment-padding: 0 16px !default;
 $schedule-month-agenda-item-padding: 10px 0 !default;
 $schedule-timeline-resources-width: 200px !default;
-$schedule-resource-color-margin-top: 10px !default;
-$schedule-bigger-resource-color-margin-top: 8px !default;
+$schedule-resource-color-margin-top: 8px !default;
+$schedule-bigger-resource-color-margin-top: 11px !default;
 $schedule-resource-color-size: 14px !default;
 $schedule-bigger-resource-color-size: 16px !default;
 $schedule-resource-tree-text-content-padding: 0 0 0 12px !default;
@@ -266,6 +266,8 @@ $schedule-bgr-date-time-icon-padding-right: 10px !default;
 $schedule-bgr-more-event-close-icon-padding: unset !default;
 $schedule-bgr-tbar-btn-text-font-size: $schedule-header-bgr-font-size !default;
 $schedule-multiple-event-popup-icon-bg-color: $schedule-header-bg-color !default;
+$schedule-calendar-width: 292px !default;
+$schedule-bgr-calendar-width: 350px !default;
 
 @mixin tbar-btn-animation {
   content: '';