@progress/kendo-angular-scheduler 4.0.0-next.202204011528 → 4.0.0

package/fesm2015/kendo-angular-scheduler.js

@@ -43,7 +43,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1648826436,
+    publishDate: 1650441034,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -2066,7 +2066,11 @@ function eventResources(event, { taskResources, hasGroups, spans, allResources =
         for (let valueIdx = 0; valueIdx < values.length; valueIdx++) {
             const dataIdx = getDataIdx(values[valueIdx], resource);
             if (dataIdx < 0) {
-                return [{ leafIdx: hasGroups ? -1 : 0, resources: [] }];
+                if (hasGroups) {
+                    // No match for this resource, but the event might still match other resources.
+                    continue;
+                }
+                return [{ leafIdx: 0, resources: [] }];
             }
             const item = resource.data[dataIdx];
             // has groups - need all copies of the multiple resource
@@ -2440,7 +2444,7 @@ ToolbarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </kendo-calendar-messages>
             </kendo-calendar>
         </ng-template>
-    `, isInline: true, components: [{ type: i4.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i4.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], pipes: { "async": i10.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i4.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], pipes: { "async": i10.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarNavigationComponent, decorators: [{
             type: Component,
             args: [{
@@ -2602,7 +2606,7 @@ ToolbarViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 </span>
             </button>
         </span>
-    `, isInline: true, directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarViewSelectorComponent, decorators: [{
             type: Component,
             args: [{
@@ -3484,7 +3488,7 @@ RecurrenceFrequencyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersio
                 >{{ freq.text }}</button>
             </kendo-buttongroup>
         </div>
-    `, isInline: true, components: [{ type: i3.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, components: [{ type: i3.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceFrequencyEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -3708,7 +3712,7 @@ RecurrenceWeekdayRuleEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVers
                 >{{ capitalize(day.text) }}</button>
             </kendo-buttongroup>
         </div>
-    `, isInline: true, components: [{ type: i3.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, components: [{ type: i3.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceWeekdayRuleEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -5357,7 +5361,7 @@ EditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 <button kendoButton themeColor="primary" (click)="onSave($event)" [disabled]="!formGroup.valid">{{ textFor('save') }}</button>
             </kendo-dialog-actions>
         </kendo-dialog>
-    `, isInline: true, components: [{ type: i1.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SchedulerDateTimePickerComponent, selector: "kendo-scheduler-datetime-picker", inputs: ["isAllDay"], outputs: ["valueChange"] }, { type: TimeZoneEditorComponent, selector: "kendo-timezone-editor", inputs: ["width"], outputs: ["valueChange"] }, { type: RecurrenceEditorComponent, selector: "kendo-recurrence-editor", inputs: ["start", "timezone", "weekStart", "repeatEveryOptions", "endAfterOptions", "repeatOnOptions", "endOnOptions"], outputs: ["valueChange"], exportAs: ["kendoRecurrenceEditor"] }, { type: MultipleResourceEditorComponent, selector: "kendo-multiple-resource-editor" }, { type: SingleResourceEditorComponent, selector: "kendo-single-resource-editor" }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i11.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i11.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i12.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i11.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i11.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i11.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i12.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i11.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i12.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    `, isInline: true, components: [{ type: i1.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SchedulerDateTimePickerComponent, selector: "kendo-scheduler-datetime-picker", inputs: ["isAllDay"], outputs: ["valueChange"] }, { type: TimeZoneEditorComponent, selector: "kendo-timezone-editor", inputs: ["width"], outputs: ["valueChange"] }, { type: RecurrenceEditorComponent, selector: "kendo-recurrence-editor", inputs: ["start", "timezone", "weekStart", "repeatEveryOptions", "endAfterOptions", "repeatOnOptions", "endOnOptions"], outputs: ["valueChange"], exportAs: ["kendoRecurrenceEditor"] }, { type: MultipleResourceEditorComponent, selector: "kendo-multiple-resource-editor" }, { type: SingleResourceEditorComponent, selector: "kendo-single-resource-editor" }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i11.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i11.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i12.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i11.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i11.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i11.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i12.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i11.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i12.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -5803,6 +5807,10 @@ class SchedulerComponent {
          * Specifies the Scheduler current time marker settings.
          */
         this.currentTimeMarker = true;
+        /**
+         * Specifies the settings for the ongoing events highlight of the Scheduler.
+         */
+        this.highlightOngoingEvents = true;
         /**
          * A callback that executes for each slot of the Scheduler view.
          * If it returns `true`, the `k-state-selected` CSS class will be added to the cell, making it visibly selected.
@@ -6374,6 +6382,7 @@ class SchedulerComponent {
             selectable: this.selectable,
             timezone: this.timezone,
             currentTimeMarker: this.currentTimeMarker,
+            highlightOngoingEvents: this.highlightOngoingEvents,
             slotClass: this.slotClass,
             slotFill: this.slotFill,
             columnWidth: this.columnWidth,
@@ -6505,7 +6514,7 @@ class SchedulerComponent {
     }
 }
 SchedulerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SchedulerComponent, deps: [{ token: i0.ElementRef }, { token: ViewContextService }, { token: ViewStateService }, { token: EditService }, { token: DialogsService }, { token: i1$4.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: PDFService }, { token: i1$1.LocalizationService }, { token: DomEventsService }, { token: i0.Renderer2 }, { token: FocusService }], target: i0.ɵɵFactoryTarget.Component });
-SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SchedulerComponent, selector: "kendo-scheduler", inputs: { selectedViewIndex: "selectedViewIndex", editable: "editable", selectable: "selectable", min: "min", max: "max", eventHeight: "eventHeight", columnWidth: "columnWidth", showWorkHours: "showWorkHours", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", weekStart: "weekStart", slotDuration: "slotDuration", slotDivisions: "slotDivisions", slotFill: "slotFill", scrollTime: "scrollTime", group: "group", resources: "resources", loading: "loading", timezone: "timezone", events: "events", selectedDate: "selectedDate", modelFields: "modelFields", currentTimeMarker: "currentTimeMarker", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", isSlotSelected: "isSlotSelected" }, outputs: { selectedViewIndexChange: "selectedViewIndexChange", navigate: "navigate", dateChange: "dateChange", slotClick: "slotClick", slotDblClick: "slotDblClick", create: "create", eventClick: "eventClick", eventDblClick: "eventDblClick", eventKeydown: "eventKeydown", cancel: "cancel", save: "save", remove: "remove", resizeStart: "resizeStart", resize: "resize", resizeEnd: "resizeEnd", dragStart: "dragStart", drag: "drag", dragEnd: "dragEnd", slotDragStart: "slotDragStart", slotDrag: "slotDrag", slotDragEnd: "slotDragEnd", pdfExport: "pdfExport" }, host: { properties: { "class.k-widget": "this.hostClasses", "class.k-scheduler": "this.hostClasses", "class.k-floatwrap": "this.hostClasses", "class.k-rtl": "this.rtl", "attr.dir": "this.dir" } }, providers: [
+SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SchedulerComponent, selector: "kendo-scheduler", inputs: { selectedViewIndex: "selectedViewIndex", editable: "editable", selectable: "selectable", min: "min", max: "max", eventHeight: "eventHeight", columnWidth: "columnWidth", showWorkHours: "showWorkHours", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", weekStart: "weekStart", slotDuration: "slotDuration", slotDivisions: "slotDivisions", slotFill: "slotFill", scrollTime: "scrollTime", group: "group", resources: "resources", loading: "loading", timezone: "timezone", events: "events", selectedDate: "selectedDate", modelFields: "modelFields", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", isSlotSelected: "isSlotSelected" }, outputs: { selectedViewIndexChange: "selectedViewIndexChange", navigate: "navigate", dateChange: "dateChange", slotClick: "slotClick", slotDblClick: "slotDblClick", create: "create", eventClick: "eventClick", eventDblClick: "eventDblClick", eventKeydown: "eventKeydown", cancel: "cancel", save: "save", remove: "remove", resizeStart: "resizeStart", resize: "resize", resizeEnd: "resizeEnd", dragStart: "dragStart", drag: "drag", dragEnd: "dragEnd", slotDragStart: "slotDragStart", slotDrag: "slotDrag", slotDragEnd: "slotDragEnd", pdfExport: "pdfExport" }, host: { properties: { "class.k-widget": "this.hostClasses", "class.k-scheduler": "this.hostClasses", "class.k-floatwrap": "this.hostClasses", "class.k-rtl": "this.rtl", "attr.dir": "this.dir" } }, providers: [
         EditService,
         DialogsService,
         DomEventsService,
@@ -7146,6 +7155,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], currentTimeMarker: [{
                 type: Input
+            }], highlightOngoingEvents: [{
+                type: Input
             }], slotClass: [{
                 type: Input
             }], eventClass: [{
@@ -7506,6 +7517,12 @@ class ConfigurationViewBase extends SchedulerView {
     get viewEventStyles() {
         return isPresent(this.eventStyles) ? this.eventStyles : this.schedulerOptions.eventStyles;
     }
+    /**
+     * @hidden
+     */
+    get viewHighlightOngoingEvents() {
+        return isPresent(this.highlightOngoingEvents) ? this.highlightOngoingEvents : this.schedulerOptions.highlightOngoingEvents;
+    }
     /**
      * @hidden
      */
@@ -7523,7 +7540,7 @@ class ConfigurationViewBase extends SchedulerView {
     }
 }
 ConfigurationViewBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationViewBase, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }], target: i0.ɵɵFactoryTarget.Directive });
-ConfigurationViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ConfigurationViewBase, inputs: { slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles" }, queries: [{ propertyName: "eventTemplate", first: true, predicate: EventTemplateDirective, descendants: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: GroupHeaderTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+ConfigurationViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ConfigurationViewBase, inputs: { slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", highlightOngoingEvents: "highlightOngoingEvents" }, queries: [{ propertyName: "eventTemplate", first: true, predicate: EventTemplateDirective, descendants: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: GroupHeaderTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationViewBase, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }]; }, propDecorators: { slotClass: [{
@@ -7532,6 +7549,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], eventStyles: [{
                 type: Input
+            }], highlightOngoingEvents: [{
+                type: Input
             }], template: [{
                 type: ViewChild,
                 args: ['content', { static: true }]
@@ -8932,6 +8951,12 @@ const MS_PER_HOUR = 60 * MS_PER_MINUTE;
 const BORDER_WIDTH = 1;
 /** @hidden */
 const DEFAULT_EVENT_HEIGHT = 25;
+/** @hidden */
+const ONGOING_EVENT_CSS_CLASS = 'k-event-ongoing';
+/** @hidden */
+const DAYS_IN_WEEK_COUNT = 7;
+/** @hidden */
+const WEEKS_COUNT = 6;
 
 //better try to measure this one
 const MORE_BUTTON_HEIGHT = 13;
@@ -9351,6 +9376,9 @@ class BaseView {
         this.pdfService = pdfService;
         this.localization = localization;
         this.cdr = cdr;
+        /**
+         * The non-all-day events.
+         */
         this.items = new BehaviorSubject(null);
         this.horizontalResources = [];
         this.verticalResources = [];
@@ -10646,8 +10674,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
-const DAYS_IN_WEEK_COUNT = 7;
-const WEEKS_COUNT = 6;
 /**
  * @hidden
  */
@@ -10656,6 +10682,7 @@ class MonthViewRendererComponent extends BaseView {
         super(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, changeDetector);
         this.resizeHintFormat = { skeleton: 'Md' };
         this.weeks = [];
+        this.updateOngoingEvents = this.updateOngoingEvents.bind(this);
     }
     get monthDaySlotTemplateRef() {
         return this.monthDaySlotTemplate || (this.schedulerMonthDaySlotTemplate || {}).templateRef;
@@ -10666,6 +10693,14 @@ class MonthViewRendererComponent extends BaseView {
         }
         super.ngOnChanges(changes);
     }
+    ngAfterViewInit() {
+        this.updateOngoingEvents();
+        super.ngAfterViewInit();
+    }
+    ngOnDestroy() {
+        clearTimeout(this.ongoingEventsTimeout);
+        super.ngOnDestroy();
+    }
     horizontalColspan(resourceIndex) {
         const resources = this.horizontalResources;
         let result = DAYS_IN_WEEK_COUNT;
@@ -10793,6 +10828,28 @@ class MonthViewRendererComponent extends BaseView {
     slotByPosition(x, y) {
         return this.slotService.slotByPosition(x, y);
     }
+    updateOngoingEvents() {
+        const disabled = !this.highlightOngoingEvents || this.highlightOngoingEvents.enabled === false;
+        if (!isDocumentAvailable() || disabled) {
+            return;
+        }
+        clearTimeout(this.ongoingEventsTimeout);
+        this.zone.runOutsideAngular(() => {
+            this.ongoingEventsTimeout = setTimeout(this.updateOngoingEvents, this.highlightOngoingEvents.updateInterval || MS_PER_MINUTE);
+        });
+        this.toggleOngoingClass();
+    }
+    currentTime() {
+        return new Date();
+    }
+    toggleOngoingClass() {
+        const now = this.currentTime();
+        const cssClass = isPresent(this.highlightOngoingEvents.cssClass) ? this.highlightOngoingEvents.cssClass : ONGOING_EVENT_CSS_CLASS;
+        this.eventElements.forEach((event) => {
+            const isOngoing = dateInRange(now, event.item.start, event.item.end);
+            this.renderer[isOngoing ? 'addClass' : 'removeClass'](event.nativeElement, cssClass);
+        });
+    }
     createDaySlots({ start }) {
         const weeks = [];
         let date = start;
@@ -10808,9 +10865,9 @@ class MonthViewRendererComponent extends BaseView {
     }
 }
 MonthViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewRendererComponent, deps: [{ token: ViewContextService }, { token: ViewStateService }, { token: i1$4.IntlService }, { token: MonthSlotService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: PDFService }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MonthViewRendererComponent, selector: "month-view", inputs: { monthDaySlotTemplate: "monthDaySlotTemplate" }, providers: [
+MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MonthViewRendererComponent, selector: "month-view", inputs: { monthDaySlotTemplate: "monthDaySlotTemplate", highlightOngoingEvents: "highlightOngoingEvents" }, providers: [
         MonthSlotService
-    ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "eventElements", predicate: MonthViewItemComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <div class="k-scheduler-layout k-scheduler-monthview k-scheduler-flex-layout">
             <div class="k-scheduler-pane">
                 <div class="k-scheduler-times" #timesHeader *ngIf="verticalResources.length">
@@ -11057,6 +11114,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: ViewContextService }, { type: ViewStateService }, { type: i1$4.IntlService }, { type: MonthSlotService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PDFService }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { monthDaySlotTemplate: [{
                 type: Input
+            }], highlightOngoingEvents: [{
+                type: Input
+            }], eventElements: [{
+                type: ViewChildren,
+                args: [MonthViewItemComponent]
             }] } });
 
 /**
@@ -11110,10 +11172,11 @@ MonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [monthDaySlotTemplate]="monthDaySlotTemplate?.templateRef"
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [weekStart]="viewWeekStart">
             </month-view>
         </ng-template>
-    `, isInline: true, components: [{ type: MonthViewRendererComponent, selector: "month-view", inputs: ["monthDaySlotTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: MonthViewRendererComponent, selector: "month-view", inputs: ["monthDaySlotTemplate", "highlightOngoingEvents"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -11135,6 +11198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [monthDaySlotTemplate]="monthDaySlotTemplate?.templateRef"
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [weekStart]="viewWeekStart">
             </month-view>
         </ng-template>
@@ -11175,7 +11239,7 @@ ViewFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             <span class="k-button-icon k-icon" [ngClass]="item.iconClass"></span>
             <span class="k-button-text">{{ item.text }}</span>
         </button>
-    `, isInline: true, directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewFooterComponent, decorators: [{
             type: Component,
             args: [{
@@ -11323,6 +11387,7 @@ const WORK_WEEK_END = 'workWeekEnd';
 const SLOT_DURATION = 'slotDuration';
 const SLOT_DIVISIONS = 'slotDivisions';
 const CURRENT_TIME_MARKER = 'currentTimeMarker';
+const HIGHLIGHT_ONGOING_EVENTS = 'highlightOngoingEvents';
 /**
  * @hidden
  */
@@ -11396,6 +11461,12 @@ class DayTimeViewBase extends ConfigurationViewBase {
     get viewCurrentTimeMarker() {
         return this.optionValue(CURRENT_TIME_MARKER);
     }
+    /**
+     * @hidden
+     */
+    get viewHighlightOngoingEvents() {
+        return this.optionValue(HIGHLIGHT_ONGOING_EVENTS);
+    }
     /**
      * @hidden
      */
@@ -11407,7 +11478,7 @@ class DayTimeViewBase extends ConfigurationViewBase {
     }
 }
 DayTimeViewBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewBase, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }], target: i0.ɵɵFactoryTarget.Directive });
-DayTimeViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DayTimeViewBase, inputs: { showWorkHours: "showWorkHours", eventHeight: "eventHeight", startTime: "startTime", scrollTime: "scrollTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", slotDuration: "slotDuration", slotDivisions: "slotDivisions", currentTimeMarker: "currentTimeMarker" }, queries: [{ propertyName: "timeSlotTemplate", first: true, predicate: TimeSlotTemplateDirective, descendants: true }, { propertyName: "dateHeaderTemplate", first: true, predicate: DateHeaderTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
+DayTimeViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DayTimeViewBase, inputs: { showWorkHours: "showWorkHours", eventHeight: "eventHeight", startTime: "startTime", scrollTime: "scrollTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", slotDuration: "slotDuration", slotDivisions: "slotDivisions", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents" }, queries: [{ propertyName: "timeSlotTemplate", first: true, predicate: TimeSlotTemplateDirective, descendants: true }, { propertyName: "dateHeaderTemplate", first: true, predicate: DateHeaderTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewBase, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }]; }, propDecorators: { timeSlotTemplate: [{
@@ -11440,6 +11511,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], currentTimeMarker: [{
                 type: Input
+            }], highlightOngoingEvents: [{
+                type: Input
             }] } });
 
 const SLOT_FILL = 'slotFill';
@@ -12140,6 +12213,113 @@ function createTimeSlots(intlService, { showWorkHours, startTime, endTime, workD
     return slots;
 }
 
+/**
+ * @hidden
+ */
+class DayTimeViewItemComponent extends BaseViewItem {
+    constructor(intlService, slotService, localization, focusService, element, renderer, localeId) {
+        super(slotService, localization, focusService, element, renderer, localeId);
+        this.intlService = intlService;
+        this.localeId = localeId;
+    }
+    get eventTime() {
+        return this.intlService.format('{0:t}–{1:t}', toLocalDate(this.item.startTime), toLocalDate(this.item.endTime));
+    }
+}
+DayTimeViewItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewItemComponent, deps: [{ token: i1$4.IntlService }, { token: DayTimeSlotService }, { token: i1$1.LocalizationService }, { token: FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
+DayTimeViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: { vertical: "vertical", isAllDay: "isAllDay" }, usesInheritance: true, ngImport: i0, template: `
+        <span class="k-event-actions">
+            <span class="k-icon k-i-arrow-60-left" *ngIf="item.tail && !vertical"></span>
+            <span class="k-icon k-i-reload" *ngIf="isRecurrence"></span>
+            <span class="k-icon k-i-non-recurrence" *ngIf="isRecurrenceException"></span>
+        </span>
+        <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
+            [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: resources }">
+        </ng-container>
+        <div *ngIf="!eventTemplate" [attr.title]="eventTitle">
+            <div class="k-event-template k-event-time" *ngIf="!isAllDay">{{ eventTime }}</div>
+            <div class="k-event-template" aria-hidden="true">{{ item.event.title }}</div>
+        </div>
+
+        <span class="k-event-actions">
+            <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
+                <span class="k-icon k-i-close"></span>
+            </span>
+            <span class="k-icon k-i-arrow-60-right" *ngIf="item.head && !vertical"></span>
+        </span>
+
+        <span class="k-event-top-actions" *ngIf="item.tail && vertical">
+            <span class="k-icon k-i-arrow-60-up"></span>
+        </span>
+
+        <span class="k-event-bottom-actions" *ngIf="item.head && vertical">
+            <span class="k-icon k-i-arrow-60-down"></span>
+        </span>
+
+        <ng-container *ngIf="resizable && vertical">
+            <span class="k-resize-handle k-resize-n" *ngIf="!item.tail"></span>
+            <span class="k-resize-handle k-resize-s" *ngIf="!item.head"></span>
+        </ng-container>
+
+        <ng-container *ngIf="resizable && !vertical">
+            <span class="k-resize-handle k-resize-w"></span>
+            <span class="k-resize-handle k-resize-e"></span>
+        </ng-container>
+    `, isInline: true, directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[dayTimeViewItem]',
+                    template: `
+        <span class="k-event-actions">
+            <span class="k-icon k-i-arrow-60-left" *ngIf="item.tail && !vertical"></span>
+            <span class="k-icon k-i-reload" *ngIf="isRecurrence"></span>
+            <span class="k-icon k-i-non-recurrence" *ngIf="isRecurrenceException"></span>
+        </span>
+        <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
+            [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: resources }">
+        </ng-container>
+        <div *ngIf="!eventTemplate" [attr.title]="eventTitle">
+            <div class="k-event-template k-event-time" *ngIf="!isAllDay">{{ eventTime }}</div>
+            <div class="k-event-template" aria-hidden="true">{{ item.event.title }}</div>
+        </div>
+
+        <span class="k-event-actions">
+            <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
+                <span class="k-icon k-i-close"></span>
+            </span>
+            <span class="k-icon k-i-arrow-60-right" *ngIf="item.head && !vertical"></span>
+        </span>
+
+        <span class="k-event-top-actions" *ngIf="item.tail && vertical">
+            <span class="k-icon k-i-arrow-60-up"></span>
+        </span>
+
+        <span class="k-event-bottom-actions" *ngIf="item.head && vertical">
+            <span class="k-icon k-i-arrow-60-down"></span>
+        </span>
+
+        <ng-container *ngIf="resizable && vertical">
+            <span class="k-resize-handle k-resize-n" *ngIf="!item.tail"></span>
+            <span class="k-resize-handle k-resize-s" *ngIf="!item.head"></span>
+        </ng-container>
+
+        <ng-container *ngIf="resizable && !vertical">
+            <span class="k-resize-handle k-resize-w"></span>
+            <span class="k-resize-handle k-resize-e"></span>
+        </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$4.IntlService }, { type: DayTimeSlotService }, { type: i1$1.LocalizationService }, { type: FocusService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }]; }, propDecorators: { vertical: [{
+                type: Input
+            }], isAllDay: [{
+                type: Input
+            }] } });
+
 const getStartDate = date => getDate(date);
 const getEndDate = (start, numberOfDays) => getDate(addDays(start, numberOfDays || 1));
 const getNextDate = (date, count, numberOfDays) => getDate(addDays(date, numberOfDays * count));
@@ -12170,6 +12350,8 @@ class DayTimeViewComponent extends BaseView {
         this.verticalTime = true;
         this.initialUpdate = true;
         this.updateCurrentTime = this.updateCurrentTime.bind(this);
+        this.toggleOngoingClass = this.toggleOngoingClass.bind(this);
+        this.updateOngoingEvents = this.updateOngoingEvents.bind(this);
     }
     get classNames() {
         return `k-scheduler-${this.name}view`;
@@ -12198,6 +12380,7 @@ class DayTimeViewComponent extends BaseView {
     ngOnDestroy() {
         super.ngOnDestroy();
         clearTimeout(this.currentTimeTimeout);
+        clearTimeout(this.ongoingEventsTimeout);
     }
     verticalItem(leafIndex, resourceIndex) {
         const data = this.verticalResources[resourceIndex].data || [];
@@ -12218,6 +12401,14 @@ class DayTimeViewComponent extends BaseView {
             });
         }
     }
+    toggleOngoingClass() {
+        const now = this.currentTime();
+        const cssClass = isPresent(this.highlightOngoingEvents.cssClass) ? this.highlightOngoingEvents.cssClass : ONGOING_EVENT_CSS_CLASS;
+        this.eventElements.forEach((event) => {
+            const isOngoing = dateInRange(now, event.item.start, event.item.end);
+            this.renderer[isOngoing ? 'addClass' : 'removeClass'](event.nativeElement, cssClass);
+        });
+    }
     scrollToTime(time = this.scrollTime) {
         let date;
         if (typeof time === 'string') {
@@ -12245,6 +12436,7 @@ class DayTimeViewComponent extends BaseView {
     updateView() {
         super.updateView();
         this.updateCurrentTime();
+        this.updateOngoingEvents();
         if (this.initialUpdate) {
             this.scrollToTime();
             this.initialUpdate = false;
@@ -12283,6 +12475,17 @@ class DayTimeViewComponent extends BaseView {
             this.positionCurrentTime();
         }
     }
+    updateOngoingEvents() {
+        const disabled = !this.highlightOngoingEvents || this.highlightOngoingEvents.enabled === false;
+        if (!isDocumentAvailable() || disabled) {
+            return;
+        }
+        clearTimeout(this.ongoingEventsTimeout);
+        this.zone.runOutsideAngular(() => {
+            this.ongoingEventsTimeout = setTimeout(this.updateOngoingEvents, this.highlightOngoingEvents.updateInterval || MS_PER_MINUTE);
+        });
+        this.toggleOngoingClass();
+    }
     positionCurrentTime() {
         if (this.currentTimeElements && this.currentTimeElements.length) {
             const date = this.currentDate.toUTCDate();
@@ -12429,7 +12632,7 @@ class DayTimeViewComponent extends BaseView {
     }
 }
 DayTimeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }, { token: i1$4.IntlService }, { token: DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: PDFService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-DayTimeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DayTimeViewComponent, selector: "kendo-day-time-view", inputs: { timeSlotTemplate: "timeSlotTemplate", dateHeaderTemplate: "dateHeaderTemplate", numberOfDays: "numberOfDays", scrollTime: "scrollTime", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", slotDuration: "slotDuration", slotDivisions: "slotDivisions", showWorkHours: "showWorkHours", getStartDate: "getStartDate", getEndDate: "getEndDate", getNextDate: "getNextDate", currentTimeMarker: "currentTimeMarker" }, viewQueries: [{ propertyName: "currentTimeElements", predicate: ["currentTimeMarker"], descendants: true }, { propertyName: "currentTimeArrows", predicate: ["currentTimeArrow"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+DayTimeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DayTimeViewComponent, selector: "kendo-day-time-view", inputs: { timeSlotTemplate: "timeSlotTemplate", dateHeaderTemplate: "dateHeaderTemplate", numberOfDays: "numberOfDays", scrollTime: "scrollTime", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", slotDuration: "slotDuration", slotDivisions: "slotDivisions", showWorkHours: "showWorkHours", getStartDate: "getStartDate", getEndDate: "getEndDate", getNextDate: "getNextDate", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents" }, viewQueries: [{ propertyName: "currentTimeElements", predicate: ["currentTimeMarker"], descendants: true }, { propertyName: "eventElements", predicate: DayTimeViewItemComponent, descendants: true }, { propertyName: "currentTimeArrows", predicate: ["currentTimeArrow"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kendo-day-time-view', template: '' }]
@@ -12467,121 +12670,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], currentTimeMarker: [{
                 type: Input
+            }], highlightOngoingEvents: [{
+                type: Input
             }], currentTimeElements: [{
                 type: ViewChildren,
                 args: ['currentTimeMarker']
+            }], eventElements: [{
+                type: ViewChildren,
+                args: [DayTimeViewItemComponent]
             }], currentTimeArrows: [{
                 type: ViewChildren,
                 args: ['currentTimeArrow']
             }] } });
 
-/**
- * @hidden
- */
-class DayTimeViewItemComponent extends BaseViewItem {
-    constructor(intlService, slotService, localization, focusService, element, renderer, localeId) {
-        super(slotService, localization, focusService, element, renderer, localeId);
-        this.intlService = intlService;
-        this.localeId = localeId;
-    }
-    get eventTime() {
-        return this.intlService.format('{0:t}–{1:t}', toLocalDate(this.item.startTime), toLocalDate(this.item.endTime));
-    }
-}
-DayTimeViewItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewItemComponent, deps: [{ token: i1$4.IntlService }, { token: DayTimeSlotService }, { token: i1$1.LocalizationService }, { token: FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
-DayTimeViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: { vertical: "vertical", isAllDay: "isAllDay" }, usesInheritance: true, ngImport: i0, template: `
-        <span class="k-event-actions">
-            <span class="k-icon k-i-arrow-60-left" *ngIf="item.tail && !vertical"></span>
-            <span class="k-icon k-i-reload" *ngIf="isRecurrence"></span>
-            <span class="k-icon k-i-non-recurrence" *ngIf="isRecurrenceException"></span>
-        </span>
-        <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
-            [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: resources }">
-        </ng-container>
-        <div *ngIf="!eventTemplate" [attr.title]="eventTitle">
-            <div class="k-event-template k-event-time" *ngIf="!isAllDay">{{ eventTime }}</div>
-            <div class="k-event-template" aria-hidden="true">{{ item.event.title }}</div>
-        </div>
-
-        <span class="k-event-actions">
-            <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
-                <span class="k-icon k-i-close"></span>
-            </span>
-            <span class="k-icon k-i-arrow-60-right" *ngIf="item.head && !vertical"></span>
-        </span>
-
-        <span class="k-event-top-actions" *ngIf="item.tail && vertical">
-            <span class="k-icon k-i-arrow-60-up"></span>
-        </span>
-
-        <span class="k-event-bottom-actions" *ngIf="item.head && vertical">
-            <span class="k-icon k-i-arrow-60-down"></span>
-        </span>
-
-        <ng-container *ngIf="resizable && vertical">
-            <span class="k-resize-handle k-resize-n" *ngIf="!item.tail"></span>
-            <span class="k-resize-handle k-resize-s" *ngIf="!item.head"></span>
-        </ng-container>
-
-        <ng-container *ngIf="resizable && !vertical">
-            <span class="k-resize-handle k-resize-w"></span>
-            <span class="k-resize-handle k-resize-e"></span>
-        </ng-container>
-    `, isInline: true, directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: '[dayTimeViewItem]',
-                    template: `
-        <span class="k-event-actions">
-            <span class="k-icon k-i-arrow-60-left" *ngIf="item.tail && !vertical"></span>
-            <span class="k-icon k-i-reload" *ngIf="isRecurrence"></span>
-            <span class="k-icon k-i-non-recurrence" *ngIf="isRecurrenceException"></span>
-        </span>
-        <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
-            [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: resources }">
-        </ng-container>
-        <div *ngIf="!eventTemplate" [attr.title]="eventTitle">
-            <div class="k-event-template k-event-time" *ngIf="!isAllDay">{{ eventTime }}</div>
-            <div class="k-event-template" aria-hidden="true">{{ item.event.title }}</div>
-        </div>
-
-        <span class="k-event-actions">
-            <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
-                <span class="k-icon k-i-close"></span>
-            </span>
-            <span class="k-icon k-i-arrow-60-right" *ngIf="item.head && !vertical"></span>
-        </span>
-
-        <span class="k-event-top-actions" *ngIf="item.tail && vertical">
-            <span class="k-icon k-i-arrow-60-up"></span>
-        </span>
-
-        <span class="k-event-bottom-actions" *ngIf="item.head && vertical">
-            <span class="k-icon k-i-arrow-60-down"></span>
-        </span>
-
-        <ng-container *ngIf="resizable && vertical">
-            <span class="k-resize-handle k-resize-n" *ngIf="!item.tail"></span>
-            <span class="k-resize-handle k-resize-s" *ngIf="!item.head"></span>
-        </ng-container>
-
-        <ng-container *ngIf="resizable && !vertical">
-            <span class="k-resize-handle k-resize-w"></span>
-            <span class="k-resize-handle k-resize-e"></span>
-        </ng-container>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i1$4.IntlService }, { type: DayTimeSlotService }, { type: i1$1.LocalizationService }, { type: FocusService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }]; }, propDecorators: { vertical: [{
-                type: Input
-            }], isAllDay: [{
-                type: Input
-            }] } });
-
 /**
  * @hidden
  */
@@ -13491,6 +13592,7 @@ DayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                 [name]="name"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -13534,6 +13636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [name]="name"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -13646,6 +13749,7 @@ MultiDayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [numberOfDays]="numberOfDays"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -13691,6 +13795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [numberOfDays]="numberOfDays"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -13782,6 +13887,7 @@ WeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 [getStartDate]="getStartDate"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -13828,6 +13934,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [getStartDate]="getStartDate"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -13931,6 +14038,7 @@ WorkWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [getNextDate]="getNextDate"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -13978,6 +14086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [getNextDate]="getNextDate"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -14642,6 +14751,7 @@ TimelineViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -14681,6 +14791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -14765,6 +14876,7 @@ TimelineWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -14808,6 +14920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -14904,6 +15017,7 @@ TimelineMonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -14947,6 +15061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -16064,6 +16179,12 @@ class BaseEditService {
         this.logRemoveOccurrence(event);
         this.saveChanges();
     }
+    /**
+     * Returns the master recurring event for a specified recurring event.
+     *
+     * @param event - An event from the recurrence series.
+     * @returns the master recurring event for the series.
+     */
     findRecurrenceMaster(event) {
         const id = this.getId(event);
         const recurrenceId = this.getRecurrenceId(event);
@@ -16071,9 +16192,21 @@ class BaseEditService {
         const index = this.itemIndex(headId, this.data);
         return this.data[index];
     }
+    /**
+     * Checks if the event is part of the recurrence series.
+     *
+     * @param event - The event that will be checked.
+     * @returns `true` if the event is an occurrence, an exception, or a master event. Otherwise, returns `false`.
+     */
     isRecurring(event) {
         return isRecurring(event, this.fields);
     }
+    /**
+     * Checks if the event is a recurrence exception.
+     *
+     * @param event - The event that will be checked.
+     * @returns `true` if the event is a unique event which belongs to a recurrence series. Otherwise, returns `false`.
+     */
     isException(event) {
         return isException(event, this.fields);
     }