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

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1646219330,
+    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/es2015/scheduler.component.d.ts

@@ -9,7 +9,7 @@ import { Day } from '@progress/kendo-date-math';
 import { Observable } from 'rxjs';
 import { DateChangeEvent, NavigateEvent, SlotClickEvent, EventClickEvent } from './events';
 import { ToolbarTemplateDirective } from './toolbar/toolbar-template.directive';
-import { DateRange, Group, NavigationAction, Resource, SchedulerModelFields, SchedulerView, EditMode, CrudOperation, EditableSettings, CurrentTimeSettings, SlotClassArgs, EventStyleArgs, SchedulerSlot } from './types';
+import { DateRange, Group, NavigationAction, Resource, SchedulerModelFields, SchedulerView, EditMode, CrudOperation, EditableSettings, CurrentTimeSettings, OngoingEventsSettings, SlotClassArgs, EventStyleArgs, SchedulerSlot } from './types';
 import { AgendaDateTemplateDirective } from './views/templates/agenda-date-template.directive';
 import { AgendaTimeTemplateDirective } from './views/templates/agenda-time-template.directive';
 import { AllDayEventTemplateDirective } from './views/templates/all-day-event-template.directive';
@@ -208,6 +208,10 @@ export declare class SchedulerComponent implements AfterContentInit, OnDestroy,
      * Specifies the Scheduler current time marker settings.
      */
     currentTimeMarker: boolean | CurrentTimeSettings;
+    /**
+     * Specifies the settings for the ongoing events highlight of the Scheduler.
+     */
+    highlightOngoingEvents: boolean | OngoingEventsSettings;
     /**
      * Defines a function that is executed for every slot in the view.
      * The function returns a value which is supported by [`ngClass`]({{ site.data.urls.angular['ngclassapi'] }}).

package/dist/es2015/scheduler.component.js

@@ -145,6 +145,10 @@ let SchedulerComponent = 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.
@@ -716,6 +720,7 @@ let SchedulerComponent = class SchedulerComponent {
             selectable: this.selectable,
             timezone: this.timezone,
             currentTimeMarker: this.currentTimeMarker,
+            highlightOngoingEvents: this.highlightOngoingEvents,
             slotClass: this.slotClass,
             slotFill: this.slotFill,
             columnWidth: this.columnWidth,
@@ -975,6 +980,10 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Object)
 ], SchedulerComponent.prototype, "currentTimeMarker", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], SchedulerComponent.prototype, "highlightOngoingEvents", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Function)

package/dist/es2015/types/ongoing-events-settings.interface.d.ts

@@ -0,0 +1,23 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * The settings for the ongoing events highlight.
+ */
+export interface OngoingEventsSettings {
+    /**
+     * The update interval (in milliseconds) of the ongoing events highlight.
+     * Defaults to `60000` (a minute).
+     */
+    updateInterval?: number;
+    /**
+     * Specifies if the ongoing events will be highlighted.
+     * Defaults to `true`.
+     */
+    enabled?: boolean;
+    /**
+     * Specifies a custom CSS class applied to ongoing events.
+     */
+    cssClass?: string;
+}

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

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es2015/types.d.ts

@@ -23,3 +23,4 @@ export { NumericTextBoxOptions } from './types/numeric-options.interface';
 export { DatePickerOptions } from './types/datepicker-options.interface';
 export { SlotRange } from './types/slot-selection';
 export { IsSlotSelectedArgs } from './types/slot-selection';
+export { OngoingEventsSettings } from './types/ongoing-events-settings.interface';

package/dist/es2015/views/common/base-view.d.ts

@@ -47,6 +47,9 @@ export declare abstract class BaseView implements OnInit, OnChanges, AfterViewIn
     hintContainer: HintContainerComponent;
     readonly eventTemplateRef: TemplateRef<any>;
     readonly groupHeaderTemplateRef: TemplateRef<any>;
+    /**
+     * The non-all-day events.
+     */
     items: Subject<any[]>;
     horizontalResources: any[];
     verticalResources: any[];
@@ -61,6 +64,9 @@ export declare abstract class BaseView implements OnInit, OnChanges, AfterViewIn
     protected groupedResources: any[];
     protected spans: any[];
     protected contentHeight: any;
+    /**
+     * All events that the user provided.
+     */
     protected tasks: any[];
     protected group: any;
     protected resources: any[];

package/dist/es2015/views/common/base-view.js

@@ -33,6 +33,9 @@ export 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 = [];

package/dist/es2015/views/common/configuration-view-base.d.ts

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { TemplateRef, ChangeDetectorRef, OnDestroy } from '@angular/core';
-import { SchedulerView } from '../../types';
+import { OngoingEventsSettings, SchedulerView } from '../../types';
 import { EventTemplateDirective, GroupHeaderTemplateDirective } from '../templates';
 import { Subscription } from 'rxjs';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
@@ -36,6 +36,10 @@ export declare abstract class ConfigurationViewBase extends SchedulerView implem
      * The function returns a value which is supported by [`ngStyle`]({{ site.data.urls.angular['ngstyleapi'] }}).
      */
     eventStyles: (args: EventStyleArgs) => any;
+    /**
+     * Specifies the settings for the ongoing events highlight of the Scheduler.
+     */
+    highlightOngoingEvents: boolean | OngoingEventsSettings;
     /**
      * @hidden
      */
@@ -60,6 +64,10 @@ export declare abstract class ConfigurationViewBase extends SchedulerView implem
      * @hidden
      */
     readonly viewEventStyles: any;
+    /**
+     * @hidden
+     */
+    readonly viewHighlightOngoingEvents: any;
     /**
      * @hidden
      */

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

@@ -43,6 +43,12 @@ export 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
      */
@@ -71,6 +77,10 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Function)
 ], ConfigurationViewBase.prototype, "eventStyles", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], ConfigurationViewBase.prototype, "highlightOngoingEvents", void 0);
 tslib_1.__decorate([
     ViewChild('content', { static: true }),
     tslib_1.__metadata("design:type", TemplateRef)

package/dist/es2015/views/constants.d.ts

@@ -20,3 +20,9 @@ export { MS_PER_DAY } from '@progress/kendo-date-math';
 export declare const BORDER_WIDTH = 1;
 /** @hidden */
 export declare const DEFAULT_EVENT_HEIGHT = 25;
+/** @hidden */
+export declare const ONGOING_EVENT_CSS_CLASS = "k-event-ongoing";
+/** @hidden */
+export declare const DAYS_IN_WEEK_COUNT = 7;
+/** @hidden */
+export declare const WEEKS_COUNT = 6;

package/dist/es2015/views/constants.js

@@ -21,3 +21,9 @@ export { MS_PER_DAY } from '@progress/kendo-date-math';
 export const BORDER_WIDTH = 1;
 /** @hidden */
 export const DEFAULT_EVENT_HEIGHT = 25;
+/** @hidden */
+export const ONGOING_EVENT_CSS_CLASS = 'k-event-ongoing';
+/** @hidden */
+export const DAYS_IN_WEEK_COUNT = 7;
+/** @hidden */
+export const WEEKS_COUNT = 6;

package/dist/es2015/views/day-time/day-time-view-base.d.ts

@@ -7,7 +7,7 @@ import { ConfigurationViewBase } from '../common/configuration-view-base';
 import { TimeSlotTemplateDirective, DateHeaderTemplateDirective } from '../templates';
 import { ViewContextService } from '../view-context.service';
 import { ViewStateService } from '../view-state.service';
-import { CurrentTimeSettings } from '../../types';
+import { CurrentTimeSettings, OngoingEventsSettings } from '../../types';
 import { Day } from '@progress/kendo-date-math';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 /**
@@ -76,6 +76,10 @@ export declare abstract class DayTimeViewBase extends ConfigurationViewBase impl
      * Specifies the settings for the current time marker of the Scheduler.
      */
     currentTimeMarker: boolean | CurrentTimeSettings;
+    /**
+     * Specifies the settings for the ongoing events highlight of the Scheduler.
+     */
+    highlightOngoingEvents: boolean | OngoingEventsSettings;
     /**
      * @hidden
      */
@@ -120,6 +124,10 @@ export declare abstract class DayTimeViewBase extends ConfigurationViewBase impl
      * @hidden
      */
     readonly viewCurrentTimeMarker: any;
+    /**
+     * @hidden
+     */
+    readonly viewHighlightOngoingEvents: any;
     /**
      * @hidden
      */

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

@@ -20,6 +20,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
  */
@@ -93,6 +94,12 @@ export class DayTimeViewBase extends ConfigurationViewBase {
     get viewCurrentTimeMarker() {
         return this.optionValue(CURRENT_TIME_MARKER);
     }
+    /**
+     * @hidden
+     */
+    get viewHighlightOngoingEvents() {
+        return this.optionValue(HIGHLIGHT_ONGOING_EVENTS);
+    }
     /**
      * @hidden
      */
@@ -159,3 +166,7 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Object)
 ], DayTimeViewBase.prototype, "currentTimeMarker", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], DayTimeViewBase.prototype, "highlightOngoingEvents", void 0);

package/dist/es2015/views/day-time/day-time-view.component.d.ts

@@ -12,6 +12,7 @@ import { IntlService } from '@progress/kendo-angular-intl';
 import { PDFService } from '../../pdf/pdf.service';
 import { BaseView } from '../common/base-view';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { DayTimeViewItemComponent } from './day-time-view-item.component';
 /**
  * @hidden
  */
@@ -34,7 +35,9 @@ export declare abstract class DayTimeViewComponent extends BaseView implements O
     getEndDate: any;
     getNextDate: any;
     currentTimeMarker: any;
+    highlightOngoingEvents: any;
     currentTimeElements: QueryList<ElementRef>;
+    eventElements: QueryList<DayTimeViewItemComponent>;
     currentTimeArrows: QueryList<ElementRef>;
     name: string;
     workDayStartTime: any;
@@ -49,6 +52,7 @@ export declare abstract class DayTimeViewComponent extends BaseView implements O
     protected schedulerTimeSlotTemplate: any;
     protected schedulerDateHeaderTemplate: any;
     protected currentTimeTimeout: any;
+    protected ongoingEventsTimeout: any;
     protected currentDate: ZonedDate;
     protected verticalTime: boolean;
     protected initialUpdate: boolean;
@@ -57,12 +61,14 @@ export declare abstract class DayTimeViewComponent extends BaseView implements O
     ngOnDestroy(): void;
     verticalItem(leafIndex: number, resourceIndex: number): any;
     timeSlotClass(slot: any, date: any, resourceIndex: any): string;
+    protected toggleOngoingClass(): void;
     protected scrollToTime(time?: string | Date): void;
     protected optionsChange(options: any): void;
     protected updateView(): void;
     protected enableCurrentTime(): boolean;
     protected currentTime(): Date;
     protected updateCurrentTime(): void;
+    protected updateOngoingEvents(): void;
     protected abstract currentTimeArrowOffset(): number;
     protected positionCurrentTime(): void;
     protected bindEvents(): void;

package/dist/es2015/views/day-time/day-time-view.component.js

@@ -10,9 +10,10 @@ import { fromEvent } from 'rxjs';
 import { toInvariantTime, dateInRange, setCoordinates, dateWithTime, toUTCTime, toUTCDateTime } from '../utils';
 import { createTimeSlots } from './utils';
 import { BaseView } from '../common/base-view';
-import { MIDNIGHT_INVARIANT, MS_PER_MINUTE } from '../constants';
-import { fromClick, fromDoubleClick, isNumber } from '../../common/util';
+import { MIDNIGHT_INVARIANT, MS_PER_MINUTE, ONGOING_EVENT_CSS_CLASS } from '../constants';
+import { fromClick, fromDoubleClick, isNumber, isPresent } from '../../common/util';
 import { rtlScrollPosition, hasClasses } from '../../common/dom-queries';
+import { DayTimeViewItemComponent } from './day-time-view-item.component';
 const getStartDate = date => getDate(date);
 const ɵ0 = getStartDate;
 const getEndDate = (start, numberOfDays) => getDate(addDays(start, numberOfDays || 1));
@@ -46,6 +47,8 @@ export 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`;
@@ -74,6 +77,7 @@ export class DayTimeViewComponent extends BaseView {
     ngOnDestroy() {
         super.ngOnDestroy();
         clearTimeout(this.currentTimeTimeout);
+        clearTimeout(this.ongoingEventsTimeout);
     }
     verticalItem(leafIndex, resourceIndex) {
         const data = this.verticalResources[resourceIndex].data || [];
@@ -94,6 +98,14 @@ export 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') {
@@ -121,6 +133,7 @@ export class DayTimeViewComponent extends BaseView {
     updateView() {
         super.updateView();
         this.updateCurrentTime();
+        this.updateOngoingEvents();
         if (this.initialUpdate) {
             this.scrollToTime();
             this.initialUpdate = false;
@@ -159,6 +172,17 @@ export 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();
@@ -372,10 +396,18 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Object)
 ], DayTimeViewComponent.prototype, "currentTimeMarker", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], DayTimeViewComponent.prototype, "highlightOngoingEvents", void 0);
 tslib_1.__decorate([
     ViewChildren('currentTimeMarker'),
     tslib_1.__metadata("design:type", QueryList)
 ], DayTimeViewComponent.prototype, "currentTimeElements", void 0);
+tslib_1.__decorate([
+    ViewChildren(DayTimeViewItemComponent),
+    tslib_1.__metadata("design:type", QueryList)
+], DayTimeViewComponent.prototype, "eventElements", void 0);
 tslib_1.__decorate([
     ViewChildren('currentTimeArrow'),
     tslib_1.__metadata("design:type", QueryList)

package/dist/es2015/views/month/month-view-renderer.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { OnChanges, NgZone, ElementRef, Renderer2, TemplateRef, ChangeDetectorRef } from '@angular/core';
+import { OnChanges, NgZone, ElementRef, Renderer2, TemplateRef, ChangeDetectorRef, QueryList } from '@angular/core';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { DateRange, NavigationAction, ViewItem } from '../../types';
 import { ViewContextService } from '../view-context.service';
@@ -11,17 +11,23 @@ import { MonthSlotService } from './month-slot.service';
 import { BaseView } from '../common/base-view';
 import { PDFService } from '../../pdf/pdf.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { MonthViewItemComponent } from './month-view-item.component';
 /**
  * @hidden
  */
 export declare class MonthViewRendererComponent extends BaseView implements OnChanges {
     monthDaySlotTemplate: TemplateRef<any>;
+    highlightOngoingEvents: any;
     resizeHintFormat: any;
     weeks: any[];
+    eventElements: QueryList<MonthViewItemComponent>;
     readonly monthDaySlotTemplateRef: TemplateRef<any>;
+    protected ongoingEventsTimeout: any;
     private schedulerMonthDaySlotTemplate;
     constructor(viewContext: ViewContextService, viewState: ViewStateService, intl: IntlService, slotService: MonthSlotService, zone: NgZone, element: ElementRef, renderer: Renderer2, pdfService: PDFService, localization: LocalizationService, changeDetector: ChangeDetectorRef);
     ngOnChanges(changes: any): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     horizontalColspan(resourceIndex: number): any;
     verticalRowspan(resourceIndex: number): any;
     verticalItem(leafIndex: number, resourceIndex: number): any;
@@ -40,5 +46,8 @@ export declare class MonthViewRendererComponent extends BaseView implements OnCh
     protected dragRanges(slot: any): any;
     protected dragHintSize(first: any, last: any): any;
     protected slotByPosition(x: number, y: number): any;
+    protected updateOngoingEvents(): void;
+    protected currentTime(): Date;
+    protected toggleOngoingClass(): void;
     private createDaySlots;
 }

package/dist/es2015/views/month/month-view-renderer.component.js

@@ -3,21 +3,22 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, Input, NgZone, ElementRef, Renderer2, TemplateRef, ChangeDetectorRef } from '@angular/core';
+import { Component, Input, NgZone, ElementRef, Renderer2, TemplateRef, ChangeDetectorRef, QueryList, ViewChildren } from '@angular/core';
 import { IntlService } from '@progress/kendo-angular-intl';
-import { isChanged } from '@progress/kendo-angular-common';
+import { isChanged, isDocumentAvailable } from '@progress/kendo-angular-common';
 import { addDays, addMonths, firstDayInWeek, firstDayOfMonth, getDate, toLocalDate } from '@progress/kendo-date-math';
 import { ViewContextService } from '../view-context.service';
 import { ViewStateService } from '../view-state.service';
 import { closestInScope, hasClasses } from '../../common/dom-queries';
 import { MonthSlotService } from './month-slot.service';
 import { updateTaskData, createTasks } from './utils';
-import { toPx } from '../utils';
+import { toPx, dateInRange } from '../utils';
 import { BaseView } from '../common/base-view';
 import { PDFService } from '../../pdf/pdf.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-const DAYS_IN_WEEK_COUNT = 7;
-const WEEKS_COUNT = 6;
+import { MonthViewItemComponent } from './month-view-item.component';
+import { isPresent } from '../../common/util';
+import { DAYS_IN_WEEK_COUNT, WEEKS_COUNT, MS_PER_MINUTE, ONGOING_EVENT_CSS_CLASS } from '../constants';
 /**
  * @hidden
  */
@@ -26,6 +27,7 @@ let MonthViewRendererComponent = class MonthViewRendererComponent extends BaseVi
         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;
@@ -36,6 +38,14 @@ let MonthViewRendererComponent = class MonthViewRendererComponent extends BaseVi
         }
         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;
@@ -163,6 +173,28 @@ let MonthViewRendererComponent = class MonthViewRendererComponent extends BaseVi
     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;
@@ -181,6 +213,14 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", TemplateRef)
 ], MonthViewRendererComponent.prototype, "monthDaySlotTemplate", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], MonthViewRendererComponent.prototype, "highlightOngoingEvents", void 0);
+tslib_1.__decorate([
+    ViewChildren(MonthViewItemComponent),
+    tslib_1.__metadata("design:type", QueryList)
+], MonthViewRendererComponent.prototype, "eventElements", void 0);
 MonthViewRendererComponent = tslib_1.__decorate([
     Component({
         // tslint:disable-next-line:component-selector

package/dist/es2015/views/month/month-view.component.js

@@ -85,6 +85,7 @@ MonthViewComponent = MonthViewComponent_1 = tslib_1.__decorate([
                 [monthDaySlotTemplate]="monthDaySlotTemplate?.templateRef"
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [weekStart]="viewWeekStart">
             </month-view>
         </ng-template>

package/dist/es2015/views/multi-day/day-view.component.js

@@ -82,6 +82,7 @@ DayViewComponent = DayViewComponent_1 = tslib_1.__decorate([
                 [name]="name"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"

package/dist/es2015/views/multi-day/multi-day-view.component.js

@@ -94,6 +94,7 @@ MultiDayViewComponent = MultiDayViewComponent_1 = tslib_1.__decorate([
                 [numberOfDays]="numberOfDays"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"

package/dist/es2015/views/multi-day/week-view.component.js

@@ -96,6 +96,7 @@ WeekViewComponent = WeekViewComponent_1 = tslib_1.__decorate([
                 [getStartDate]="getStartDate"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"

package/dist/es2015/views/multi-day/work-week-view.component.js

@@ -72,6 +72,7 @@ WorkWeekViewComponent = WorkWeekViewComponent_1 = tslib_1.__decorate([
                 [getNextDate]="getNextDate"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"

package/dist/es2015/views/timeline/timeline-month-view.component.js

@@ -89,6 +89,7 @@ TimelineMonthViewComponent = TimelineMonthViewComponent_1 = tslib_1.__decorate([
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"

package/dist/es2015/views/timeline/timeline-view.component.js

@@ -66,6 +66,7 @@ TimelineViewComponent = TimelineViewComponent_1 = tslib_1.__decorate([
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"

package/dist/es2015/views/timeline/timeline-week-view.component.js

@@ -80,6 +80,7 @@ TimelineWeekViewComponent = TimelineWeekViewComponent_1 = tslib_1.__decorate([
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"

package/dist/es2015/views/utils.js

@@ -145,7 +145,11 @@ export function eventResources(event, { taskResources, hasGroups, spans, allReso
         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