@syncfusion/ej2-schedule 33.2.4 → 34.1.29

package/styles/schedule/_layout.scss

@@ -1,4 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @mixin schedule-appointments-styles {
   background: $schedule-appointment-bg-color;
   border: $schedule-border-1 solid $schedule-appointment-border-color;
@@ -245,7 +245,7 @@
       }
     }
 
-    #{if(&, '&', '*')}.e-device {
+    &.e-device {
       .e-schedule-toolbar {
         height: $schedule-tbar-bgr-size;
         min-height: $schedule-tbar-bgr-size;
@@ -525,7 +525,7 @@
       font-size: $schedule-font-size-12;
     }
 
-    #{if(&, '&', '*')}.e-device {
+    &.e-device {
       .e-m-date {
         &:hover {
           text-decoration: none;
@@ -564,7 +564,7 @@
       }
     }
 
-    #{if(&, '&', '*')}.e-rtl .e-block-indicator {
+    &.e-rtl .e-block-indicator {
       float: left;
     }
 
@@ -607,13 +607,13 @@
       opacity: .8;
     }
 
-    #{if(&, '&', '*')}.e-event-action .e-appointment:not(.e-schedule-event-clone),
-    #{if(&, '&', '*')}.e-event-action .e-block-appointment {
+    &.e-event-action .e-appointment:not(.e-schedule-event-clone),
+    &.e-event-action .e-block-appointment {
       pointer-events: none;
     }
 
-    #{if(&, '&', '*')}.e-event-action .e-drag-clone,
-    #{if(&, '&', '*')}.e-event-action .e-timeline-view .e-drag-clone {
+    &.e-event-action .e-drag-clone,
+    &.e-event-action .e-timeline-view .e-drag-clone {
       cursor: move;
 
       .e-top-handler,
@@ -622,17 +622,17 @@
       }
     }
 
-    #{if(&, '&', '*')}.e-event-action .e-vertical-view .e-appointment-wrapper .e-resize-clone {
+    &.e-event-action .e-vertical-view .e-appointment-wrapper .e-resize-clone {
       cursor: ns-resize;
     }
 
-    #{if(&, '&', '*')}.e-event-action .e-timeline-view .e-resize-clone,
-    #{if(&, '&', '*')}.e-event-action .e-timeline-month-view .e-resize-clone,
-    #{if(&, '&', '*')}.e-event-action .e-all-day-appointment-wrapper .e-resize-clone {
+    &.e-event-action .e-timeline-view .e-resize-clone,
+    &.e-event-action .e-timeline-month-view .e-resize-clone,
+    &.e-event-action .e-all-day-appointment-wrapper .e-resize-clone {
       cursor: ew-resize;
     }
 
-    #{if(&, '&', '*')}.e-device {
+    &.e-device {
       .e-appointment {
         overflow: hidden;
       }
@@ -1134,6 +1134,45 @@
         cursor: default;
       }
 
+      .e-day-wrapper .e-event-indicator-badge {
+        height: $schedule-event-badge-height;
+        width: $schedule-event-badge-width-p20;
+        position: absolute;
+        border-radius: $schedule-event-badge-border-radius;
+        top: 0;
+        background: $schedule-event-badge-bg;
+        color: $schedule-event-badge-text-color;
+        display: flex;
+        justify-content: center;
+        border: $schedule-border-1 solid $schedule-event-badge-border-color;
+        font-size: $schedule-font-size-12;
+        font-weight: $schedule-font-weight-medium;
+        cursor: pointer;
+        transition: all .2s ease;
+        white-space: normal;
+        word-break: break-all;
+        text-align: center;
+          
+        &.e-hidden {
+          display: none;
+        }
+      }
+
+      .e-event-indicator-badge:focus {
+        box-shadow: $schedule-event-box-shadow-1, $schedule-event-box-shadow-2, $schedule-event-box-shadow-3;
+      }
+
+      .e-event-indicator-badge:hover {
+        box-shadow: $schedule-event-box-shadow-1, $schedule-event-box-shadow-2, $schedule-event-box-shadow-3;
+      }
+
+      /* Responsive styles for event indicator badge */
+      @media screen and (max-width: 400px) {
+        .e-event-indicator-badge {
+          width: $schedule-event-badge-width-p25;
+        }
+      }
+
       .e-day-wrapper .e-appointment {
         background: $schedule-appointment-bg-color;
         border: $schedule-border-1 solid $schedule-appointment-border-color;
@@ -1221,7 +1260,7 @@
       }
     }
 
-    #{if(&, '&', '*')}.e-device {
+    &.e-device {
       .e-vertical-view {
         .e-header-cells {
           .e-header-day {
@@ -1262,7 +1301,7 @@
       }
     }
 
-    #{if(&, '&', '*')}.e-rtl {
+    &.e-rtl {
       text-align: right;
 
       .e-vertical-view {
@@ -1537,7 +1576,7 @@
       }
     }
 
-    #{if(&, '&', '*')}.e-rtl {
+    &.e-rtl {
       .e-month-view {
         .e-date-header {
           margin: $schedule-date-header-margin-rtl;
@@ -1931,7 +1970,7 @@
       }
     }
 
-    #{if(&, '&', '*')}.e-device {
+    &.e-device {
       .e-year-view {
         .e-calendar-wrapper .e-month-calendar.e-calendar {
           max-width: 100%;
@@ -2241,7 +2280,7 @@
       }
     }
 
-    #{if(&, '&', '*')}.e-rtl {
+    &.e-rtl {
       .e-timeline-view,
       .e-timeline-month-view {
         .e-appointment {
@@ -2278,7 +2317,7 @@
       }
     }
 
-    #{if(&, '&', '*')}.e-device {
+    &.e-device {
       .e-month-view,
       .e-timeline-view,
       .e-timeline-month-view {
@@ -2508,7 +2547,7 @@
       }
     }
 
-    #{if(&, '&', '*')}.e-rtl {
+    &.e-rtl {
       .e-month-agenda-view {
         .e-left-indent,
         .e-week-number {
@@ -2539,7 +2578,7 @@
       }
     }
 
-    #{if(&, '&', '*')}.e-device {
+    &.e-device {
       .e-month-agenda-view {
         .e-date-header-wrap {
           font-size: $schedule-date-header-wrap-device-font-size;
@@ -2746,7 +2785,7 @@
       }
     }
 
-    #{if(&, '&', '*')}.e-device {
+    &.e-device {
       .e-agenda-view,
       .e-month-agenda-view {
         .e-m-date {
@@ -2761,7 +2800,7 @@
       }
     }
 
-    #{if(&, '&', '*')}.e-rtl {
+    &.e-rtl {
       .e-agenda-view {
         .e-appointment {
           border-left: $schedule-border-0;

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

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/material-dark' as *;
-@forward 'ej2-base/styles/definition/material-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $schedule-skin: $skin-name !default;
 $schedule-header-bg-color: $grey-dark !default;
 $schedule-header-border-color: $grey-700 !default;
@@ -369,6 +369,14 @@ $schedule-negative-spacing-6: -6px !default;
 $schedule-negative-spacing-8: -8px !default;
 $schedule-negative-spacing-20: -20px !default;
 
+$schedule-event-badge-height: 18px !default;
+$schedule-event-badge-width-p20: 20% !default;
+$schedule-event-badge-width-p25: 25% !default;
+$schedule-event-badge-border-radius: 3px !default;
+$schedule-event-badge-bg: rgba(228, 230, 232, 1) !default;
+$schedule-event-badge-text-color: rgba(31, 29, 29, 1) !default;
+$schedule-event-badge-border-color: rgba(202, 197, 197, 1) !default;
+
 @mixin tbar-btn-animation {
   content: '';
 }

package/styles/schedule/_material-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/material' as *;
-@forward 'ej2-base/styles/definition/material';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $schedule-skin: $skin-name !default;
 $schedule-header-bg-color: $grey-white !default;
 $schedule-header-border-color: rgba($grey-light-font, .12) !default;
@@ -369,6 +369,14 @@ $schedule-negative-spacing-6: -6px !default;
 $schedule-negative-spacing-8: -8px !default;
 $schedule-negative-spacing-20: -20px !default;
 
+$schedule-event-badge-height: 18px !default;
+$schedule-event-badge-width-p20: 20% !default;
+$schedule-event-badge-width-p25: 25% !default;
+$schedule-event-badge-border-radius: 3px !default;
+$schedule-event-badge-bg: rgba(228, 230, 232, 1) !default;
+$schedule-event-badge-text-color: rgba(31, 29, 29, 1) !default;
+$schedule-event-badge-border-color: rgba(202, 197, 197, 1) !default;
+
 @mixin tbar-btn-animation {
   content: '';
 }

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

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/material3-dark' as *;
-@forward 'ej2-base/styles/definition/material3-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $schedule-skin: $skin-name !default;
 $schedule-date-navigation-font-size: $text-lg !default;
 $schedule-header-nrml-font-size: $text-sm !default;
@@ -376,6 +376,14 @@ $schedule-negative-spacing-6: -6px !default;
 $schedule-negative-spacing-8: -8px !default;
 $schedule-negative-spacing-20: -20px !default;
 
+$schedule-event-badge-height: 18px !default;
+$schedule-event-badge-width-p20: 20% !default;
+$schedule-event-badge-width-p25: 25% !default;
+$schedule-event-badge-border-radius: 3px !default;
+$schedule-event-badge-bg: rgba(228, 230, 232, 1) !default;
+$schedule-event-badge-text-color: rgba(31, 29, 29, 1) !default;
+$schedule-event-badge-border-color: rgba(202, 197, 197, 1) !default;
+
 @mixin tbar-btn-animation {
   content: '';
 }

package/styles/schedule/_material3-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/material3' as *;
-@forward 'ej2-base/styles/definition/material3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $schedule-skin: $skin-name !default;
 $schedule-date-navigation-font-size: $text-lg !default;
 $schedule-header-nrml-font-size: $text-sm !default;
@@ -376,6 +376,14 @@ $schedule-negative-spacing-6: -6px !default;
 $schedule-negative-spacing-8: -8px !default;
 $schedule-negative-spacing-20: -20px !default;
 
+$schedule-event-badge-height: 18px !default;
+$schedule-event-badge-width-p20: 20% !default;
+$schedule-event-badge-width-p25: 25% !default;
+$schedule-event-badge-border-radius: 3px !default;
+$schedule-event-badge-bg: rgba(228, 230, 232, 1) !default;
+$schedule-event-badge-text-color: rgba(31, 29, 29, 1) !default;
+$schedule-event-badge-border-color: rgba(202, 197, 197, 1) !default;
+
 @mixin tbar-btn-animation {
   content: '';
 }

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

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/tailwind-dark' as *;
-@forward 'ej2-base/styles/definition/tailwind-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $schedule-skin: $skin-name !default;
 $schedule-header-bg-color: $content-bg-color !default;
 $schedule-header-border-color: $border-light !default;
@@ -372,6 +372,14 @@ $schedule-negative-spacing-6: -6px !default;
 $schedule-negative-spacing-8: -8px !default;
 $schedule-negative-spacing-20: -20px !default;
 
+$schedule-event-badge-height: 18px !default;
+$schedule-event-badge-width-p20: 20% !default;
+$schedule-event-badge-width-p25: 25% !default;
+$schedule-event-badge-border-radius: 3px !default;
+$schedule-event-badge-bg: rgba(228, 230, 232, 1) !default;
+$schedule-event-badge-text-color: rgba(31, 29, 29, 1) !default;
+$schedule-event-badge-border-color: rgba(202, 197, 197, 1) !default;
+
 @mixin tbar-btn-animation {
   content: '';
 }

package/styles/schedule/_tailwind-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/tailwind' as *;
-@forward 'ej2-base/styles/definition/tailwind';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $schedule-skin: $skin-name !default;
 $schedule-header-bg-color: $content-bg-color !default;
 $schedule-header-border-color: $border-light !default;
@@ -372,6 +372,14 @@ $schedule-negative-spacing-6: -6px !default;
 $schedule-negative-spacing-8: -8px !default;
 $schedule-negative-spacing-20: -20px !default;
 
+$schedule-event-badge-height: 18px !default;
+$schedule-event-badge-width-p20: 20% !default;
+$schedule-event-badge-width-p25: 25% !default;
+$schedule-event-badge-border-radius: 3px !default;
+$schedule-event-badge-bg: rgba(228, 230, 232, 1) !default;
+$schedule-event-badge-text-color: rgba(31, 29, 29, 1) !default;
+$schedule-event-badge-border-color: rgba(202, 197, 197, 1) !default;
+
 @mixin tbar-btn-animation {
   content: '';
 }

package/styles/schedule/_tailwind3-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/tailwind3' as *;
-@forward 'ej2-base/styles/definition/tailwind3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $schedule-skin: $skin-name !default;
 $schedule-date-navigation-font-size: $text-lg !default;
 $schedule-header-nrml-font-size: $text-sm !default;
@@ -376,6 +376,14 @@ $schedule-negative-spacing-6: -6px !default;
 $schedule-negative-spacing-8: -8px !default;
 $schedule-negative-spacing-20: -20px !default;
 
+$schedule-event-badge-height: 18px !default;
+$schedule-event-badge-width-p20: 20% !default;
+$schedule-event-badge-width-p25: 25% !default;
+$schedule-event-badge-border-radius: 3px !default;
+$schedule-event-badge-bg: rgba(228, 230, 232, 1) !default;
+$schedule-event-badge-text-color: rgba(31, 29, 29, 1) !default;
+$schedule-event-badge-border-color: rgba(202, 197, 197, 1) !default;
+
 @mixin tbar-btn-animation {
   content: '';
 }

package/styles/schedule/_theme.scss

@@ -1,4 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @mixin schedule-select-cell-focus-styles {
   @if $skin-name == 'fluent2' {
     &:focus {
@@ -471,7 +471,7 @@
       }
     }
 
-    #{if(&, '&', '*')}.e-rtl {
+    &.e-rtl {
       .e-vertical-view {
         .e-date-header-wrap table tbody td:first-child,
         .e-content-wrap table td:first-child {

package/styles/schedule/_variables.scss

@@ -0,0 +1,2 @@
+@forward '@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '_material3-definition';