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

package/dist/fesm2015/index.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __param, __metadata } from 'tslib';
-import { Directive, Optional, TemplateRef, Injectable, EventEmitter, NgZone, 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, EventEmitter, NgZone, 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 @@ 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'
 };
@@ -1948,7 +1948,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
@@ -2224,6 +2228,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.
@@ -2795,6 +2803,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,
@@ -3054,6 +3063,10 @@ __decorate([
     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)
@@ -4525,6 +4538,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
      */
@@ -4553,6 +4572,10 @@ __decorate([
     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)
@@ -5730,6 +5753,12 @@ const MS_PER_MINUTE = 60 * MS_PER_SECOND;
 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;
@@ -6293,6 +6322,7 @@ MonthViewComponent = MonthViewComponent_1 = __decorate([
                 [monthDaySlotTemplate]="monthDaySlotTemplate?.templateRef"
                 [selectedDateFormat]="selectedDateFormat"
                 [selectedShortDateFormat]="selectedShortDateFormat"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [weekStart]="viewWeekStart">
             </month-view>
         </ng-template>
@@ -6407,6 +6437,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 = [];
@@ -7389,8 +7422,6 @@ __decorate([
     __metadata("design:type", HintContainerComponent)
 ], BaseView.prototype, "hintContainer", void 0);
 
-const DAYS_IN_WEEK_COUNT = 7;
-const WEEKS_COUNT = 6;
 /**
  * @hidden
  */
@@ -7399,6 +7430,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;
@@ -7409,6 +7441,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;
@@ -7536,6 +7576,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;
@@ -7554,6 +7616,14 @@ __decorate([
     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
@@ -8122,6 +8192,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
  */
@@ -8195,6 +8266,12 @@ class DayTimeViewBase extends ConfigurationViewBase {
     get viewCurrentTimeMarker() {
         return this.optionValue(CURRENT_TIME_MARKER);
     }
+    /**
+     * @hidden
+     */
+    get viewHighlightOngoingEvents() {
+        return this.optionValue(HIGHLIGHT_ONGOING_EVENTS);
+    }
     /**
      * @hidden
      */
@@ -8261,6 +8338,10 @@ __decorate([
     Input(),
     __metadata("design:type", Object)
 ], DayTimeViewBase.prototype, "currentTimeMarker", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], DayTimeViewBase.prototype, "highlightOngoingEvents", void 0);
 
 const SLOT_FILL = 'slotFill';
 /**
@@ -8354,6 +8435,7 @@ DayViewComponent = DayViewComponent_1 = __decorate([
                 [name]="name"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -8471,6 +8553,7 @@ MultiDayViewComponent = MultiDayViewComponent_1 = __decorate([
                 [numberOfDays]="numberOfDays"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -8587,6 +8670,7 @@ WeekViewComponent = WeekViewComponent_1 = __decorate([
                 [getStartDate]="getStartDate"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -8685,6 +8769,7 @@ WorkWeekViewComponent = WorkWeekViewComponent_1 = __decorate([
                 [getNextDate]="getNextDate"
                 [eventHeight]="viewEventHeight"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -9397,6 +9482,80 @@ function createTimeSlots(intlService, { showWorkHours, startTime, endTime, workD
     return slots;
 }
 
+/**
+ * @hidden
+ */
+let DayTimeViewItemComponent = 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));
+    }
+};
+__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: `
+        <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>
+    `
+    }),
+    __param(6, Inject(LOCALE_ID)),
+    __metadata("design:paramtypes", [IntlService,
+        DayTimeSlotService,
+        LocalizationService,
+        FocusService,
+        ElementRef,
+        Renderer2, String])
+], DayTimeViewItemComponent);
+
 const getStartDate = date => getDate(date);
 const getEndDate = (start, numberOfDays) => getDate(addDays(start, numberOfDays || 1));
 const getNextDate = (date, count, numberOfDays) => getDate(addDays(date, numberOfDays * count));
@@ -9427,6 +9586,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`;
@@ -9455,6 +9616,7 @@ class DayTimeViewComponent extends BaseView {
     ngOnDestroy() {
         super.ngOnDestroy();
         clearTimeout(this.currentTimeTimeout);
+        clearTimeout(this.ongoingEventsTimeout);
     }
     verticalItem(leafIndex, resourceIndex) {
         const data = this.verticalResources[resourceIndex].data || [];
@@ -9475,6 +9637,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') {
@@ -9502,6 +9672,7 @@ class DayTimeViewComponent extends BaseView {
     updateView() {
         super.updateView();
         this.updateCurrentTime();
+        this.updateOngoingEvents();
         if (this.initialUpdate) {
             this.scrollToTime();
             this.initialUpdate = false;
@@ -9540,6 +9711,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();
@@ -9753,10 +9935,18 @@ __decorate([
     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)
@@ -10414,80 +10604,6 @@ DaySlotDirective = __decorate([
         LocalizationService])
 ], DaySlotDirective);
 
-/**
- * @hidden
- */
-let DayTimeViewItemComponent = 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));
-    }
-};
-__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: `
-        <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>
-    `
-    }),
-    __param(6, Inject(LOCALE_ID)),
-    __metadata("design:paramtypes", [IntlService,
-        DayTimeSlotService,
-        LocalizationService,
-        FocusService,
-        ElementRef,
-        Renderer2, String])
-], DayTimeViewItemComponent);
-
 const DIRECTIVES = [TimeSlotDirective, DaySlotDirective, DayTimeViewItemComponent];
 /**
  * @hidden
@@ -10969,6 +11085,7 @@ TimelineViewComponent = TimelineViewComponent_1 = __decorate([
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -11065,6 +11182,7 @@ TimelineWeekViewComponent = TimelineWeekViewComponent_1 = __decorate([
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"
@@ -11176,6 +11294,7 @@ TimelineMonthViewComponent = TimelineMonthViewComponent_1 = __decorate([
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                 [showWorkHours]="shouldShowWorkHours"
                 [scrollTime]="viewScrollTime"
                 [startTime]="viewStartTime"