From 60c6108ed3c69fb28f2c8d0ccf3d38bdd0ba80e6 Mon Sep 17 00:00:00 2001
From: Ivo Valkov <ivos.valkov@gmail.com>
Date: Tue, 29 Mar 2022 11:05:48 +0300
Subject: [PATCH] feat(scheduler): add ongoing event styles

https://github.com/telerik/kendo-themes/issues/3374
---
 packages/bootstrap/scss/scheduler/_variables.scss |  2 ++
 packages/classic/scss/scheduler/_variables.scss   |  2 ++
 packages/default/scss/scheduler/_theme.scss       |  3 +++
 packages/default/scss/scheduler/_variables.scss   |  2 ++
 packages/material/scss/scheduler/_variables.scss  |  2 ++
 tests/visual/src/misc/scheduler.html              | 10 +++++-----
 6 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/bootstrap/scss/scheduler/_variables.scss b/packages/bootstrap/scss/scheduler/_variables.scss
index 2aaae4ddb15..7111e24622a 100644
--- a/packages/bootstrap/scss/scheduler/_variables.scss
+++ b/packages/bootstrap/scss/scheduler/_variables.scss
@@ -40,6 +40,8 @@ $scheduler-event-selected-border: null !default;
 $scheduler-event-selected-gradient: null !default;
 $scheduler-event-selected-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5) !default;
 
+$scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
+
 $scheduler-cell-padding-x: map-get( $spacing, 3 ) !default;
 $scheduler-cell-padding-y: map-get( $spacing, 3 ) !default;
 $scheduler-cell-height: $line-height-em !default;
diff --git a/packages/classic/scss/scheduler/_variables.scss b/packages/classic/scss/scheduler/_variables.scss
index 64129a40e80..516edbcaa3a 100644
--- a/packages/classic/scss/scheduler/_variables.scss
+++ b/packages/classic/scss/scheduler/_variables.scss
@@ -40,6 +40,8 @@ $scheduler-event-selected-border: null !default;
 $scheduler-event-selected-gradient: null !default;
 $scheduler-event-selected-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
 
+$scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
+
 $scheduler-cell-padding-x: map-get( $spacing, 2 ) !default;
 $scheduler-cell-padding-y: map-get( $spacing, 2 ) !default;
 $scheduler-cell-height: $line-height-em !default;
diff --git a/packages/default/scss/scheduler/_theme.scss b/packages/default/scss/scheduler/_theme.scss
index 3f704202c00..b74a88678b9 100644
--- a/packages/default/scss/scheduler/_theme.scss
+++ b/packages/default/scss/scheduler/_theme.scss
@@ -128,6 +128,9 @@
     .k-event-inverse {
         color: contrast-wcag( $scheduler-event-text );
     }
+    .k-event-ongoing {
+        @include box-shadow( $scheduler-event-ongoing-shadow );
+    }
 
 
     // Drag hint
diff --git a/packages/default/scss/scheduler/_variables.scss b/packages/default/scss/scheduler/_variables.scss
index 0c927b53d35..0cc45d69fd5 100644
--- a/packages/default/scss/scheduler/_variables.scss
+++ b/packages/default/scss/scheduler/_variables.scss
@@ -40,6 +40,8 @@ $scheduler-event-selected-border: null !default;
 $scheduler-event-selected-gradient: null !default;
 $scheduler-event-selected-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
 
+$scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
+
 $scheduler-cell-padding-x: map-get( $spacing, 2 ) !default;
 $scheduler-cell-padding-y: map-get( $spacing, 2 ) !default;
 $scheduler-cell-height: $line-height-em !default;
diff --git a/packages/material/scss/scheduler/_variables.scss b/packages/material/scss/scheduler/_variables.scss
index 8f5da900262..a379c4033c3 100644
--- a/packages/material/scss/scheduler/_variables.scss
+++ b/packages/material/scss/scheduler/_variables.scss
@@ -40,6 +40,8 @@ $scheduler-event-selected-border: null !default;
 $scheduler-event-selected-gradient: null !default;
 $scheduler-event-selected-shadow: $box-shadow-depth-3 !default;
 
+$scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
+
 $scheduler-cell-padding-x: map-get( $spacing, 2 ) !default;
 $scheduler-cell-padding-y: map-get( $spacing, 2 ) !default;
 $scheduler-cell-height: $line-height * 1rem !default;
diff --git a/tests/visual/src/misc/scheduler.html b/tests/visual/src/misc/scheduler.html
index af94c60050f..41829f5bbec 100644
--- a/tests/visual/src/misc/scheduler.html
+++ b/tests/visual/src/misc/scheduler.html
@@ -475,7 +475,7 @@
                                     <span class="k-resize-handle k-resize-n"></span>
                                     <span class="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style="top: 111px; height: 34px; width: 166px; left: 2px;" class="k-event">
+                                <div style="top: 111px; height: 34px; width: 166px; left: 2px;" class="k-event k-event-ongoing">
                                     <span class="k-event-actions"></span>
                                     <div>
                                         <div class="k-event-template k-event-time">8:30 AM - 9:00 AM</div>
@@ -487,7 +487,7 @@
                                     <span class="k-resize-handle k-resize-n"></span>
                                     <span class="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style="top: 36px; height: 108px; width: 166px; left: 348px;" class="k-event k-state-hover">
+                                <div style="top: 36px; height: 108px; width: 166px; left: 348px;" class="k-event k-state-hover k-event-ongoing">
                                     <span class="k-event-actions">
                                         <i is="Icon" name="reload"></i>
                                     </span>
@@ -501,7 +501,7 @@
                                     <span class="k-resize-handle k-resize-n"></span>
                                     <span class="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style="top: 110px; height: 71px; width: 166px; left: 520px;" class="k-event k-state-selected">
+                                <div style="top: 110px; height: 71px; width: 166px; left: 520px;" class="k-event k-state-selected k-event-ongoing">
                                     <span class="k-event-actions"></span>
                                     <div>
                                         <div class="k-event-template k-event-time">8:30 AM - 9:30 AM</div>
@@ -538,7 +538,7 @@
                                     <span class="k-resize-handle k-resize-n"></span>
                                     <span class="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style="background-color: rgb(248, 163, 152); border-color: rgb(248, 163, 152); left: 175px; top: 100px; height: 71px; width: 166px;" class="k-event k-event-inverse ">
+                                <div style="background-color: rgb(248, 163, 152); border-color: rgb(248, 163, 152); left: 175px; top: 100px; height: 71px; width: 166px;" class="k-event k-event-inverse k-event-ongoing">
                                         <span class="k-event-actions">
                                         </span>
                                         <div>
@@ -553,7 +553,7 @@
                                         <span class="k-resize-handle k-resize-n"></span>
                                         <span class="k-resize-handle k-resize-s"></span>
                                 </div>
-                                <div style="top: 110px; height: 71px; width: 166px; left: 708px;" class="k-event">
+                                <div style="top: 110px; height: 71px; width: 166px; left: 708px;" class="k-event k-event-ongoing">
                                     <span class="k-event-actions"></span>
                                     <div>
                                         <div class="k-event-template k-event-time">8:30 AM - 9:30 AM</div>