@progress/kendo-angular-scheduler 3.1.0 → 4.0.0-dev.202204140813

package/esm2015/views/day-time/day-time-view-base.js

@@ -0,0 +1,151 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Input, ContentChild, Directive } from '@angular/core';
+import { ConfigurationViewBase } from '../common/configuration-view-base';
+import { TimeSlotTemplateDirective, DateHeaderTemplateDirective } from '../templates';
+import { DEFAULT_EVENT_HEIGHT } from '../constants';
+import { isPresent } from '../../common/util';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "../view-context.service";
+import * as i3 from "../view-state.service";
+const EVENT_HEIGHT = 'eventHeight';
+const SHOW_WORK_HOURS = 'showWorkHours';
+const START_TIME = 'startTime';
+const END_TIME = 'endTime';
+const WORK_DAY_START = 'workDayStart';
+const WORK_DAY_END = 'workDayEnd';
+const WORK_WEEK_START = 'workWeekStart';
+const WORK_WEEK_END = 'workWeekEnd';
+const SLOT_DURATION = 'slotDuration';
+const SLOT_DIVISIONS = 'slotDivisions';
+const CURRENT_TIME_MARKER = 'currentTimeMarker';
+const HIGHLIGHT_ONGOING_EVENTS = 'highlightOngoingEvents';
+/**
+ * @hidden
+ */
+export class DayTimeViewBase extends ConfigurationViewBase {
+    constructor(localization, changeDetector, viewContext, viewState) {
+        super(localization, changeDetector, viewContext, viewState);
+    }
+    /**
+     * @hidden
+     */
+    get viewEventHeight() {
+        return this.optionValue(EVENT_HEIGHT) || DEFAULT_EVENT_HEIGHT;
+    }
+    /**
+     * @hidden
+     */
+    get shouldShowWorkHours() {
+        return this.optionValue(SHOW_WORK_HOURS);
+    }
+    /**
+     * @hidden
+     */
+    get viewStartTime() {
+        return this.optionValue(START_TIME);
+    }
+    /**
+     * @hidden
+     */
+    get viewEndTime() {
+        return this.optionValue(END_TIME);
+    }
+    /**
+     * @hidden
+     */
+    get viewWorkDayStart() {
+        return this.optionValue(WORK_DAY_START);
+    }
+    /**
+     * @hidden
+     */
+    get viewWorkDayEnd() {
+        return this.optionValue(WORK_DAY_END);
+    }
+    /**
+     * @hidden
+     */
+    get viewWorkWeekStart() {
+        return this.optionValue(WORK_WEEK_START);
+    }
+    /**
+     * @hidden
+     */
+    get viewWorkWeekEnd() {
+        return this.optionValue(WORK_WEEK_END);
+    }
+    /**
+     * @hidden
+     */
+    get viewSlotDuration() {
+        return this.optionValue(SLOT_DURATION);
+    }
+    /**
+     * @hidden
+     */
+    get viewSlotDivisions() {
+        return this.optionValue(SLOT_DIVISIONS);
+    }
+    /**
+     * @hidden
+     */
+    get viewCurrentTimeMarker() {
+        return this.optionValue(CURRENT_TIME_MARKER);
+    }
+    /**
+     * @hidden
+     */
+    get viewHighlightOngoingEvents() {
+        return this.optionValue(HIGHLIGHT_ONGOING_EVENTS);
+    }
+    /**
+     * @hidden
+     */
+    get viewScrollTime() {
+        return this.optionValue('scrollTime');
+    }
+    optionValue(name) {
+        return isPresent(this[name]) ? this[name] : this.schedulerOptions[name];
+    }
+}
+DayTimeViewBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewBase, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.ViewContextService }, { token: i3.ViewStateService }], target: i0.ɵɵFactoryTarget.Directive });
+DayTimeViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DayTimeViewBase, inputs: { showWorkHours: "showWorkHours", eventHeight: "eventHeight", startTime: "startTime", scrollTime: "scrollTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", slotDuration: "slotDuration", slotDivisions: "slotDivisions", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents" }, queries: [{ propertyName: "timeSlotTemplate", first: true, predicate: TimeSlotTemplateDirective, descendants: true }, { propertyName: "dateHeaderTemplate", first: true, predicate: DateHeaderTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewBase, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.ViewContextService }, { type: i3.ViewStateService }]; }, propDecorators: { timeSlotTemplate: [{
+                type: ContentChild,
+                args: [TimeSlotTemplateDirective, { static: false }]
+            }], dateHeaderTemplate: [{
+                type: ContentChild,
+                args: [DateHeaderTemplateDirective, { static: false }]
+            }], showWorkHours: [{
+                type: Input
+            }], eventHeight: [{
+                type: Input
+            }], startTime: [{
+                type: Input
+            }], scrollTime: [{
+                type: Input
+            }], endTime: [{
+                type: Input
+            }], workDayStart: [{
+                type: Input
+            }], workDayEnd: [{
+                type: Input
+            }], workWeekStart: [{
+                type: Input
+            }], workWeekEnd: [{
+                type: Input
+            }], slotDuration: [{
+                type: Input
+            }], slotDivisions: [{
+                type: Input
+            }], currentTimeMarker: [{
+                type: Input
+            }], highlightOngoingEvents: [{
+                type: Input
+            }] } });

package/esm2015/views/day-time/day-time-view-item.component.js

@@ -0,0 +1,119 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, Inject, LOCALE_ID } from '@angular/core';
+import { toLocalDate } from '@progress/kendo-date-math';
+import { BaseViewItem } from '../view-items/base-view-item';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-intl";
+import * as i2 from "../day-time/day-time-slot.service";
+import * as i3 from "@progress/kendo-angular-l10n";
+import * as i4 from "../../navigation";
+import * as i5 from "@angular/common";
+/**
+ * @hidden
+ */
+export class DayTimeViewItemComponent extends BaseViewItem {
+    constructor(intlService, slotService, localization, focusService, element, renderer, localeId) {
+        super(slotService, localization, focusService, element, renderer, localeId);
+        this.intlService = intlService;
+        this.localeId = localeId;
+    }
+    get eventTime() {
+        return this.intlService.format('{0:t}–{1:t}', toLocalDate(this.item.startTime), toLocalDate(this.item.endTime));
+    }
+}
+DayTimeViewItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewItemComponent, deps: [{ token: i1.IntlService }, { token: i2.DayTimeSlotService }, { token: i3.LocalizationService }, { token: i4.FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
+DayTimeViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: { vertical: "vertical", isAllDay: "isAllDay" }, usesInheritance: true, ngImport: i0, template: `
+        <span class="k-event-actions">
+            <span class="k-icon k-i-arrow-60-left" *ngIf="item.tail && !vertical"></span>
+            <span class="k-icon k-i-reload" *ngIf="isRecurrence"></span>
+            <span class="k-icon k-i-non-recurrence" *ngIf="isRecurrenceException"></span>
+        </span>
+        <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
+            [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: resources }">
+        </ng-container>
+        <div *ngIf="!eventTemplate" [attr.title]="eventTitle">
+            <div class="k-event-template k-event-time" *ngIf="!isAllDay">{{ eventTime }}</div>
+            <div class="k-event-template" aria-hidden="true">{{ item.event.title }}</div>
+        </div>
+
+        <span class="k-event-actions">
+            <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
+                <span class="k-icon k-i-close"></span>
+            </span>
+            <span class="k-icon k-i-arrow-60-right" *ngIf="item.head && !vertical"></span>
+        </span>
+
+        <span class="k-event-top-actions" *ngIf="item.tail && vertical">
+            <span class="k-icon k-i-arrow-60-up"></span>
+        </span>
+
+        <span class="k-event-bottom-actions" *ngIf="item.head && vertical">
+            <span class="k-icon k-i-arrow-60-down"></span>
+        </span>
+
+        <ng-container *ngIf="resizable && vertical">
+            <span class="k-resize-handle k-resize-n" *ngIf="!item.tail"></span>
+            <span class="k-resize-handle k-resize-s" *ngIf="!item.head"></span>
+        </ng-container>
+
+        <ng-container *ngIf="resizable && !vertical">
+            <span class="k-resize-handle k-resize-w"></span>
+            <span class="k-resize-handle k-resize-e"></span>
+        </ng-container>
+    `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[dayTimeViewItem]',
+                    template: `
+        <span class="k-event-actions">
+            <span class="k-icon k-i-arrow-60-left" *ngIf="item.tail && !vertical"></span>
+            <span class="k-icon k-i-reload" *ngIf="isRecurrence"></span>
+            <span class="k-icon k-i-non-recurrence" *ngIf="isRecurrenceException"></span>
+        </span>
+        <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
+            [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: resources }">
+        </ng-container>
+        <div *ngIf="!eventTemplate" [attr.title]="eventTitle">
+            <div class="k-event-template k-event-time" *ngIf="!isAllDay">{{ eventTime }}</div>
+            <div class="k-event-template" aria-hidden="true">{{ item.event.title }}</div>
+        </div>
+
+        <span class="k-event-actions">
+            <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
+                <span class="k-icon k-i-close"></span>
+            </span>
+            <span class="k-icon k-i-arrow-60-right" *ngIf="item.head && !vertical"></span>
+        </span>
+
+        <span class="k-event-top-actions" *ngIf="item.tail && vertical">
+            <span class="k-icon k-i-arrow-60-up"></span>
+        </span>
+
+        <span class="k-event-bottom-actions" *ngIf="item.head && vertical">
+            <span class="k-icon k-i-arrow-60-down"></span>
+        </span>
+
+        <ng-container *ngIf="resizable && vertical">
+            <span class="k-resize-handle k-resize-n" *ngIf="!item.tail"></span>
+            <span class="k-resize-handle k-resize-s" *ngIf="!item.head"></span>
+        </ng-container>
+
+        <ng-container *ngIf="resizable && !vertical">
+            <span class="k-resize-handle k-resize-w"></span>
+            <span class="k-resize-handle k-resize-e"></span>
+        </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: i2.DayTimeSlotService }, { type: i3.LocalizationService }, { type: i4.FocusService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }]; }, propDecorators: { vertical: [{
+                type: Input
+            }], isAllDay: [{
+                type: Input
+            }] } });

package/esm2015/views/day-time/day-time-view.component.js

@@ -0,0 +1,384 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Input, ViewChildren, Component } from '@angular/core';
+import { isChanged, isDocumentAvailable } from '@progress/kendo-angular-common';
+import { addDays, getDate, ZonedDate } from '@progress/kendo-date-math';
+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, 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';
+import * as i0 from "@angular/core";
+import * as i1 from "../view-context.service";
+import * as i2 from "../view-state.service";
+import * as i3 from "@progress/kendo-angular-intl";
+import * as i4 from "./day-time-slot.service";
+import * as i5 from "../../pdf/pdf.service";
+import * as i6 from "@progress/kendo-angular-l10n";
+const getStartDate = date => getDate(date);
+const getEndDate = (start, numberOfDays) => getDate(addDays(start, numberOfDays || 1));
+const getNextDate = (date, count, numberOfDays) => getDate(addDays(date, numberOfDays * count));
+/**
+ * @hidden
+ */
+export class DayTimeViewComponent extends BaseView {
+    constructor(changeDetector, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization) {
+        super(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, changeDetector);
+        this.changeDetector = changeDetector;
+        this.numberOfDays = 1;
+        this.startTime = '00:00';
+        this.endTime = '00:00';
+        this.workDayStart = '08:00';
+        this.workDayEnd = '17:00';
+        this.workWeekStart = 1;
+        this.workWeekEnd = 5;
+        this.slotDuration = 60;
+        this.slotDivisions = 2;
+        this.showWorkHours = false;
+        this.getStartDate = getStartDate;
+        this.getEndDate = getEndDate;
+        this.getNextDate = getNextDate;
+        this.daySlots = [];
+        this.timeSlots = [];
+        this.resizeHintFormat = 't';
+        this.showCurrentTime = false;
+        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`;
+    }
+    get timeSlotTemplateRef() {
+        return this.timeSlotTemplate || (this.schedulerTimeSlotTemplate || {}).templateRef;
+    }
+    get dateHeaderTemplateRef() {
+        return this.dateHeaderTemplate || (this.schedulerDateHeaderTemplate || {}).templateRef;
+    }
+    ngOnChanges(changes) {
+        if (changes.startTime || changes.endTime || changes.showWorkHours || changes.workDayStart || changes.workDayEnd ||
+            changes.workWeekStart || changes.workWeekEnd || changes.slotDivisions || changes.slotDuration) {
+            this.timeSlots = this.createTimeSlots();
+            this.initWorkDay();
+            this.changes.next(null);
+        }
+        if (isChanged('currentTimeMarker', changes)) {
+            this.showCurrentTime = this.enableCurrentTime();
+        }
+        if (isChanged('weekStart', changes)) {
+            this.onSelectDate(this.selectedDate);
+        }
+        super.ngOnChanges(changes);
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        clearTimeout(this.currentTimeTimeout);
+        clearTimeout(this.ongoingEventsTimeout);
+    }
+    verticalItem(leafIndex, resourceIndex) {
+        const data = this.verticalResources[resourceIndex].data || [];
+        const resources = this.verticalResources;
+        let result = 1;
+        for (let idx = resourceIndex + 1; idx < resources.length; idx++) {
+            result *= ((resources[idx].data || []).length || 1);
+        }
+        return data[(leafIndex / result) % data.length];
+    }
+    timeSlotClass(slot, date, resourceIndex) {
+        if (this.slotClass) {
+            return this.slotClass({
+                start: dateWithTime(date, slot.start),
+                end: dateWithTime(date, slot.end),
+                resources: this.resourcesByIndex(resourceIndex),
+                isAllDay: false
+            });
+        }
+    }
+    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') {
+            const scrollDate = this.intl.parseDate(time);
+            if (!scrollDate) {
+                return;
+            }
+            date = toUTCTime(this.daySlots[0].start, scrollDate);
+        }
+        else {
+            date = toUTCDateTime(time);
+        }
+        const position = this.slotService.timePosition(date, 0, this.verticalTime);
+        if (isNumber(position)) {
+            const contentElement = this.content.nativeElement;
+            contentElement[this.verticalTime ? 'scrollTop' : 'scrollLeft'] =
+                (this.localization.rtl && !this.verticalTime) ? rtlScrollPosition(contentElement, position) : position;
+        }
+    }
+    optionsChange(options) {
+        this.schedulerTimeSlotTemplate = options.timeSlotTemplate;
+        this.schedulerDateHeaderTemplate = options.dateHeaderTemplate;
+        super.optionsChange(options);
+    }
+    updateView() {
+        super.updateView();
+        this.updateCurrentTime();
+        this.updateOngoingEvents();
+        if (this.initialUpdate) {
+            this.scrollToTime();
+            this.initialUpdate = false;
+        }
+    }
+    enableCurrentTime() {
+        if (!this.currentTimeMarker || this.currentTimeMarker.enabled === false || !this.selectedDate) {
+            return false;
+        }
+        const dateRange = this.dateRange();
+        this.currentDate = ZonedDate.fromLocalDate(this.currentTime(), this.currentTimeMarker.localTimezone !== false ? '' : this.timezone);
+        const localTime = this.currentDate.toLocalDate();
+        const invariantTime = toInvariantTime(localTime);
+        const timeSlots = this.timeSlots;
+        const inDateRange = dateInRange(localTime, dateRange.start, dateRange.end);
+        const inTimeRange = timeSlots.length && dateInRange(invariantTime, timeSlots[0].start, timeSlots[timeSlots.length - 1].end);
+        return inDateRange && inTimeRange;
+    }
+    currentTime() {
+        return new Date();
+    }
+    updateCurrentTime() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        const enable = this.enableCurrentTime();
+        if (enable !== this.showCurrentTime) {
+            this.showCurrentTime = enable;
+            this.changeDetector.detectChanges();
+        }
+        clearTimeout(this.currentTimeTimeout);
+        if (enable) {
+            this.zone.runOutsideAngular(() => {
+                this.currentTimeTimeout = setTimeout(this.updateCurrentTime, this.currentTimeMarker.updateInterval || MS_PER_MINUTE);
+            });
+            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();
+            const currentTimeArrows = this.currentTimeArrows ? this.currentTimeArrows.toArray() : [];
+            const arrowOffset = currentTimeArrows.length ? this.currentTimeArrowOffset() : 0;
+            const arrowMid = currentTimeArrows.length ? (currentTimeArrows[0].nativeElement.offsetHeight / 2) : 4;
+            const tableWidth = this.contentTable.nativeElement.clientWidth;
+            const tableHeight = this.contentTable.nativeElement.clientHeight;
+            const vertical = this.verticalTime;
+            this.currentTimeElements.forEach((element, index) => {
+                const position = this.slotService.timePosition(date, index, vertical);
+                if (position !== undefined) {
+                    const line = element.nativeElement;
+                    if (currentTimeArrows[index]) {
+                        const arrow = currentTimeArrows[index].nativeElement;
+                        const origin = vertical ? arrowOffset : position - arrowMid;
+                        setCoordinates(arrow, {
+                            top: vertical ? position - arrowMid : arrowOffset,
+                            left: origin,
+                            right: origin
+                        });
+                    }
+                    const origin = vertical ? 0 : position;
+                    setCoordinates(line, {
+                        top: vertical ? position : 0,
+                        left: origin,
+                        right: origin,
+                        width: vertical ? tableWidth : 1,
+                        height: vertical ? 1 : tableHeight
+                    });
+                }
+            });
+        }
+    }
+    bindEvents() {
+        super.bindEvents();
+        this.zone.runOutsideAngular(() => {
+            this.subs.add(fromClick(this.headerWrap.nativeElement)
+                .subscribe(e => this.onHeaderClick(e)));
+            this.subs.add(fromEvent(this.headerWrap.nativeElement, 'contextmenu')
+                .subscribe(e => this.onClick(e)));
+            this.subs.add(fromDoubleClick(this.headerWrap.nativeElement)
+                .subscribe(e => this.onClick(e, 'dblclick')));
+        });
+    }
+    onHeaderClick(e) {
+        this.onClick(e);
+        if (this.daySlots.length <= 1) {
+            return;
+        }
+        const daySlotIndex = e.target.getAttribute('data-dayslot-index');
+        if (daySlotIndex) {
+            const slot = this.daySlots[parseInt(daySlotIndex, 10)];
+            this.zone.run(() => {
+                this.viewState.navigateTo({ viewName: 'day', date: slot.start });
+            });
+        }
+    }
+    slotByIndex(slotIndex, args) {
+        return this.slotService.slotByIndex(slotIndex, args.target.hasAttribute('data-day-slot'));
+    }
+    onSelectDate(date) {
+        this.selectedDate = date;
+        this.daySlots = this.createDaySlots();
+        this.showCurrentTime = this.enableCurrentTime();
+        this.viewState.notifyDateRange(this.dateRange());
+    }
+    onAction(e) {
+        const now = getDate(this.selectedDate);
+        if (e.type === 'next') {
+            const next = this.getNextDate(now, 1, this.numberOfDays);
+            if (this.isInRange(next)) {
+                this.viewState.notifyNextDate(next);
+            }
+        }
+        if (e.type === 'prev') {
+            const next = this.getNextDate(now, -1, this.numberOfDays);
+            if (this.isInRange(next)) {
+                this.viewState.notifyNextDate(next);
+            }
+        }
+        if (e.type === 'scroll-time') {
+            this.scrollToTime(e.time);
+        }
+    }
+    dateRange(date = this.selectedDate) {
+        const start = this.getStartDate(date);
+        const end = this.getEndDate(start, this.numberOfDays);
+        const rangeEnd = this.getEndDate(start, this.numberOfDays - 1);
+        const text = this.intl.format(this.selectedDateFormat, start, rangeEnd);
+        const shortText = this.intl.format(this.selectedShortDateFormat, start, rangeEnd);
+        return { start, end, text, shortText };
+    }
+    createDaySlots() {
+        let current = this.getStartDate(this.selectedDate);
+        const end = this.getEndDate(current, this.numberOfDays);
+        const dates = [];
+        while (current < end) {
+            const next = addDays(current, 1);
+            dates.push({
+                start: current,
+                end: next
+            });
+            current = next;
+        }
+        return dates;
+    }
+    createTimeSlots() {
+        return createTimeSlots(this.intl, {
+            showWorkHours: this.showWorkHours,
+            startTime: this.startTime,
+            endTime: this.endTime,
+            workDayStart: this.workDayStart,
+            workDayEnd: this.workDayEnd,
+            slotDivisions: this.slotDivisions,
+            slotDuration: this.slotDuration
+        });
+    }
+    initWorkDay() {
+        const startDate = this.intl.parseDate(this.workDayStart);
+        this.workDayStartTime = toInvariantTime(startDate);
+        const endDate = this.intl.parseDate(this.workDayEnd);
+        if (endDate <= startDate) {
+            this.workDayEndTime = addDays(MIDNIGHT_INVARIANT, 1);
+        }
+        else {
+            this.workDayEndTime = toInvariantTime(endDate);
+        }
+    }
+    slotByPosition(x, y, container) {
+        const isDaySlot = container ? hasClasses(container.parentNode, 'k-scheduler-header-wrap') : y < 0;
+        return this.slotService.slotByPosition(x, y, isDaySlot, Boolean(this.verticalResources.length));
+    }
+    slotFields(slot) {
+        const fields = super.slotFields(slot);
+        if (slot.isDaySlot) {
+            fields.isAllDay = true;
+        }
+        else {
+            fields.start = this.convertDate(slot.start);
+            fields.end = this.convertDate(slot.end);
+        }
+        return fields;
+    }
+}
+DayTimeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ViewContextService }, { token: i2.ViewStateService }, { token: i3.IntlService }, { token: i4.DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i5.PDFService }, { token: i6.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DayTimeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DayTimeViewComponent, selector: "kendo-day-time-view", inputs: { timeSlotTemplate: "timeSlotTemplate", dateHeaderTemplate: "dateHeaderTemplate", numberOfDays: "numberOfDays", scrollTime: "scrollTime", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", slotDuration: "slotDuration", slotDivisions: "slotDivisions", showWorkHours: "showWorkHours", getStartDate: "getStartDate", getEndDate: "getEndDate", getNextDate: "getNextDate", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents" }, viewQueries: [{ propertyName: "currentTimeElements", predicate: ["currentTimeMarker"], descendants: true }, { propertyName: "eventElements", predicate: DayTimeViewItemComponent, descendants: true }, { propertyName: "currentTimeArrows", predicate: ["currentTimeArrow"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kendo-day-time-view', template: '' }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.ViewContextService }, { type: i2.ViewStateService }, { type: i3.IntlService }, { type: i4.DayTimeSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i5.PDFService }, { type: i6.LocalizationService }]; }, propDecorators: { timeSlotTemplate: [{
+                type: Input
+            }], dateHeaderTemplate: [{
+                type: Input
+            }], numberOfDays: [{
+                type: Input
+            }], scrollTime: [{
+                type: Input
+            }], startTime: [{
+                type: Input
+            }], endTime: [{
+                type: Input
+            }], workDayStart: [{
+                type: Input
+            }], workDayEnd: [{
+                type: Input
+            }], workWeekStart: [{
+                type: Input
+            }], workWeekEnd: [{
+                type: Input
+            }], slotDuration: [{
+                type: Input
+            }], slotDivisions: [{
+                type: Input
+            }], showWorkHours: [{
+                type: Input
+            }], getStartDate: [{
+                type: Input
+            }], getEndDate: [{
+                type: Input
+            }], getNextDate: [{
+                type: Input
+            }], currentTimeMarker: [{
+                type: Input
+            }], highlightOngoingEvents: [{
+                type: Input
+            }], currentTimeElements: [{
+                type: ViewChildren,
+                args: ['currentTimeMarker']
+            }], eventElements: [{
+                type: ViewChildren,
+                args: [DayTimeViewItemComponent]
+            }], currentTimeArrows: [{
+                type: ViewChildren,
+                args: ['currentTimeArrow']
+            }] } });