@syncfusion/ej2-schedule 31.2.15 → 32.1.19

package/styles/schedule/_tailwind3-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@forward 'ej2-base/styles/definition/tailwind3';
 $schedule-skin: $skin-name !default;
 $schedule-date-navigation-font-size: $text-lg !default;
 $schedule-header-nrml-font-size: $text-sm !default;
@@ -39,20 +41,23 @@ $schedule-select-font-color: $content-text-color !default;
 $schedule-hover-font-color: $content-text-color-hover !default;
 $schedule-disable-font-color: $content-text-color !default;
 $schedule-active-font-color: $primary !default;
-$schedule-tbar-hover-font: rgba($primary, .87) !default;
+$schedule-tbar-hover-font: $icon-color-hover !default;
 $schedule-appointment-details-padding: 0 4px !default;
 $schedule-appointment-bg-color: $primary !default;
 $schedule-appointment-border-color: $border-light !default;
 $schedule-appointment-selected-border: 1px solid rgba($border-light, .5) !default;
-$schedule-appointment-border-radius: 8px !default;
+$schedule-appointment-border-radius: $radius-8 !default;
 $schedule-appointment-active-border-color: $icon-color !default;
 $schedule-month-appointment-height: 26px !default;
+$schedule-recurrence-icon-line-height: 26px !default;
+$schedule-agenda-recurrence-icon-line-height: 21px !default;
 $schedule-month-appointment-text-line-height: 18px !default;
 $schedule-month-event-clone-line-height-subject: 1.4 !default;
 $schedule-appointment-text-line-height: 18px !default;
 $schedule-month-appointment-time-padding: 1.5px !default;
 $schedule-month-appointment-subject-padding: 1px 2px !default;
 $schedule-timescale-appointment-height: 54px !default;
+$schedule-timescale-recurrence-icon-line-height: 54px !default;
 $schedule-appointment-font-color: $primary-text-color !default;
 $schedule-block-appointment-font-color: $content-text-color-alt2 !default;
 $schedule-more-appointment-margin-bottom: 2px !default;
@@ -100,7 +105,7 @@ $schedule-event-popup-subject-color: $schedule-primary-content-font-color !defau
 $schedule-event-popup-subject-bg-color: $schedule-popup-title-color !default;
 $schedule-event-popup-subject-border-left: 6px solid $schedule-appointment-bg-color !default;
 $schedule-event-popup-subject-padding: 8px !default;
-$schedule-event-popup-subject-border-radius: 4px !default;
+$schedule-event-popup-subject-border-radius: $radius-4 !default;
 $schedule-event-popup-footer-display: block !default;
 $schedule-event-popup-header-bg-color: $schedule-popup-bg-color !default;
 $schedule-event-popup-header-icon-display: none !default;
@@ -123,6 +128,7 @@ $schedule-tbar-border-bottom-size: 0 !default;
 $schedule-tbar-box-shadow: 0 1px 2px rgba($black, .15) !default;
 $schedule-tbar-box-shadow-bottom-margin: 3px !default;
 $schedule-tbar-min-height: 48px !default;
+$schedule-tbar-height: 48px !default;
 $schedule-tbar-default-icon-color: $icon-color !default;
 $schedule-tbar-separator-size: $border-size !default;
 $schedule-tbar-default-bg: $content-bg-color-alt1 !default;
@@ -146,9 +152,9 @@ $schedule-tbar-btn-bgr-padding: 0 1.5px !default;
 $schedule-tbar-btn-icn-bgr-padding: 4px 6px !default;
 $schedule-tbar-btn-icn-right-bgr-padding: 2px 0 0 12px !default;
 $schedule-tbar-right-items-btn-border: none !default;
-$schedule-tbar-right-items-btn-border-radius: 6px !default;
+$schedule-tbar-right-items-btn-border-radius: $radius-6 !default;
 $schedule-tbar-right-active-items-btn-border: none !default;
-$schedule-device-tbar-right-items-btn-border-radius: 0 !default;
+$schedule-device-tbar-right-items-btn-border-radius: $radius-0 !default;
 $schedule-device-tbar-right-items-btn-border: none !default;
 $schedule-device-font-size: 8px !default;
 $schedule-timeline-header-time-slots-bg: $schedule-tbar-default-bg !default;
@@ -159,6 +165,7 @@ $schedule-timeline-month-cells-width: 70px !default;
 $schedule-timeline-work-cells-border: 0 0 1px 1px !default;
 $schedule-rtl-timeline-work-cells-border: 0 1px 1px 0 !default;
 $schedule-timeline-appointment-height: 38px !default;
+$schedule-timeline-recurrence-icon-line-height: 38px !default;
 $schedule-timeline-year-work-cells-height: 75px !default;
 $schedule-timeline-year-work-cells-width: 100px !default;
 $schedule-timeline-year-resource-text-padding: 4px 12px !default;
@@ -216,8 +223,8 @@ $schedule-time-scale-width: 85px !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;
-$schedule-more-popup-wrapper-border-radius: 6px !default;
+$schedule-header-hover-border-radius: $radius-4 !default;
+$schedule-more-popup-wrapper-border-radius: $radius-6 !default;
 $schedule-box-shadow: 0 1px 0 rgba($black, .15) !default;
 $schedule-select-focus-bg-color: $content-bg-color-focus !default;
 $schedule-select-focus-box-shadow: $keyboard-focus-shadow !default;
@@ -270,6 +277,104 @@ $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;
+$schedule-agenda-date-line-height: 32px !default;
+
+$schedule-font-icon-size-8: 8px !default;
+$schedule-font-icon-size-10: 10px !default;
+$schedule-font-icon-size-12: 12px !default;
+$schedule-font-icon-size-14: 14px !default;
+
+$schedule-border-0: 0 !default;
+$schedule-border-1: 1px !default;
+$schedule-border-3: 3px !default;
+$schedule-border-8: 8px !default;
+
+$schedule-border-radius-5: $radius-5 !default;
+$schedule-border-radius-50: $border-radius-50p !default;
+$schedule-border-radius-full: $radius-full !default;
+
+$schedule-font-weight-normal: 400 !default;
+$schedule-font-weight-medium: 500 !default;
+
+$schedule-line-height-1: 1 !default;
+$schedule-line-height-1-2: 1.2 !default;
+$schedule-line-height-1-4: 1.4 !default;
+$schedule-line-height-1-5: 1.5 !default;
+$schedule-line-height-2-25: 2.25 !default;
+$schedule-line-height-11: 11px !default;
+$schedule-line-height-15: 15px !default;
+$schedule-line-height-18: 18px !default;
+$schedule-line-height-20: 20px !default;
+$schedule-line-height-23: 23px !default;
+$schedule-line-height-24-5: 24.5px !default;
+$schedule-line-height-25: 25px !default;
+$schedule-line-height-26: 26px !default;
+$schedule-line-height-52: 52px !default;
+$schedule-line-height-normal: normal !default;
+$schedule-line-height-inherit: inherit !default;
+
+$schedule-font-size-9: 9px !default;
+$schedule-font-size-11: 11px !default;
+$schedule-font-size-12: 12px !default;
+$schedule-font-size-13: 13px !default;
+$schedule-font-size-14: 14px !default;
+$schedule-font-size-15: 15px !default;
+$schedule-font-size-16: 16px !default;
+$schedule-font-size-18: 18px !default;
+$schedule-font-size-20: 20px !default;
+$schedule-font-size-22: 22px !default;
+$schedule-font-size-24: 24px !default;
+
+$schedule-height-0: 0 !default;
+$schedule-height-1: 1px !default;
+$schedule-height-5: 5px !default;
+$schedule-height-6: 6px !default;
+$schedule-height-10: 10px !default;
+$schedule-height-20: 20px !default;
+$schedule-height-24: 24px !default;
+$schedule-height-25: 25px !default;
+$schedule-height-35: 35px !default;
+$schedule-height-38: 38px !default;
+$schedule-height-40: 40px !default;
+$schedule-height-42: 42px !default;
+$schedule-height-50: 50px !default;
+$schedule-height-60: 60px !default;
+$schedule-height-100: 100px !default;
+
+$schedule-height-p20: 20% !default;
+$schedule-height-p100: 100% !default;
+$schedule-height-2-5: 2.5em !default;
+$schedule-height-inherit: inherit !default;
+$schedule-height-auto: auto !default;
+
+$schedule-spacing-0: 0 !default;
+$schedule-spacing-1: 1px !default;
+$schedule-spacing-1-5: 1.5px !default;
+$schedule-spacing-2: 2px !default;
+$schedule-spacing-3: 3px !default;
+$schedule-spacing-4: 4px !default;
+$schedule-spacing-5: 5px !default;
+$schedule-spacing-6: 6px !default;
+$schedule-spacing-7: 7px !default;
+$schedule-spacing-8: 8px !default;
+$schedule-spacing-10: 10px !default;
+$schedule-spacing-11: 11px !default;
+$schedule-spacing-12: 12px !default;
+$schedule-spacing-14: 14px !default;
+$schedule-spacing-15: 15px !default;
+$schedule-spacing-16: 16px !default;
+$schedule-spacing-18: 18px !default;
+$schedule-spacing-20: 20px !default;
+$schedule-spacing-24: 24px !default;
+$schedule-spacing-35: 35px !default;
+
+$schedule-spacing-percentage-5: 5% !default;
+$schedule-spacing-percentage-45: 45% !default;
+
+$schedule-negative-spacing-3: -3px !default;
+$schedule-negative-spacing-6: -6px !default;
+$schedule-negative-spacing-8: -8px !default;
+$schedule-negative-spacing-20: -20px !default;
 
 @mixin tbar-btn-animation {
   content: '';

package/styles/schedule/_theme-variables.scss

@@ -0,0 +1 @@
+@forward './_tailwind3-definition';

package/styles/schedule/_theme.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @mixin schedule-select-cell-focus-styles {
   @if $skin-name == 'fluent2' {
     &:focus {
@@ -38,7 +40,7 @@
     .e-date-header-wrap {
       border-color: $schedule-header-border-color;
       border-style: $border-type;
-      border-width: 0;
+      border-width: $schedule-border-0;
       position: relative;
     }
 
@@ -55,7 +57,7 @@
     .e-vertical-view {
       .e-date-header-wrap table tbody td:first-child,
       .e-content-wrap table td:first-child {
-        border-left-width: 0;
+        border-left-width: $schedule-border-0;
       }
 
       .e-date-header-wrap {
@@ -73,16 +75,16 @@
         background: $schedule-header-bg-color;
         border-color: $schedule-header-border-color;
         border-style: $border-type;
-        border-width: 0 1px 1px 0;
+        border-width: $schedule-border-0 $schedule-border-1 $schedule-border-1 $schedule-border-0;
         color: $schedule-header-font-color;
 
         &.e-header-cells {
-          border-bottom-width: 0;
+          border-bottom-width: $schedule-border-0;
 
           &.e-week-number {
             color: $schedule-secondary-content-font-color;
             font-size: $schedule-date-header-wrap-nrml-font-size;
-            padding-top: 10px;
+            padding-top: $schedule-spacing-10;
             text-align: center;
             vertical-align: top;
           }
@@ -102,7 +104,7 @@
         text-align: left;
 
         &.e-header-cells {
-          border-bottom-width: 0;
+          border-bottom-width: $schedule-border-0;
         }
       }
 
@@ -110,7 +112,7 @@
         background: $schedule-time-cells-bg-color;
         border-color: $schedule-content-border-color;
         border-style: $border-type;
-        border-width: 0 1px 1px 0;
+        border-width: $schedule-border-0 $schedule-border-1 $schedule-border-1 $schedule-border-0;
         color: $schedule-time-cells-font-color;
       }
 
@@ -136,7 +138,7 @@
         border-color: $schedule-content-border-color;
         border-style: $border-type;
         border-width: $schedule-vertical-work-cells-border;
-        padding: 0;
+        padding: $schedule-spacing-0;
 
         &:hover {
           background: $schedule-hover-bg-color;
@@ -189,17 +191,17 @@
       }
 
       .e-current-timeline {
-        border-top: 1px $border-type $schedule-active-border-color;
+        border-top: $schedule-border-1 $border-type $schedule-active-border-color;
       }
 
       .e-previous-timeline {
-        border-top: 1px $schedule-alternate-cell-border $schedule-active-border-color;
+        border-top: $schedule-border-1 $schedule-alternate-cell-border $schedule-active-border-color;
       }
 
       &.e-by-date {
         .e-date-header-wrap table tbody td {
           &.e-header-cells {
-            border-bottom-width: 1px;
+            border-bottom-width: $schedule-border-1;
           }
         }
       }
@@ -208,7 +210,7 @@
     .e-month-view {
       .e-date-header-wrap table td:first-child,
       .e-content-wrap table td:first-child {
-        border-left-width: 0;
+        border-left-width: $schedule-border-0;
       }
     }
 
@@ -236,7 +238,7 @@
         border-style: $border-type;
         border-width: $schedule-month-work-cells-border;
         color: $schedule-primary-content-font-color;
-        padding: 0;
+        padding: $schedule-spacing-0;
 
         &:hover {
           background: $schedule-hover-bg-color;
@@ -255,10 +257,10 @@
 
       .e-current-date .e-date-header {
         background: $schedule-current-date-bg-color;
-        border-radius: 50%;
+        border-radius: $schedule-border-radius-50;
         color: $schedule-current-date-header-font-color;
         min-width: 20px;
-        padding: 0 4px;
+        padding: $schedule-spacing-0 $schedule-spacing-4;
         width: fit-content;
       }
 
@@ -304,7 +306,7 @@
     .e-timeline-month-view {
       .e-date-header-wrap table td:first-child,
       .e-content-wrap table td:first-child {
-        border-left-width: 0;
+        border-left-width: $schedule-border-0;
       }
 
       .e-date-header-wrap table td {
@@ -326,7 +328,7 @@
         border-style: $border-type;
         border-width: $schedule-timeline-work-cells-border;
         color: $schedule-primary-content-font-color;
-        padding: 0;
+        padding: $schedule-spacing-0;
 
         &:hover:not(.e-resource-group-cells) {
           background: $schedule-hover-bg-color;
@@ -380,7 +382,7 @@
       }
 
       .e-header-row .e-time-cells {
-        border-left-width: 0;
+        border-left-width: $schedule-border-0;
       }
 
       .e-clone-time-indicator,
@@ -390,7 +392,7 @@
       }
 
       .e-current-timeline {
-        border-left: 1px $border-type $schedule-active-border-color;
+        border-left: $schedule-border-1 $border-type $schedule-active-border-color;
       }
     }
 
@@ -399,9 +401,9 @@
         background: $schedule-work-cells-bg-color;
         border-color: $schedule-content-border-color;
         border-style: $border-type;
-        border-width: 0 $border-size $border-size 0;
+        border-width: $schedule-border-0 $border-size $border-size $schedule-border-0;
         color: $schedule-primary-content-font-color;
-        padding: 0;
+        padding: $schedule-spacing-0;
     
         &:hover:not(.e-other-month) {
           background: $schedule-hover-bg-color;
@@ -418,9 +420,9 @@
     
         &.e-current-day .e-date-header {
           background: $schedule-current-date-bg-color;
-          border-radius: 50%;
+          border-radius: $schedule-border-radius-50;
           color: $schedule-current-day-active-color;
-          margin: 2px;
+          margin: $schedule-spacing-2;
           width: 20px;
         }
     
@@ -474,7 +476,7 @@
       .e-vertical-view {
         .e-date-header-wrap table tbody td:first-child,
         .e-content-wrap table td:first-child {
-          border-right-width: 0;
+          border-right-width: $schedule-border-0;
         }
 
         .e-date-header-wrap table tbody td {
@@ -488,19 +490,19 @@
 
         .e-left-indent-wrap .e-header-cells,
         .e-date-header-wrap .e-header-cells {
-          border-bottom-width: 0;
+          border-bottom-width: $schedule-border-0;
         }
 
         .e-left-indent-wrap table tbody td,
         .e-time-cells-wrap table tbody td {
-          border-width: 0 0 1px 1px;
+          border-width: $schedule-border-0 $schedule-border-0 $schedule-border-1 $schedule-border-1;
         }
       }
 
       .e-month-view {
         .e-date-header-wrap table td:first-child,
         .e-content-wrap table td:first-child {
-          border-right-width: 0;
+          border-right-width: $schedule-border-0;
         }
 
         .e-date-header-wrap table td {
@@ -526,12 +528,12 @@
       .e-timeline-month-view {
         .e-date-header-wrap table td:first-child,
         .e-content-wrap table td:first-child {
-          border-right-width: 0;
+          border-right-width: $schedule-border-0;
         }
 
         .e-date-header-wrap table td:last-child,
         .e-content-wrap table td:last-child {
-          border-left-width: 0;
+          border-left-width: $schedule-border-0;
         }
 
         .e-date-header-wrap table td,
@@ -546,7 +548,7 @@
         }
 
         .e-header-row .e-time-cells {
-          border-right-width: 0;
+          border-right-width: $schedule-border-0;
         }
       }
     }
@@ -563,13 +565,13 @@
 
     .e-arrow-tip-inner.e-tip-top,
     .e-arrow-tip-outer.e-tip-top {
-      border-bottom: 8px solid $schedule-val-error-bg-color;
+      border-bottom: $schedule-border-8 solid $schedule-val-error-bg-color;
       color: $schedule-val-error-bg-color;
     }
 
     .e-arrow-tip-outer.e-tip-bottom,
     .e-arrow-tip-inner.e-tip-bottom {
-      border-top: 8px solid $schedule-val-error-bg-color;
+      border-top: $schedule-border-8 solid $schedule-val-error-bg-color;
       color: $schedule-val-error-bg-color;
     }
 

package/styles/schedule/bds.css

@@ -307,6 +307,43 @@
   font-weight: 600;
 }
 
+.e-sidebar {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-tap-highlight-color: transparent;
+  background: var(--color-sf-bg-primary);
+  height: 100%;
+  overflow: auto;
+  position: fixed;
+  top: 0;
+  -webkit-transition: none;
+  transition: none;
+  vertical-align: middle;
+  visibility: hidden;
+  will-change: transform;
+  /* stylelint-disable */
+}
+.e-sidebar.e-right {
+  border-left: 1px solid var(--color-sf-border-secondary) !important;
+  left: auto;
+  right: 0;
+  top: 0;
+}
+.e-sidebar.e-left {
+  border-right: 1px solid var(--color-sf-border-secondary) !important;
+  left: 0;
+  right: auto;
+  top: 0;
+}
+
+.e-backdrop {
+  -webkit-filter: blur(2px) !important;
+          filter: blur(2px) !important;
+}
+
+.e-sidebar-overlay {
+  backdrop-filter: blur(2px) !important;
+}
+
 .e-schedule .e-schedule-toolbar .e-icon-prev::before {
   content: "\e765";
 }
@@ -2439,13 +2476,18 @@
   display: -ms-flexbox;
   display: flex;
 }
-.e-schedule .e-month-agenda-view .e-subject {
+.e-schedule .e-month-agenda-view .e-subject,
+.e-schedule .e-month-agenda-view .e-inline-subject {
   color: var(--color-sf-text-primary);
   font-size: 14px;
   line-height: 26px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.e-schedule .e-month-agenda-view .e-inline-subject {
+  font-weight: normal;
+  padding-top: 0;
+}
 .e-schedule .e-month-agenda-view .e-recurrence-icon,
 .e-schedule .e-month-agenda-view .e-recurrence-edit-icon {
   color: var(--color-sf-text-tertiary);
@@ -2552,6 +2594,7 @@
 }
 .e-schedule .e-agenda-view .e-day-date-header .e-m-date {
   font-size: 16px;
+  line-height: unset;
 }
 .e-schedule .e-agenda-view .e-day-date-header .e-m-day {
   font-size: 12px;
@@ -3451,9 +3494,6 @@
   -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05), 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05), 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
           box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05), 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05), 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
   color: var(--color-sf-on-brand-solid-primary);
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
   height: 38px;
   width: 100px;
   z-index: 9;
@@ -3503,10 +3543,7 @@
   display: none;
 }
 .e-appointment.e-schedule-event-clone.e-month-event .e-appointment-details .e-subject {
-  padding: 3px 2px;
-}
-.e-appointment.e-schedule-event-clone.e-month-event .e-appointment-details .e-time {
-  display: none;
+  padding: 0;
 }
 
 .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.e-schedule-event-clone .e-appointment-details .e-subject {

package/styles/schedule/bds.scss

@@ -1,17 +1,18 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-navigations/styles/toolbar/bds-definition.scss';
-@import 'ej2-navigations/styles/treeview/bds-definition.scss';
-@import 'ej2-inputs/styles/input/bds-definition.scss';
-@import 'ej2-inputs/styles/numerictextbox/bds-definition.scss';
-@import 'ej2-calendars/styles/calendar/bds-definition.scss';
-@import 'ej2-calendars/styles/datepicker/bds-definition.scss';
-@import 'ej2-calendars/styles/datetimepicker/bds-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bds-definition.scss';
-@import 'ej2-dropdowns/styles/multi-select/bds-definition.scss';
-@import 'ej2-buttons/styles/button/bds-definition.scss';
-@import 'ej2-buttons/styles/check-box/bds-definition.scss';
-@import '../recurrence-editor/bds-definition.scss';
-@import 'bds-definition.scss';
-@import 'icons/bds.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bds' as *;
+@use 'ej2-navigations/styles/toolbar/bds-definition' as *;
+@use 'ej2-navigations/styles/treeview/bds-definition' as *;
+@use 'ej2-inputs/styles/input/bds-definition' as *;
+@use 'ej2-inputs/styles/numerictextbox/bds-definition' as *;
+@use 'ej2-calendars/styles/calendar/bds-definition' as *;
+@use 'ej2-calendars/styles/datepicker/bds-definition' as *;
+@use 'ej2-calendars/styles/datetimepicker/bds-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bds-definition' as *;
+@use 'ej2-dropdowns/styles/multi-select/bds-definition' as *;
+@use 'ej2-buttons/styles/button/bds-definition' as *;
+@use 'ej2-buttons/styles/check-box/bds-definition' as *;
+@use '../recurrence-editor/bds-definition' as *;
+@use 'ej2-navigations/styles/sidebar/bds-definition' as *;
+@use 'bds-definition' as *;
+@use 'icons/bds' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/schedule/bootstrap-dark.css

@@ -2221,13 +2221,18 @@
   display: -ms-flexbox;
   display: flex;
 }
-.e-schedule .e-month-agenda-view .e-subject {
+.e-schedule .e-month-agenda-view .e-subject,
+.e-schedule .e-month-agenda-view .e-inline-subject {
   color: #f0f0f0;
   font-size: 14px;
   line-height: 26px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.e-schedule .e-month-agenda-view .e-inline-subject {
+  font-weight: normal;
+  padding-top: 0;
+}
 .e-schedule .e-month-agenda-view .e-recurrence-icon,
 .e-schedule .e-month-agenda-view .e-recurrence-edit-icon {
   color: #8d8d8d;
@@ -2334,6 +2339,7 @@
 }
 .e-schedule .e-agenda-view .e-day-date-header .e-m-date {
   font-size: 18px;
+  line-height: unset;
 }
 .e-schedule .e-agenda-view .e-day-date-header .e-m-day {
   font-size: 13px;
@@ -3233,9 +3239,6 @@
   -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
           box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
   color: #fff;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
   height: 38px;
   width: 100px;
   z-index: 9;
@@ -3285,10 +3288,7 @@
   display: none;
 }
 .e-appointment.e-schedule-event-clone.e-month-event .e-appointment-details .e-subject {
-  padding: 3px 2px;
-}
-.e-appointment.e-schedule-event-clone.e-month-event .e-appointment-details .e-time {
-  display: none;
+  padding: 0;
 }
 
 .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.e-schedule-event-clone .e-appointment-details .e-subject {

package/styles/schedule/bootstrap-dark.scss

@@ -1,17 +1,18 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'ej2-navigations/styles/toolbar/bootstrap-dark-definition.scss';
-@import 'ej2-navigations/styles/treeview/bootstrap-dark-definition.scss';
-@import 'ej2-inputs/styles/input/bootstrap-dark-definition.scss';
-@import 'ej2-inputs/styles/numerictextbox/bootstrap-dark-definition.scss';
-@import 'ej2-calendars/styles/calendar/bootstrap-dark-definition.scss';
-@import 'ej2-calendars/styles/datepicker/bootstrap-dark-definition.scss';
-@import 'ej2-calendars/styles/datetimepicker/bootstrap-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bootstrap-dark-definition.scss';
-@import 'ej2-dropdowns/styles/multi-select/bootstrap-dark-definition.scss';
-@import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap-dark-definition.scss';
-@import '../recurrence-editor/bootstrap-dark-definition.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'icons/bootstrap-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@use 'ej2-navigations/styles/toolbar/bootstrap-dark-definition' as *;
+@use 'ej2-navigations/styles/treeview/bootstrap-dark-definition' as *;
+@use 'ej2-inputs/styles/input/bootstrap-dark-definition' as *;
+@use 'ej2-inputs/styles/numerictextbox/bootstrap-dark-definition' as *;
+@use 'ej2-calendars/styles/calendar/bootstrap-dark-definition' as *;
+@use 'ej2-calendars/styles/datepicker/bootstrap-dark-definition' as *;
+@use 'ej2-calendars/styles/datetimepicker/bootstrap-dark-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bootstrap-dark-definition' as *;
+@use 'ej2-dropdowns/styles/multi-select/bootstrap-dark-definition' as *;
+@use 'ej2-buttons/styles/button/bootstrap-dark-definition' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap-dark-definition' as *;
+@use '../recurrence-editor/bootstrap-dark-definition' as *;
+@use 'ej2-navigations/styles/sidebar/bootstrap-dark-definition' as *;
+@use 'bootstrap-dark-definition' as *;
+@use 'icons/bootstrap-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;