@progress/kendo-angular-scheduler 3.0.3-dev.202204061046 → 3.1.0-dev.202204121440

package/dist/fesm5/index.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __extends, __decorate, __param, __metadata, __assign, __generator } from 'tslib';
-import { Directive, Optional, TemplateRef, Injectable, NgZone, EventEmitter, Input, Renderer2, ElementRef, ChangeDetectorRef, Inject, isDevMode, HostBinding, Component, Output, ContentChild, ContentChildren, QueryList, ViewChild, ViewContainerRef, ChangeDetectionStrategy, ViewEncapsulation, forwardRef, NgModule, LOCALE_ID, Pipe, ViewChildren, HostListener } from '@angular/core';
+import { Directive, Optional, TemplateRef, Injectable, NgZone, EventEmitter, Input, Renderer2, ElementRef, ChangeDetectorRef, Inject, isDevMode, HostBinding, Component, Output, ContentChild, ContentChildren, QueryList, ViewChild, ViewContainerRef, ChangeDetectionStrategy, ViewEncapsulation, forwardRef, NgModule, LOCALE_ID, ViewChildren, Pipe, HostListener } from '@angular/core';
 import { LocalizationService, L10N_PREFIX, RTL, MessageService, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { hasObservers, isDocumentAvailable, isChanged, anyChanged, ResizeSensorComponent, EventsModule, guid, Keys, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { isEqualDate, getDate, Day, ZonedDate, toLocalDate, MS_PER_DAY, addDays, firstDayOfMonth, addMonths, firstDayInWeek, timezoneNames } from '@progress/kendo-date-math';
@@ -32,7 +32,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1649241774,
+    publishDate: 1649774242,
     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'
 };
@@ -2361,6 +2361,10 @@ var SchedulerComponent = /** @class */ (function () {
          * 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.
@@ -2973,6 +2977,7 @@ var SchedulerComponent = /** @class */ (function () {
             selectable: this.selectable,
             timezone: this.timezone,
             currentTimeMarker: this.currentTimeMarker,
+            highlightOngoingEvents: this.highlightOngoingEvents,
             slotClass: this.slotClass,
             slotFill: this.slotFill,
             columnWidth: this.columnWidth,
@@ -3237,6 +3242,10 @@ var SchedulerComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Object)
     ], SchedulerComponent.prototype, "currentTimeMarker", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], SchedulerComponent.prototype, "highlightOngoingEvents", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Function)
@@ -4448,6 +4457,16 @@ var ConfigurationViewBase = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ConfigurationViewBase.prototype, "viewHighlightOngoingEvents", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return isPresent(this.highlightOngoingEvents) ? this.highlightOngoingEvents : this.schedulerOptions.highlightOngoingEvents;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ConfigurationViewBase.prototype, "viewWeekStart", {
         /**
          * @hidden
@@ -4479,6 +4498,10 @@ var ConfigurationViewBase = /** @class */ (function (_super) {
         Input(),
         __metadata("design:type", Function)
     ], ConfigurationViewBase.prototype, "eventStyles", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], ConfigurationViewBase.prototype, "highlightOngoingEvents", void 0);
     __decorate([
         ViewChild('content', { static: true }),
         __metadata("design:type", TemplateRef)
@@ -5692,6 +5715,12 @@ var MS_PER_MINUTE = 60 * MS_PER_SECOND;
 var BORDER_WIDTH = 1;
 /** @hidden */
 var DEFAULT_EVENT_HEIGHT = 25;
+/** @hidden */
+var ONGOING_EVENT_CSS_CLASS = 'k-event-ongoing';
+/** @hidden */
+var DAYS_IN_WEEK_COUNT = 7;
+/** @hidden */
+var WEEKS_COUNT = 6;
 
 //better try to measure this one
 var MORE_BUTTON_HEIGHT = 13;
@@ -6319,7 +6348,7 @@ var MonthViewComponent = /** @class */ (function (_super) {
                     // tslint:disable-next-line:no-forward-ref
                     useExisting: forwardRef(function () { return MonthViewComponent_1; })
                 }],
-            template: "\n        <ng-template #content>\n            <month-view\n                [eventHeight]=\"viewEventHeight\"\n                [\u0435ventTemplate]=\"eventTemplate?.templateRef\"\n                [slotClass]=\"viewSlotClass\"\n                [eventClass]=\"viewEventClass\"\n                [eventStyles]=\"viewEventStyles\"\n                [groupHeaderTemplate]=\"groupHeaderTemplate?.templateRef\"\n                [monthDaySlotTemplate]=\"monthDaySlotTemplate?.templateRef\"\n                [selectedDateFormat]=\"selectedDateFormat\"\n                [selectedShortDateFormat]=\"selectedShortDateFormat\"\n                [weekStart]=\"viewWeekStart\">\n            </month-view>\n        </ng-template>\n    "
+            template: "\n        <ng-template #content>\n            <month-view\n                [eventHeight]=\"viewEventHeight\"\n                [\u0435ventTemplate]=\"eventTemplate?.templateRef\"\n                [slotClass]=\"viewSlotClass\"\n                [eventClass]=\"viewEventClass\"\n                [eventStyles]=\"viewEventStyles\"\n                [groupHeaderTemplate]=\"groupHeaderTemplate?.templateRef\"\n                [monthDaySlotTemplate]=\"monthDaySlotTemplate?.templateRef\"\n                [selectedDateFormat]=\"selectedDateFormat\"\n                [selectedShortDateFormat]=\"selectedShortDateFormat\"\n                [highlightOngoingEvents]=\"viewHighlightOngoingEvents\"\n                [weekStart]=\"viewWeekStart\">\n            </month-view>\n        </ng-template>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService, ChangeDetectorRef, ViewContextService, ViewStateService])
     ], MonthViewComponent);
@@ -7444,8 +7473,6 @@ var BaseView = /** @class */ (function () {
     return BaseView;
 }());
 
-var DAYS_IN_WEEK_COUNT = 7;
-var WEEKS_COUNT = 6;
 /**
  * @hidden
  */
@@ -7455,6 +7482,7 @@ var MonthViewRendererComponent = /** @class */ (function (_super) {
         var _this = _super.call(this, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, changeDetector) || this;
         _this.resizeHintFormat = { skeleton: 'Md' };
         _this.weeks = [];
+        _this.updateOngoingEvents = _this.updateOngoingEvents.bind(_this);
         return _this;
     }
     Object.defineProperty(MonthViewRendererComponent.prototype, "monthDaySlotTemplateRef", {
@@ -7470,6 +7498,14 @@ var MonthViewRendererComponent = /** @class */ (function (_super) {
         }
         _super.prototype.ngOnChanges.call(this, changes);
     };
+    MonthViewRendererComponent.prototype.ngAfterViewInit = function () {
+        this.updateOngoingEvents();
+        _super.prototype.ngAfterViewInit.call(this);
+    };
+    MonthViewRendererComponent.prototype.ngOnDestroy = function () {
+        clearTimeout(this.ongoingEventsTimeout);
+        _super.prototype.ngOnDestroy.call(this);
+    };
     MonthViewRendererComponent.prototype.horizontalColspan = function (resourceIndex) {
         var resources = this.horizontalResources;
         var result = DAYS_IN_WEEK_COUNT;
@@ -7600,6 +7636,30 @@ var MonthViewRendererComponent = /** @class */ (function (_super) {
     MonthViewRendererComponent.prototype.slotByPosition = function (x, y) {
         return this.slotService.slotByPosition(x, y);
     };
+    MonthViewRendererComponent.prototype.updateOngoingEvents = function () {
+        var _this = this;
+        var disabled = !this.highlightOngoingEvents || this.highlightOngoingEvents.enabled === false;
+        if (!isDocumentAvailable() || disabled) {
+            return;
+        }
+        clearTimeout(this.ongoingEventsTimeout);
+        this.zone.runOutsideAngular(function () {
+            _this.ongoingEventsTimeout = setTimeout(_this.updateOngoingEvents, _this.highlightOngoingEvents.updateInterval || MS_PER_MINUTE);
+        });
+        this.toggleOngoingClass();
+    };
+    MonthViewRendererComponent.prototype.currentTime = function () {
+        return new Date();
+    };
+    MonthViewRendererComponent.prototype.toggleOngoingClass = function () {
+        var _this = this;
+        var now = this.currentTime();
+        var cssClass = isPresent(this.highlightOngoingEvents.cssClass) ? this.highlightOngoingEvents.cssClass : ONGOING_EVENT_CSS_CLASS;
+        this.eventElements.forEach(function (event) {
+            var isOngoing = dateInRange(now, event.item.start, event.item.end);
+            _this.renderer[isOngoing ? 'addClass' : 'removeClass'](event.nativeElement, cssClass);
+        });
+    };
     MonthViewRendererComponent.prototype.createDaySlots = function (_a) {
         var start = _a.start;
         var weeks = [];
@@ -7618,6 +7678,14 @@ var MonthViewRendererComponent = /** @class */ (function (_super) {
         Input(),
         __metadata("design:type", TemplateRef)
     ], MonthViewRendererComponent.prototype, "monthDaySlotTemplate", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], MonthViewRendererComponent.prototype, "highlightOngoingEvents", void 0);
+    __decorate([
+        ViewChildren(MonthViewItemComponent),
+        __metadata("design:type", QueryList)
+    ], MonthViewRendererComponent.prototype, "eventElements", void 0);
     MonthViewRendererComponent = __decorate([
         Component({
             // tslint:disable-next-line:component-selector
@@ -8175,6 +8243,7 @@ var WORK_WEEK_END = 'workWeekEnd';
 var SLOT_DURATION = 'slotDuration';
 var SLOT_DIVISIONS = 'slotDivisions';
 var CURRENT_TIME_MARKER = 'currentTimeMarker';
+var HIGHLIGHT_ONGOING_EVENTS = 'highlightOngoingEvents';
 /**
  * @hidden
  */
@@ -8293,6 +8362,16 @@ var DayTimeViewBase = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(DayTimeViewBase.prototype, "viewHighlightOngoingEvents", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this.optionValue(HIGHLIGHT_ONGOING_EVENTS);
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(DayTimeViewBase.prototype, "viewScrollTime", {
         /**
          * @hidden
@@ -8362,6 +8441,10 @@ var DayTimeViewBase = /** @class */ (function (_super) {
         Input(),
         __metadata("design:type", Object)
     ], DayTimeViewBase.prototype, "currentTimeMarker", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], DayTimeViewBase.prototype, "highlightOngoingEvents", void 0);
     return DayTimeViewBase;
 }(ConfigurationViewBase));
 
@@ -8463,7 +8546,7 @@ var DayViewComponent = /** @class */ (function (_super) {
                     // tslint:disable-next-line:no-forward-ref
                     useExisting: forwardRef(function () { return DayViewComponent_1; })
                 }],
-            template: "\n        <ng-template #content>\n            <multi-day-view\n                [name]=\"name\"\n                [eventHeight]=\"viewEventHeight\"\n                [currentTimeMarker]=\"viewCurrentTimeMarker\"\n                [showWorkHours]=\"shouldShowWorkHours\"\n                [scrollTime]=\"viewScrollTime\"\n                [startTime]=\"viewStartTime\"\n                [endTime]=\"viewEndTime\"\n                [workDayStart]=\"viewWorkDayStart\"\n                [workDayEnd]=\"viewWorkDayEnd\"\n                [workWeekStart]=\"viewWorkWeekStart\"\n                [workWeekEnd]=\"viewWorkWeekEnd\"\n                [slotDuration]=\"viewSlotDuration\"\n                [slotDivisions]=\"viewSlotDivisions\"\n                [slotFill]=\"viewSlotFill\"\n                [slotClass]=\"viewSlotClass\"\n                [eventClass]=\"viewEventClass\"\n                [eventStyles]=\"viewEventStyles\"\n                [allDaySlotTemplate]=\"allDaySlotTemplate?.templateRef\"\n                [allDayEventTemplate]=\"allDayEventTemplate?.templateRef\"\n                [\u0435ventTemplate]=\"eventTemplate?.templateRef\"\n                [groupHeaderTemplate]=\"groupHeaderTemplate?.templateRef\"\n                [timeSlotTemplate]=\"timeSlotTemplate?.templateRef\"\n                [minorTimeHeaderTemplate]=\"minorTimeHeaderTemplate?.templateRef\"\n                [majorTimeHeaderTemplate]=\"majorTimeHeaderTemplate?.templateRef\"\n                [dateHeaderTemplate]=\"dateHeaderTemplate?.templateRef\"\n                [selectedDateFormat]=\"selectedDateFormat\"\n                [selectedShortDateFormat]=\"selectedShortDateFormat\">\n            </multi-day-view>\n            <div viewFooter kendoWorkHoursFooter [showWorkHours]=\"shouldShowWorkHours\" (itemClick)=\"showWorkHours = !shouldShowWorkHours\"></div>\n        </ng-template>\n    "
+            template: "\n        <ng-template #content>\n            <multi-day-view\n                [name]=\"name\"\n                [eventHeight]=\"viewEventHeight\"\n                [currentTimeMarker]=\"viewCurrentTimeMarker\"\n                [highlightOngoingEvents]=\"viewHighlightOngoingEvents\"\n                [showWorkHours]=\"shouldShowWorkHours\"\n                [scrollTime]=\"viewScrollTime\"\n                [startTime]=\"viewStartTime\"\n                [endTime]=\"viewEndTime\"\n                [workDayStart]=\"viewWorkDayStart\"\n                [workDayEnd]=\"viewWorkDayEnd\"\n                [workWeekStart]=\"viewWorkWeekStart\"\n                [workWeekEnd]=\"viewWorkWeekEnd\"\n                [slotDuration]=\"viewSlotDuration\"\n                [slotDivisions]=\"viewSlotDivisions\"\n                [slotFill]=\"viewSlotFill\"\n                [slotClass]=\"viewSlotClass\"\n                [eventClass]=\"viewEventClass\"\n                [eventStyles]=\"viewEventStyles\"\n                [allDaySlotTemplate]=\"allDaySlotTemplate?.templateRef\"\n                [allDayEventTemplate]=\"allDayEventTemplate?.templateRef\"\n                [\u0435ventTemplate]=\"eventTemplate?.templateRef\"\n                [groupHeaderTemplate]=\"groupHeaderTemplate?.templateRef\"\n                [timeSlotTemplate]=\"timeSlotTemplate?.templateRef\"\n                [minorTimeHeaderTemplate]=\"minorTimeHeaderTemplate?.templateRef\"\n                [majorTimeHeaderTemplate]=\"majorTimeHeaderTemplate?.templateRef\"\n                [dateHeaderTemplate]=\"dateHeaderTemplate?.templateRef\"\n                [selectedDateFormat]=\"selectedDateFormat\"\n                [selectedShortDateFormat]=\"selectedShortDateFormat\">\n            </multi-day-view>\n            <div viewFooter kendoWorkHoursFooter [showWorkHours]=\"shouldShowWorkHours\" (itemClick)=\"showWorkHours = !shouldShowWorkHours\"></div>\n        </ng-template>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService, ChangeDetectorRef, ViewContextService, ViewStateService])
     ], DayViewComponent);
@@ -8569,7 +8652,7 @@ var MultiDayViewComponent = /** @class */ (function (_super) {
                     // tslint:disable-next-line:no-forward-ref
                     useExisting: forwardRef(function () { return MultiDayViewComponent_1; })
                 }],
-            template: "\n        <ng-template #content>\n            <multi-day-view\n                viewName=\"day\"\n                [name]=\"name\"\n                [numberOfDays]=\"numberOfDays\"\n                [eventHeight]=\"viewEventHeight\"\n                [currentTimeMarker]=\"viewCurrentTimeMarker\"\n                [showWorkHours]=\"shouldShowWorkHours\"\n                [scrollTime]=\"viewScrollTime\"\n                [startTime]=\"viewStartTime\"\n                [endTime]=\"viewEndTime\"\n                [workDayStart]=\"viewWorkDayStart\"\n                [workDayEnd]=\"viewWorkDayEnd\"\n                [workWeekStart]=\"viewWorkWeekStart\"\n                [workWeekEnd]=\"viewWorkWeekEnd\"\n                [slotDuration]=\"viewSlotDuration\"\n                [slotDivisions]=\"viewSlotDivisions\"\n                [slotFill]=\"viewSlotFill\"\n                [slotClass]=\"viewSlotClass\"\n                [eventClass]=\"viewEventClass\"\n                [eventStyles]=\"viewEventStyles\"\n                [allDaySlotTemplate]=\"allDaySlotTemplate?.templateRef\"\n                [allDayEventTemplate]=\"allDayEventTemplate?.templateRef\"\n                [\u0435ventTemplate]=\"eventTemplate?.templateRef\"\n                [groupHeaderTemplate]=\"groupHeaderTemplate?.templateRef\"\n                [timeSlotTemplate]=\"timeSlotTemplate?.templateRef\"\n                [minorTimeHeaderTemplate]=\"minorTimeHeaderTemplate?.templateRef\"\n                [majorTimeHeaderTemplate]=\"majorTimeHeaderTemplate?.templateRef\"\n                [dateHeaderTemplate]=\"dateHeaderTemplate?.templateRef\"\n                [selectedDateFormat]=\"selectedDateFormat\"\n                [selectedShortDateFormat]=\"selectedShortDateFormat\">\n            </multi-day-view>\n            <div viewFooter kendoWorkHoursFooter [showWorkHours]=\"shouldShowWorkHours\" (itemClick)=\"showWorkHours = !shouldShowWorkHours\"></div>\n        </ng-template>\n    "
+            template: "\n        <ng-template #content>\n            <multi-day-view\n                viewName=\"day\"\n                [name]=\"name\"\n                [numberOfDays]=\"numberOfDays\"\n                [eventHeight]=\"viewEventHeight\"\n                [currentTimeMarker]=\"viewCurrentTimeMarker\"\n                [highlightOngoingEvents]=\"viewHighlightOngoingEvents\"\n                [showWorkHours]=\"shouldShowWorkHours\"\n                [scrollTime]=\"viewScrollTime\"\n                [startTime]=\"viewStartTime\"\n                [endTime]=\"viewEndTime\"\n                [workDayStart]=\"viewWorkDayStart\"\n                [workDayEnd]=\"viewWorkDayEnd\"\n                [workWeekStart]=\"viewWorkWeekStart\"\n                [workWeekEnd]=\"viewWorkWeekEnd\"\n                [slotDuration]=\"viewSlotDuration\"\n                [slotDivisions]=\"viewSlotDivisions\"\n                [slotFill]=\"viewSlotFill\"\n                [slotClass]=\"viewSlotClass\"\n                [eventClass]=\"viewEventClass\"\n                [eventStyles]=\"viewEventStyles\"\n                [allDaySlotTemplate]=\"allDaySlotTemplate?.templateRef\"\n                [allDayEventTemplate]=\"allDayEventTemplate?.templateRef\"\n                [\u0435ventTemplate]=\"eventTemplate?.templateRef\"\n                [groupHeaderTemplate]=\"groupHeaderTemplate?.templateRef\"\n                [timeSlotTemplate]=\"timeSlotTemplate?.templateRef\"\n                [minorTimeHeaderTemplate]=\"minorTimeHeaderTemplate?.templateRef\"\n                [majorTimeHeaderTemplate]=\"majorTimeHeaderTemplate?.templateRef\"\n                [dateHeaderTemplate]=\"dateHeaderTemplate?.templateRef\"\n                [selectedDateFormat]=\"selectedDateFormat\"\n                [selectedShortDateFormat]=\"selectedShortDateFormat\">\n            </multi-day-view>\n            <div viewFooter kendoWorkHoursFooter [showWorkHours]=\"shouldShowWorkHours\" (itemClick)=\"showWorkHours = !shouldShowWorkHours\"></div>\n        </ng-template>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService, ChangeDetectorRef, ViewContextService, ViewStateService])
     ], MultiDayViewComponent);
@@ -8658,7 +8741,7 @@ var WeekViewComponent = /** @class */ (function (_super) {
                     // tslint:disable-next-line:no-forward-ref
                     useExisting: forwardRef(function () { return WeekViewComponent_1; })
                 }],
-            template: "\n        <ng-template #content>\n            <multi-day-view\n                [name]=\"name\"\n                [numberOfDays]=\"7\"\n                [getStartDate]=\"getStartDate\"\n                [eventHeight]=\"viewEventHeight\"\n                [currentTimeMarker]=\"viewCurrentTimeMarker\"\n                [showWorkHours]=\"shouldShowWorkHours\"\n                [scrollTime]=\"viewScrollTime\"\n                [startTime]=\"viewStartTime\"\n                [endTime]=\"viewEndTime\"\n                [workDayStart]=\"viewWorkDayStart\"\n                [workDayEnd]=\"viewWorkDayEnd\"\n                [workWeekStart]=\"viewWorkWeekStart\"\n                [workWeekEnd]=\"viewWorkWeekEnd\"\n                [weekStart]=\"viewWeekStart\"\n                [slotDuration]=\"viewSlotDuration\"\n                [slotDivisions]=\"viewSlotDivisions\"\n                [slotFill]=\"viewSlotFill\"\n                [slotClass]=\"viewSlotClass\"\n                [eventClass]=\"viewEventClass\"\n                [eventStyles]=\"viewEventStyles\"\n                [allDaySlotTemplate]=\"allDaySlotTemplate?.templateRef\"\n                [allDayEventTemplate]=\"allDayEventTemplate?.templateRef\"\n                [\u0435ventTemplate]=\"eventTemplate?.templateRef\"\n                [groupHeaderTemplate]=\"groupHeaderTemplate?.templateRef\"\n                [timeSlotTemplate]=\"timeSlotTemplate?.templateRef\"\n                [minorTimeHeaderTemplate]=\"minorTimeHeaderTemplate?.templateRef\"\n                [majorTimeHeaderTemplate]=\"majorTimeHeaderTemplate?.templateRef\"\n                [dateHeaderTemplate]=\"dateHeaderTemplate?.templateRef\"\n                [selectedDateFormat]=\"selectedDateFormat\"\n                [selectedShortDateFormat]=\"selectedShortDateFormat\">\n            </multi-day-view>\n            <div viewFooter kendoWorkHoursFooter [showWorkHours]=\"shouldShowWorkHours\" (itemClick)=\"showWorkHours = !shouldShowWorkHours\"></div>\n        </ng-template>\n    "
+            template: "\n        <ng-template #content>\n            <multi-day-view\n                [name]=\"name\"\n                [numberOfDays]=\"7\"\n                [getStartDate]=\"getStartDate\"\n                [eventHeight]=\"viewEventHeight\"\n                [currentTimeMarker]=\"viewCurrentTimeMarker\"\n                [highlightOngoingEvents]=\"viewHighlightOngoingEvents\"\n                [showWorkHours]=\"shouldShowWorkHours\"\n                [scrollTime]=\"viewScrollTime\"\n                [startTime]=\"viewStartTime\"\n                [endTime]=\"viewEndTime\"\n                [workDayStart]=\"viewWorkDayStart\"\n                [workDayEnd]=\"viewWorkDayEnd\"\n                [workWeekStart]=\"viewWorkWeekStart\"\n                [workWeekEnd]=\"viewWorkWeekEnd\"\n                [weekStart]=\"viewWeekStart\"\n                [slotDuration]=\"viewSlotDuration\"\n                [slotDivisions]=\"viewSlotDivisions\"\n                [slotFill]=\"viewSlotFill\"\n                [slotClass]=\"viewSlotClass\"\n                [eventClass]=\"viewEventClass\"\n                [eventStyles]=\"viewEventStyles\"\n                [allDaySlotTemplate]=\"allDaySlotTemplate?.templateRef\"\n                [allDayEventTemplate]=\"allDayEventTemplate?.templateRef\"\n                [\u0435ventTemplate]=\"eventTemplate?.templateRef\"\n                [groupHeaderTemplate]=\"groupHeaderTemplate?.templateRef\"\n                [timeSlotTemplate]=\"timeSlotTemplate?.templateRef\"\n                [minorTimeHeaderTemplate]=\"minorTimeHeaderTemplate?.templateRef\"\n                [majorTimeHeaderTemplate]=\"majorTimeHeaderTemplate?.templateRef\"\n                [dateHeaderTemplate]=\"dateHeaderTemplate?.templateRef\"\n                [selectedDateFormat]=\"selectedDateFormat\"\n                [selectedShortDateFormat]=\"selectedShortDateFormat\">\n            </multi-day-view>\n            <div viewFooter kendoWorkHoursFooter [showWorkHours]=\"shouldShowWorkHours\" (itemClick)=\"showWorkHours = !shouldShowWorkHours\"></div>\n        </ng-template>\n    "
         }),
         __metadata("design:paramtypes", [IntlService,
             LocalizationService,
@@ -8730,7 +8813,7 @@ var WorkWeekViewComponent = /** @class */ (function (_super) {
                     // tslint:disable-next-line:no-forward-ref
                     useExisting: forwardRef(function () { return WorkWeekViewComponent_1; })
                 }],
-            template: "\n        <ng-template #content>\n            <multi-day-view\n                viewName=\"workWeekview\"\n                [name]=\"name\"\n                [numberOfDays]=\"numberOfDays\"\n                [getStartDate]=\"getStartDate\"\n                [getNextDate]=\"getNextDate\"\n                [eventHeight]=\"viewEventHeight\"\n                [currentTimeMarker]=\"viewCurrentTimeMarker\"\n                [showWorkHours]=\"shouldShowWorkHours\"\n                [scrollTime]=\"viewScrollTime\"\n                [startTime]=\"viewStartTime\"\n                [endTime]=\"viewEndTime\"\n                [workDayStart]=\"viewWorkDayStart\"\n                [workDayEnd]=\"viewWorkDayEnd\"\n                [workWeekStart]=\"viewWorkWeekStart\"\n                [workWeekEnd]=\"viewWorkWeekEnd\"\n                [slotDuration]=\"viewSlotDuration\"\n                [slotDivisions]=\"viewSlotDivisions\"\n                [slotFill]=\"viewSlotFill\"\n                [slotClass]=\"viewSlotClass\"\n                [eventClass]=\"viewEventClass\"\n                [eventStyles]=\"viewEventStyles\"\n                [allDaySlotTemplate]=\"allDaySlotTemplate?.templateRef\"\n                [allDayEventTemplate]=\"allDayEventTemplate?.templateRef\"\n                [\u0435ventTemplate]=\"eventTemplate?.templateRef\"\n                [groupHeaderTemplate]=\"groupHeaderTemplate?.templateRef\"\n                [timeSlotTemplate]=\"timeSlotTemplate?.templateRef\"\n                [minorTimeHeaderTemplate]=\"minorTimeHeaderTemplate?.templateRef\"\n                [majorTimeHeaderTemplate]=\"majorTimeHeaderTemplate?.templateRef\"\n                [dateHeaderTemplate]=\"dateHeaderTemplate?.templateRef\"\n                [selectedDateFormat]=\"selectedDateFormat\"\n                [selectedShortDateFormat]=\"selectedShortDateFormat\">\n            </multi-day-view>\n            <div viewFooter kendoWorkHoursFooter [showWorkHours]=\"shouldShowWorkHours\" (itemClick)=\"showWorkHours = !shouldShowWorkHours\"></div>\n        </ng-template>\n    "
+            template: "\n        <ng-template #content>\n            <multi-day-view\n                viewName=\"workWeekview\"\n                [name]=\"name\"\n                [numberOfDays]=\"numberOfDays\"\n                [getStartDate]=\"getStartDate\"\n                [getNextDate]=\"getNextDate\"\n                [eventHeight]=\"viewEventHeight\"\n                [currentTimeMarker]=\"viewCurrentTimeMarker\"\n                [highlightOngoingEvents]=\"viewHighlightOngoingEvents\"\n                [showWorkHours]=\"shouldShowWorkHours\"\n                [scrollTime]=\"viewScrollTime\"\n                [startTime]=\"viewStartTime\"\n                [endTime]=\"viewEndTime\"\n                [workDayStart]=\"viewWorkDayStart\"\n                [workDayEnd]=\"viewWorkDayEnd\"\n                [workWeekStart]=\"viewWorkWeekStart\"\n                [workWeekEnd]=\"viewWorkWeekEnd\"\n                [slotDuration]=\"viewSlotDuration\"\n                [slotDivisions]=\"viewSlotDivisions\"\n                [slotFill]=\"viewSlotFill\"\n                [slotClass]=\"viewSlotClass\"\n                [eventClass]=\"viewEventClass\"\n                [eventStyles]=\"viewEventStyles\"\n                [allDaySlotTemplate]=\"allDaySlotTemplate?.templateRef\"\n                [allDayEventTemplate]=\"allDayEventTemplate?.templateRef\"\n                [\u0435ventTemplate]=\"eventTemplate?.templateRef\"\n                [groupHeaderTemplate]=\"groupHeaderTemplate?.templateRef\"\n                [timeSlotTemplate]=\"timeSlotTemplate?.templateRef\"\n                [minorTimeHeaderTemplate]=\"minorTimeHeaderTemplate?.templateRef\"\n                [majorTimeHeaderTemplate]=\"majorTimeHeaderTemplate?.templateRef\"\n                [dateHeaderTemplate]=\"dateHeaderTemplate?.templateRef\"\n                [selectedDateFormat]=\"selectedDateFormat\"\n                [selectedShortDateFormat]=\"selectedShortDateFormat\">\n            </multi-day-view>\n            <div viewFooter kendoWorkHoursFooter [showWorkHours]=\"shouldShowWorkHours\" (itemClick)=\"showWorkHours = !shouldShowWorkHours\"></div>\n        </ng-template>\n    "
         }),
         __metadata("design:paramtypes", [IntlService,
             LocalizationService,
@@ -9498,6 +9581,49 @@ function createTimeSlots(intlService, _a) {
     return slots;
 }
 
+/**
+ * @hidden
+ */
+var DayTimeViewItemComponent = /** @class */ (function (_super) {
+    __extends(DayTimeViewItemComponent, _super);
+    function DayTimeViewItemComponent(intlService, slotService, localization, focusService, element, renderer, localeId) {
+        var _this = _super.call(this, slotService, localization, focusService, element, renderer, localeId) || this;
+        _this.intlService = intlService;
+        _this.localeId = localeId;
+        return _this;
+    }
+    Object.defineProperty(DayTimeViewItemComponent.prototype, "eventTime", {
+        get: function () {
+            return this.intlService.format('{0:t}–{1:t}', toLocalDate(this.item.startTime), toLocalDate(this.item.endTime));
+        },
+        enumerable: true,
+        configurable: true
+    });
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], DayTimeViewItemComponent.prototype, "vertical", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], DayTimeViewItemComponent.prototype, "isAllDay", void 0);
+    DayTimeViewItemComponent = __decorate([
+        Component({
+            // tslint:disable-next-line:component-selector
+            selector: '[dayTimeViewItem]',
+            template: "\n        <span class=\"k-event-actions\">\n            <span class=\"k-icon k-i-arrow-60-left\" *ngIf=\"item.tail && !vertical\"></span>\n            <span class=\"k-icon k-i-reload\" *ngIf=\"isRecurrence\"></span>\n            <span class=\"k-icon k-i-non-recurrence\" *ngIf=\"isRecurrenceException\"></span>\n        </span>\n        <ng-container *ngIf=\"eventTemplate\" [ngTemplateOutlet]=\"eventTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.event, event: item.event, resources: resources }\">\n        </ng-container>\n        <div *ngIf=\"!eventTemplate\" [attr.title]=\"eventTitle\">\n            <div class=\"k-event-template k-event-time\" *ngIf=\"!isAllDay\">{{ eventTime }}</div>\n            <div class=\"k-event-template\" aria-hidden=\"true\">{{ item.event.title }}</div>\n        </div>\n\n        <span class=\"k-event-actions\">\n            <span *ngIf=\"removable\" class=\"k-link k-event-delete\" aria-hidden=\"true\" [attr.title]=\"deleteMessage\">\n                <span class=\"k-icon k-i-close\"></span>\n            </span>\n            <span class=\"k-icon k-i-arrow-60-right\" *ngIf=\"item.head && !vertical\"></span>\n        </span>\n\n        <span class=\"k-event-top-actions\" *ngIf=\"item.tail && vertical\">\n            <span class=\"k-icon k-i-arrow-60-up\"></span>\n        </span>\n\n        <span class=\"k-event-bottom-actions\" *ngIf=\"item.head && vertical\">\n            <span class=\"k-icon k-i-arrow-60-down\"></span>\n        </span>\n\n        <ng-container *ngIf=\"resizable && vertical\">\n            <span class=\"k-resize-handle k-resize-n\" *ngIf=\"!item.tail\"></span>\n            <span class=\"k-resize-handle k-resize-s\" *ngIf=\"!item.head\"></span>\n        </ng-container>\n\n        <ng-container *ngIf=\"resizable && !vertical\">\n            <span class=\"k-resize-handle k-resize-w\"></span>\n            <span class=\"k-resize-handle k-resize-e\"></span>\n        </ng-container>\n    "
+        }),
+        __param(6, Inject(LOCALE_ID)),
+        __metadata("design:paramtypes", [IntlService,
+            DayTimeSlotService,
+            LocalizationService,
+            FocusService,
+            ElementRef,
+            Renderer2, String])
+    ], DayTimeViewItemComponent);
+    return DayTimeViewItemComponent;
+}(BaseViewItem));
+
 var getStartDate = function (date) { return getDate(date); };
 var getEndDate = function (start, numberOfDays) { return getDate(addDays(start, numberOfDays || 1)); };
 var getNextDate = function (date, count, numberOfDays) { return getDate(addDays(date, numberOfDays * count)); };
@@ -9529,6 +9655,8 @@ var DayTimeViewComponent = /** @class */ (function (_super) {
         _this.verticalTime = true;
         _this.initialUpdate = true;
         _this.updateCurrentTime = _this.updateCurrentTime.bind(_this);
+        _this.toggleOngoingClass = _this.toggleOngoingClass.bind(_this);
+        _this.updateOngoingEvents = _this.updateOngoingEvents.bind(_this);
         return _this;
     }
     Object.defineProperty(DayTimeViewComponent.prototype, "classNames", {
@@ -9570,6 +9698,7 @@ var DayTimeViewComponent = /** @class */ (function (_super) {
     DayTimeViewComponent.prototype.ngOnDestroy = function () {
         _super.prototype.ngOnDestroy.call(this);
         clearTimeout(this.currentTimeTimeout);
+        clearTimeout(this.ongoingEventsTimeout);
     };
     DayTimeViewComponent.prototype.verticalItem = function (leafIndex, resourceIndex) {
         var data = this.verticalResources[resourceIndex].data || [];
@@ -9590,6 +9719,15 @@ var DayTimeViewComponent = /** @class */ (function (_super) {
             });
         }
     };
+    DayTimeViewComponent.prototype.toggleOngoingClass = function () {
+        var _this = this;
+        var now = this.currentTime();
+        var cssClass = isPresent(this.highlightOngoingEvents.cssClass) ? this.highlightOngoingEvents.cssClass : ONGOING_EVENT_CSS_CLASS;
+        this.eventElements.forEach(function (event) {
+            var isOngoing = dateInRange(now, event.item.start, event.item.end);
+            _this.renderer[isOngoing ? 'addClass' : 'removeClass'](event.nativeElement, cssClass);
+        });
+    };
     DayTimeViewComponent.prototype.scrollToTime = function (time) {
         if (time === void 0) { time = this.scrollTime; }
         var date;
@@ -9618,6 +9756,7 @@ var DayTimeViewComponent = /** @class */ (function (_super) {
     DayTimeViewComponent.prototype.updateView = function () {
         _super.prototype.updateView.call(this);
         this.updateCurrentTime();
+        this.updateOngoingEvents();
         if (this.initialUpdate) {
             this.scrollToTime();
             this.initialUpdate = false;
@@ -9657,6 +9796,18 @@ var DayTimeViewComponent = /** @class */ (function (_super) {
             this.positionCurrentTime();
         }
     };
+    DayTimeViewComponent.prototype.updateOngoingEvents = function () {
+        var _this = this;
+        var disabled = !this.highlightOngoingEvents || this.highlightOngoingEvents.enabled === false;
+        if (!isDocumentAvailable() || disabled) {
+            return;
+        }
+        clearTimeout(this.ongoingEventsTimeout);
+        this.zone.runOutsideAngular(function () {
+            _this.ongoingEventsTimeout = setTimeout(_this.updateOngoingEvents, _this.highlightOngoingEvents.updateInterval || MS_PER_MINUTE);
+        });
+        this.toggleOngoingClass();
+    };
     DayTimeViewComponent.prototype.positionCurrentTime = function () {
         var _this = this;
         if (this.currentTimeElements && this.currentTimeElements.length) {
@@ -9873,10 +10024,18 @@ var DayTimeViewComponent = /** @class */ (function (_super) {
         Input(),
         __metadata("design:type", Object)
     ], DayTimeViewComponent.prototype, "currentTimeMarker", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], DayTimeViewComponent.prototype, "highlightOngoingEvents", void 0);
     __decorate([
         ViewChildren('currentTimeMarker'),
         __metadata("design:type", QueryList)
     ], DayTimeViewComponent.prototype, "currentTimeElements", void 0);
+    __decorate([
+        ViewChildren(DayTimeViewItemComponent),
+        __metadata("design:type", QueryList)
+    ], DayTimeViewComponent.prototype, "eventElements", void 0);
     __decorate([
         ViewChildren('currentTimeArrow'),
         __metadata("design:type", QueryList)
@@ -10366,49 +10525,6 @@ var DaySlotDirective = /** @class */ (function (_super) {
     return DaySlotDirective;
 }(BaseSlotDirective));
 
-/**
- * @hidden
- */
-var DayTimeViewItemComponent = /** @class */ (function (_super) {
-    __extends(DayTimeViewItemComponent, _super);
-    function DayTimeViewItemComponent(intlService, slotService, localization, focusService, element, renderer, localeId) {
-        var _this = _super.call(this, slotService, localization, focusService, element, renderer, localeId) || this;
-        _this.intlService = intlService;
-        _this.localeId = localeId;
-        return _this;
-    }
-    Object.defineProperty(DayTimeViewItemComponent.prototype, "eventTime", {
-        get: function () {
-            return this.intlService.format('{0:t}–{1:t}', toLocalDate(this.item.startTime), toLocalDate(this.item.endTime));
-        },
-        enumerable: true,
-        configurable: true
-    });
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], DayTimeViewItemComponent.prototype, "vertical", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], DayTimeViewItemComponent.prototype, "isAllDay", void 0);
-    DayTimeViewItemComponent = __decorate([
-        Component({
-            // tslint:disable-next-line:component-selector
-            selector: '[dayTimeViewItem]',
-            template: "\n        <span class=\"k-event-actions\">\n            <span class=\"k-icon k-i-arrow-60-left\" *ngIf=\"item.tail && !vertical\"></span>\n            <span class=\"k-icon k-i-reload\" *ngIf=\"isRecurrence\"></span>\n            <span class=\"k-icon k-i-non-recurrence\" *ngIf=\"isRecurrenceException\"></span>\n        </span>\n        <ng-container *ngIf=\"eventTemplate\" [ngTemplateOutlet]=\"eventTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.event, event: item.event, resources: resources }\">\n        </ng-container>\n        <div *ngIf=\"!eventTemplate\" [attr.title]=\"eventTitle\">\n            <div class=\"k-event-template k-event-time\" *ngIf=\"!isAllDay\">{{ eventTime }}</div>\n            <div class=\"k-event-template\" aria-hidden=\"true\">{{ item.event.title }}</div>\n        </div>\n\n        <span class=\"k-event-actions\">\n            <span *ngIf=\"removable\" class=\"k-link k-event-delete\" aria-hidden=\"true\" [attr.title]=\"deleteMessage\">\n                <span class=\"k-icon k-i-close\"></span>\n            </span>\n            <span class=\"k-icon k-i-arrow-60-right\" *ngIf=\"item.head && !vertical\"></span>\n        </span>\n\n        <span class=\"k-event-top-actions\" *ngIf=\"item.tail && vertical\">\n            <span class=\"k-icon k-i-arrow-60-up\"></span>\n        </span>\n\n        <span class=\"k-event-bottom-actions\" *ngIf=\"item.head && vertical\">\n            <span class=\"k-icon k-i-arrow-60-down\"></span>\n        </span>\n\n        <ng-container *ngIf=\"resizable && vertical\">\n            <span class=\"k-resize-handle k-resize-n\" *ngIf=\"!item.tail\"></span>\n            <span class=\"k-resize-handle k-resize-s\" *ngIf=\"!item.head\"></span>\n        </ng-container>\n\n        <ng-container *ngIf=\"resizable && !vertical\">\n            <span class=\"k-resize-handle k-resize-w\"></span>\n            <span class=\"k-resize-handle k-resize-e\"></span>\n        </ng-container>\n    "
-        }),
-        __param(6, Inject(LOCALE_ID)),
-        __metadata("design:paramtypes", [IntlService,
-            DayTimeSlotService,
-            LocalizationService,
-            FocusService,
-            ElementRef,
-            Renderer2, String])
-    ], DayTimeViewItemComponent);
-    return DayTimeViewItemComponent;
-}(BaseViewItem));
-
 var DIRECTIVES = [TimeSlotDirective, DaySlotDirective, DayTimeViewItemComponent];
 /**
  * @hidden
@@ -10766,7 +10882,7 @@ var TimelineViewComponent = /** @class */ (function (_super) {
                     // tslint:disable-next-line:no-forward-ref
                     useExisting: forwardRef(function () { return TimelineViewComponent_1; })
                 }],
-            template: "\n        <ng-template #content>\n            <timeline-multi-day-view\n                [name]=\"name\"\n                [eventHeight]=\"viewEventHeight\"\n                [columnWidth]=\"viewColumnWidth\"\n                [currentTimeMarker]=\"viewCurrentTimeMarker\"\n                [showWorkHours]=\"shouldShowWorkHours\"\n                [scrollTime]=\"viewScrollTime\"\n                [startTime]=\"viewStartTime\"\n                [endTime]=\"viewEndTime\"\n                [workDayStart]=\"viewWorkDayStart\"\n                [workDayEnd]=\"viewWorkDayEnd\"\n                [workWeekStart]=\"viewWorkWeekStart\"\n                [workWeekEnd]=\"viewWorkWeekEnd\"\n                [slotDuration]=\"viewSlotDuration\"\n                [slotDivisions]=\"viewSlotDivisions\"\n                [slotClass]=\"viewSlotClass\"\n                [eventClass]=\"viewEventClass\"\n                [eventStyles]=\"viewEventStyles\"\n                [\u0435ventTemplate]=\"eventTemplate?.templateRef\"\n                [groupHeaderTemplate]=\"groupHeaderTemplate?.templateRef\"\n                [timeSlotTemplate]=\"timeSlotTemplate?.templateRef\"\n                [dateHeaderTemplate]=\"dateHeaderTemplate?.templateRef\"\n                [selectedDateFormat]=\"selectedDateFormat\"\n                [selectedShortDateFormat]=\"selectedShortDateFormat\">\n            </timeline-multi-day-view>\n            <div viewFooter kendoWorkHoursFooter [showWorkHours]=\"shouldShowWorkHours\" (itemClick)=\"showWorkHours = !shouldShowWorkHours\"></div>\n        </ng-template>\n    "
+            template: "\n        <ng-template #content>\n            <timeline-multi-day-view\n                [name]=\"name\"\n                [eventHeight]=\"viewEventHeight\"\n                [columnWidth]=\"viewColumnWidth\"\n                [currentTimeMarker]=\"viewCurrentTimeMarker\"\n                [highlightOngoingEvents]=\"viewHighlightOngoingEvents\"\n                [showWorkHours]=\"shouldShowWorkHours\"\n                [scrollTime]=\"viewScrollTime\"\n                [startTime]=\"viewStartTime\"\n                [endTime]=\"viewEndTime\"\n                [workDayStart]=\"viewWorkDayStart\"\n                [workDayEnd]=\"viewWorkDayEnd\"\n                [workWeekStart]=\"viewWorkWeekStart\"\n                [workWeekEnd]=\"viewWorkWeekEnd\"\n                [slotDuration]=\"viewSlotDuration\"\n                [slotDivisions]=\"viewSlotDivisions\"\n                [slotClass]=\"viewSlotClass\"\n                [eventClass]=\"viewEventClass\"\n                [eventStyles]=\"viewEventStyles\"\n                [\u0435ventTemplate]=\"eventTemplate?.templateRef\"\n                [groupHeaderTemplate]=\"groupHeaderTemplate?.templateRef\"\n                [timeSlotTemplate]=\"timeSlotTemplate?.templateRef\"\n                [dateHeaderTemplate]=\"dateHeaderTemplate?.templateRef\"\n                [selectedDateFormat]=\"selectedDateFormat\"\n                [selectedShortDateFormat]=\"selectedShortDateFormat\">\n            </timeline-multi-day-view>\n            <div viewFooter kendoWorkHoursFooter [showWorkHours]=\"shouldShowWorkHours\" (itemClick)=\"showWorkHours = !shouldShowWorkHours\"></div>\n        </ng-template>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService, ChangeDetectorRef, ViewContextService, ViewStateService])
     ], TimelineViewComponent);
@@ -10838,7 +10954,7 @@ var TimelineWeekViewComponent = /** @class */ (function (_super) {
                     // tslint:disable-next-line:no-forward-ref
                     useExisting: forwardRef(function () { return TimelineWeekViewComponent_1; })
                 }],
-            template: "\n        <ng-template #content>\n            <timeline-multi-day-view\n                viewName=\"timeline-week\"\n                [name]=\"name\"\n                [numberOfDays]=\"7\"\n                [getStartDate]=\"getStartDate\"\n                [eventHeight]=\"viewEventHeight\"\n                [columnWidth]=\"viewColumnWidth\"\n                [currentTimeMarker]=\"viewCurrentTimeMarker\"\n                [showWorkHours]=\"shouldShowWorkHours\"\n                [scrollTime]=\"viewScrollTime\"\n                [startTime]=\"viewStartTime\"\n                [endTime]=\"viewEndTime\"\n                [workDayStart]=\"viewWorkDayStart\"\n                [workDayEnd]=\"viewWorkDayEnd\"\n                [workWeekStart]=\"viewWorkWeekStart\"\n                [workWeekEnd]=\"viewWorkWeekEnd\"\n                [weekStart]=\"viewWeekStart\"\n                [slotDuration]=\"viewSlotDuration\"\n                [slotDivisions]=\"viewSlotDivisions\"\n                [slotClass]=\"viewSlotClass\"\n                [eventClass]=\"viewEventClass\"\n                [eventStyles]=\"viewEventStyles\"\n                [\u0435ventTemplate]=\"eventTemplate?.templateRef\"\n                [groupHeaderTemplate]=\"groupHeaderTemplate?.templateRef\"\n                [timeSlotTemplate]=\"timeSlotTemplate?.templateRef\"\n                [dateHeaderTemplate]=\"dateHeaderTemplate?.templateRef\"\n                [selectedDateFormat]=\"selectedDateFormat\"\n                [selectedShortDateFormat]=\"selectedShortDateFormat\">\n            </timeline-multi-day-view>\n            <div viewFooter kendoWorkHoursFooter [showWorkHours]=\"shouldShowWorkHours\" (itemClick)=\"showWorkHours = !shouldShowWorkHours\"></div>\n        </ng-template>\n    "
+            template: "\n        <ng-template #content>\n            <timeline-multi-day-view\n                viewName=\"timeline-week\"\n                [name]=\"name\"\n                [numberOfDays]=\"7\"\n                [getStartDate]=\"getStartDate\"\n                [eventHeight]=\"viewEventHeight\"\n                [columnWidth]=\"viewColumnWidth\"\n                [currentTimeMarker]=\"viewCurrentTimeMarker\"\n                [highlightOngoingEvents]=\"viewHighlightOngoingEvents\"\n                [showWorkHours]=\"shouldShowWorkHours\"\n                [scrollTime]=\"viewScrollTime\"\n                [startTime]=\"viewStartTime\"\n                [endTime]=\"viewEndTime\"\n                [workDayStart]=\"viewWorkDayStart\"\n                [workDayEnd]=\"viewWorkDayEnd\"\n                [workWeekStart]=\"viewWorkWeekStart\"\n                [workWeekEnd]=\"viewWorkWeekEnd\"\n                [weekStart]=\"viewWeekStart\"\n                [slotDuration]=\"viewSlotDuration\"\n                [slotDivisions]=\"viewSlotDivisions\"\n                [slotClass]=\"viewSlotClass\"\n                [eventClass]=\"viewEventClass\"\n                [eventStyles]=\"viewEventStyles\"\n                [\u0435ventTemplate]=\"eventTemplate?.templateRef\"\n                [groupHeaderTemplate]=\"groupHeaderTemplate?.templateRef\"\n                [timeSlotTemplate]=\"timeSlotTemplate?.templateRef\"\n                [dateHeaderTemplate]=\"dateHeaderTemplate?.templateRef\"\n                [selectedDateFormat]=\"selectedDateFormat\"\n                [selectedShortDateFormat]=\"selectedShortDateFormat\">\n            </timeline-multi-day-view>\n            <div viewFooter kendoWorkHoursFooter [showWorkHours]=\"shouldShowWorkHours\" (itemClick)=\"showWorkHours = !shouldShowWorkHours\"></div>\n        </ng-template>\n    "
         }),
         __metadata("design:paramtypes", [IntlService,
             LocalizationService,
@@ -10923,7 +11039,7 @@ var TimelineMonthViewComponent = /** @class */ (function (_super) {
                     // tslint:disable-next-line:no-forward-ref
                     useExisting: forwardRef(function () { return TimelineMonthViewComponent_1; })
                 }],
-            template: "\n        <ng-template #content>\n            <timeline-multi-day-view\n                viewName=\"timeline-month\"\n                [name]=\"name\"\n                [getNextDate]=\"getNextDate\"\n                [getStartDate]=\"getStartDate\"\n                [getEndDate]=\"getEndDate\"\n                [eventHeight]=\"viewEventHeight\"\n                [columnWidth]=\"viewColumnWidth\"\n                [currentTimeMarker]=\"viewCurrentTimeMarker\"\n                [showWorkHours]=\"shouldShowWorkHours\"\n                [scrollTime]=\"viewScrollTime\"\n                [startTime]=\"viewStartTime\"\n                [endTime]=\"viewEndTime\"\n                [workDayStart]=\"viewWorkDayStart\"\n                [workDayEnd]=\"viewWorkDayEnd\"\n                [workWeekStart]=\"viewWorkWeekStart\"\n                [workWeekEnd]=\"viewWorkWeekEnd\"\n                [slotDuration]=\"viewSlotDuration\"\n                [slotDivisions]=\"viewSlotDivisions\"\n                [slotClass]=\"viewSlotClass\"\n                [eventClass]=\"viewEventClass\"\n                [eventStyles]=\"viewEventStyles\"\n                [\u0435ventTemplate]=\"eventTemplate?.templateRef\"\n                [groupHeaderTemplate]=\"groupHeaderTemplate?.templateRef\"\n                [timeSlotTemplate]=\"timeSlotTemplate?.templateRef\"\n                [dateHeaderTemplate]=\"dateHeaderTemplate?.templateRef\"\n                [selectedDateFormat]=\"selectedDateFormat\"\n                [selectedShortDateFormat]=\"selectedShortDateFormat\">\n            </timeline-multi-day-view>\n            <div viewFooter kendoWorkHoursFooter [showWorkHours]=\"shouldShowWorkHours\" (itemClick)=\"showWorkHours = !shouldShowWorkHours\"></div>\n        </ng-template>\n    "
+            template: "\n        <ng-template #content>\n            <timeline-multi-day-view\n                viewName=\"timeline-month\"\n                [name]=\"name\"\n                [getNextDate]=\"getNextDate\"\n                [getStartDate]=\"getStartDate\"\n                [getEndDate]=\"getEndDate\"\n                [eventHeight]=\"viewEventHeight\"\n                [columnWidth]=\"viewColumnWidth\"\n                [currentTimeMarker]=\"viewCurrentTimeMarker\"\n                [highlightOngoingEvents]=\"viewHighlightOngoingEvents\"\n                [showWorkHours]=\"shouldShowWorkHours\"\n                [scrollTime]=\"viewScrollTime\"\n                [startTime]=\"viewStartTime\"\n                [endTime]=\"viewEndTime\"\n                [workDayStart]=\"viewWorkDayStart\"\n                [workDayEnd]=\"viewWorkDayEnd\"\n                [workWeekStart]=\"viewWorkWeekStart\"\n                [workWeekEnd]=\"viewWorkWeekEnd\"\n                [slotDuration]=\"viewSlotDuration\"\n                [slotDivisions]=\"viewSlotDivisions\"\n                [slotClass]=\"viewSlotClass\"\n                [eventClass]=\"viewEventClass\"\n                [eventStyles]=\"viewEventStyles\"\n                [\u0435ventTemplate]=\"eventTemplate?.templateRef\"\n                [groupHeaderTemplate]=\"groupHeaderTemplate?.templateRef\"\n                [timeSlotTemplate]=\"timeSlotTemplate?.templateRef\"\n                [dateHeaderTemplate]=\"dateHeaderTemplate?.templateRef\"\n                [selectedDateFormat]=\"selectedDateFormat\"\n                [selectedShortDateFormat]=\"selectedShortDateFormat\">\n            </timeline-multi-day-view>\n            <div viewFooter kendoWorkHoursFooter [showWorkHours]=\"shouldShowWorkHours\" (itemClick)=\"showWorkHours = !shouldShowWorkHours\"></div>\n        </ng-template>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService, ChangeDetectorRef, ViewContextService, ViewStateService])
     ], TimelineMonthViewComponent);

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1649241774,
+    publishDate: 1649774242,
     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'
 };

package/dist/npm/scheduler.component.js

@@ -148,6 +148,10 @@ var SchedulerComponent = /** @class */ (function () {
          * 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.
@@ -760,6 +764,7 @@ var SchedulerComponent = /** @class */ (function () {
             selectable: this.selectable,
             timezone: this.timezone,
             currentTimeMarker: this.currentTimeMarker,
+            highlightOngoingEvents: this.highlightOngoingEvents,
             slotClass: this.slotClass,
             slotFill: this.slotFill,
             columnWidth: this.columnWidth,
@@ -1024,6 +1029,10 @@ var SchedulerComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", Object)
     ], SchedulerComponent.prototype, "currentTimeMarker", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], SchedulerComponent.prototype, "highlightOngoingEvents", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Function)

package/dist/npm/types/ongoing-events-settings.interface.js

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/views/common/configuration-view-base.js

@@ -61,6 +61,16 @@ var ConfigurationViewBase = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ConfigurationViewBase.prototype, "viewHighlightOngoingEvents", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return util_1.isPresent(this.highlightOngoingEvents) ? this.highlightOngoingEvents : this.schedulerOptions.highlightOngoingEvents;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ConfigurationViewBase.prototype, "viewWeekStart", {
         /**
          * @hidden
@@ -92,6 +102,10 @@ var ConfigurationViewBase = /** @class */ (function (_super) {
         core_1.Input(),
         tslib_1.__metadata("design:type", Function)
     ], ConfigurationViewBase.prototype, "eventStyles", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], ConfigurationViewBase.prototype, "highlightOngoingEvents", void 0);
     tslib_1.__decorate([
         core_1.ViewChild('content', { static: true }),
         tslib_1.__metadata("design:type", core_1.TemplateRef)

package/dist/npm/views/constants.js

@@ -24,3 +24,9 @@ exports.MS_PER_DAY = kendo_date_math_1.MS_PER_DAY;
 exports.BORDER_WIDTH = 1;
 /** @hidden */
 exports.DEFAULT_EVENT_HEIGHT = 25;
+/** @hidden */
+exports.ONGOING_EVENT_CSS_CLASS = 'k-event-ongoing';
+/** @hidden */
+exports.DAYS_IN_WEEK_COUNT = 7;
+/** @hidden */
+exports.WEEKS_COUNT = 6;

package/dist/npm/views/day-time/day-time-view-base.js

@@ -22,6 +22,7 @@ var WORK_WEEK_END = 'workWeekEnd';
 var SLOT_DURATION = 'slotDuration';
 var SLOT_DIVISIONS = 'slotDivisions';
 var CURRENT_TIME_MARKER = 'currentTimeMarker';
+var HIGHLIGHT_ONGOING_EVENTS = 'highlightOngoingEvents';
 /**
  * @hidden
  */
@@ -140,6 +141,16 @@ var DayTimeViewBase = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(DayTimeViewBase.prototype, "viewHighlightOngoingEvents", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this.optionValue(HIGHLIGHT_ONGOING_EVENTS);
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(DayTimeViewBase.prototype, "viewScrollTime", {
         /**
          * @hidden
@@ -209,6 +220,10 @@ var DayTimeViewBase = /** @class */ (function (_super) {
         core_1.Input(),
         tslib_1.__metadata("design:type", Object)
     ], DayTimeViewBase.prototype, "currentTimeMarker", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], DayTimeViewBase.prototype, "highlightOngoingEvents", void 0);
     return DayTimeViewBase;
 }(configuration_view_base_1.ConfigurationViewBase));
 exports.DayTimeViewBase = DayTimeViewBase;