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

package/esm2015/views/timeline/timeline-multi-day-view.component.js

@@ -0,0 +1,455 @@
+/**-----------------------------------------------------------------------------------------
+* 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, ViewChildren } from '@angular/core';
+import { DayTimeSlotService } from '../day-time/day-time-slot.service';
+import { createTasks } from './utils';
+import { toPx } from '../utils';
+import { DayTimeViewComponent } from '../day-time/day-time-view.component';
+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";
+import * as i4 from "@progress/kendo-angular-intl";
+import * as i5 from "../day-time/day-time-slot.service";
+import * as i6 from "../../pdf/pdf.service";
+import * as i7 from "../day-time/day-time-view-item.component";
+import * as i8 from "../common/hint-container.component";
+import * as i9 from "../common/resize-hint.component";
+import * as i10 from "@angular/common";
+import * as i11 from "../day-time/event-slot.directive";
+import * as i12 from "../../navigation/focusable.directive";
+import * as i13 from "../common/resource-iterator.pipe";
+import * as i14 from "../common/repeat.pipe";
+/**
+ * @hidden
+ */
+export class TimelineMultiDayViewComponent extends DayTimeViewComponent {
+    constructor(localization, changeDetector, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService) {
+        super(changeDetector, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization);
+        this.name = 'timeline';
+        this.columnWidth = 100;
+        this.viewName = 'timeline';
+        this.verticalTime = false;
+    }
+    get classNames() {
+        return `k-scheduler-${this.viewName}-view`;
+    }
+    ngOnChanges(changes) {
+        if (changes.columnWidth) {
+            this.changes.next(null);
+        }
+        super.ngOnChanges(changes);
+    }
+    reflow() {
+        const slotService = this.slotService;
+        this.updateContentHeight();
+        slotService.containerSize = this.content.nativeElement.scrollWidth;
+        const verticalResourceRows = this.verticalResources.length ? this.verticalResourceRows.toArray() : [];
+        slotService.layoutTimeline(this.eventHeight, verticalResourceRows);
+        if (verticalResourceRows.length) {
+            slotService.forEachGroup((group, index) => {
+                verticalResourceRows[index].nativeElement.style.height = `${group.timeRanges[0].slots[0].height}px`;
+            });
+        }
+        this.syncTables();
+    }
+    get allEventsMessage() {
+        return this.localization.get('allEvents');
+    }
+    get slotsCount() {
+        const resources = this.horizontalResources;
+        let result = this.daySlots.length * this.timeSlots.length;
+        for (let idx = 0; idx < resources.length; idx++) {
+            result *= (resources[idx].data || []).length || 1;
+        }
+        return result;
+    }
+    timeColspan(index) {
+        const timeSlots = this.timeSlots.length;
+        const remainder = timeSlots % this.slotDivisions;
+        return remainder === 0 || (index < timeSlots - remainder) ? this.slotDivisions : 1;
+    }
+    horizontalColspan(resourceIndex) {
+        const resources = this.horizontalResources;
+        let result = this.daySlots.length * this.timeSlots.length;
+        for (let idx = resourceIndex + 1; idx < resources.length; idx++) {
+            result *= (resources[idx].data || []).length || 1;
+        }
+        return result;
+    }
+    verticalRowspan(resourceIndex) {
+        const resources = this.verticalResources;
+        let result = 1;
+        for (let idx = resourceIndex + 1; idx < resources.length; idx++) {
+            result *= (resources[idx].data || []).length || 1;
+        }
+        return result;
+    }
+    createTasks(items, dateRange) {
+        return createTasks(dateRange.start, dateRange.end, items);
+    }
+    onTasksChange() {
+        this.items.next(this.tasks);
+    }
+    dragRanges(slot) {
+        return this.slotService.dragRanges(slot, this.dragging.offset, true);
+    }
+    dragHintSize(firstSlot, lastSlot) {
+        return {
+            width: toPx(lastSlot.rect.left - firstSlot.rect.left + lastSlot.rect.width),
+            height: toPx(firstSlot.height)
+        };
+    }
+    updateResizeHints(ranges, start, end) {
+        const last = ranges[ranges.length - 1];
+        super.updateResizeHints([[ranges[0][0], last[last.length - 1]]], start, end);
+    }
+    pdfWidth() {
+        const contentWidth = this.content.nativeElement.scrollWidth;
+        const timesWidth = this.times.nativeElement.offsetWidth;
+        return contentWidth + timesWidth;
+    }
+    currentTimeArrowOffset() {
+        return this.headerWrap.nativeElement.querySelector('tr:last-child').offsetTop;
+    }
+}
+TimelineMultiDayViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineMultiDayViewComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.ViewContextService }, { token: i3.ViewStateService }, { token: i4.IntlService }, { token: i5.DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i6.PDFService }], target: i0.ɵɵFactoryTarget.Component });
+TimelineMultiDayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimelineMultiDayViewComponent, selector: "timeline-multi-day-view", inputs: { name: "name", columnWidth: "columnWidth", viewName: "viewName" }, providers: [
+        DayTimeSlotService
+    ], viewQueries: [{ propertyName: "verticalResourceRows", predicate: ["verticalResourceRows"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <div class="k-scheduler-layout k-scheduler-flex-layout" [ngClass]="classNames">
+            <div class="k-scheduler-pane">
+                <div class="k-scheduler-times" #timesHeader>
+                    <table class="k-scheduler-table" aria-hidden="true">
+                        <tr><th></th></tr>
+                        <tr><th class="k-slot-cell"></th></tr>
+                        <tr *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
+                            <th></th>
+                        </tr>
+                    </table>
+                </div>
+                <div class="k-scheduler-header k-state-default" #header >
+                    <div class="k-scheduler-header-wrap" #headerWrap>
+                        <ng-container *ngIf="showCurrentTime">
+                            <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
+                                #currentTimeArrow class="k-current-time k-current-time-arrow-down">
+                            </div>
+                        </ng-container>
+                        <table class="k-scheduler-table" aria-hidden="true">
+                            <colgroup>
+                                <col *ngFor="let slotIndex of slotsCount | repeat; trackBy: itemIndex;" [ngStyle]="{ 'width.px': columnWidth }" />
+                            </colgroup>
+                            <tr *ngFor="let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex;">
+                                <th *ngFor="let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex;"
+                                    class="k-slot-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
+                                    <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(item, resource.textField) }}</ng-container>
+                                    <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
+                                        [ngTemplateOutletContext]="{ resource: item }"></ng-container>
+                                </th>
+                            </tr>
+                             <tr>
+                                 <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;">
+                                     <ng-container *ngFor="let daySlot of daySlots; let index = index; trackBy: itemIndex;">
+                                         <th [attr.colspan]="timeSlots.length" class="k-slot-cell">
+                                             <span *ngIf="!dateHeaderTemplateRef" class="k-link" [ngClass]="{ 'k-nav-day': numberOfDays > 1 }" [attr.data-dayslot-index]="index">{{ daySlot.start | kendoDate: 'm'}}</span>
+                                             <ng-container *ngIf="dateHeaderTemplateRef" [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: daySlot.start }"></ng-container>
+                                         </th>
+                                     </ng-container>
+                                 </ng-container>
+                             </tr>
+                             <tr>
+                                 <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;">
+                                    <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
+                                        <ng-container *ngFor="let timeSlot of timeSlots; let index = index; trackBy: itemIndex;">
+                                            <th *ngIf="timeSlot.isMajor" [attr.colspan]="timeColspan(index)" >{{ timeSlot.start | kendoDate: 't' }}</th>
+                                        </ng-container>
+                                    </ng-container>
+                                 </ng-container>
+                             </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <div class="k-scheduler-pane">
+                <div class="k-scheduler-times" #times>
+                    <table class="k-scheduler-table" #timesTable aria-hidden="true">
+                        <tr *ngIf="!verticalResources.length">
+                            <th rowspan="1" #titleCell>
+                                {{ allEventsMessage }}
+                            </th>
+                        </tr>
+                        <ng-container *ngIf="verticalResources.length">
+                            <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;">
+                                <tr #verticalResourceRows>
+                                    <ng-container *ngFor="let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex;">
+                                        <th *ngIf="verticalItem(leafIndex, resourceIndex)" [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell">
+                                            <div>
+                                                <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>
+                                                <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
+                                                    [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
+                                            </div>
+                                        </th>
+                                    </ng-container>
+                                </tr>
+                            </ng-container>
+                        </ng-container>
+                    </table>
+                </div>
+                <div class="k-scheduler-content" #content>
+                    <ng-container *ngIf="showCurrentTime">
+                        <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
+                            class="k-current-time" #currentTimeMarker>
+                        </div>
+                    </ng-container>
+                    <table class="k-scheduler-table k-user-select-none" #contentTable role="presentation">
+                        <colgroup>
+                            <col *ngFor="let slotIndex of slotsCount | repeat; trackBy: itemIndex;" [ngStyle]="{ 'width.px': columnWidth }" />
+                        </colgroup>
+                        <tr *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;">
+                            <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;">
+                                <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
+                                    <td *ngFor="let slot of timeSlots; let index = index; trackBy: itemIndex;"
+                                            [ngClass]="timeSlotClass(slot, daySlot.start, verticalResources.length ? verticalIndex : horizontalIndex)"
+                                            timeSlot #timeSlot="timeSlot"
+                                            [date]="daySlot.start"
+                                            [invariantStart]="slot.start"
+                                            [invariantEnd]="slot.end"
+                                            [workDayStart]="workDayStartTime"
+                                            [workDayEnd]="workDayEndTime"
+                                            [workWeekStart]="workWeekStart"
+                                            [workWeekEnd]="workWeekEnd"
+                                            selectableSlot
+                                            [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
+                                            [class.k-state-selected]="isSlotSelected({
+                                                start: toPlainDateTime(daySlot.start, slot.start),
+                                                end: toPlainDateTime(daySlot.start, slot.end),
+                                                isAllDay: false,
+                                                resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
+                                            })"
+                                    >
+                                        <ng-container *ngIf="timeSlotTemplateRef" [ngTemplateOutlet]="timeSlotTemplateRef"
+                                            [ngTemplateOutletContext]="{ date: timeSlot.start, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }">
+                                        </ng-container>
+                                    </td>
+                                </ng-container>
+                            </ng-container>
+                        </tr>
+                    </table>
+                    <ng-container *ngFor="let item of items | async; trackBy: itemIndex;">
+                        <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
+                            [ngClass]="getEventClasses(item, itemResource.resources)"
+                            [ngStyle]="getEventStyles(item, itemResource)"
+                            [kendoSchedulerFocusIndex]="itemResource.leafIdx"
+                            dayTimeViewItem
+                                [editable]="editable"
+                                [item]="item"
+                                [index]="item.index"
+                                [rangeIndex]="item.rangeIndex"
+                                [eventTemplate]="eventTemplateRef"
+                                [resources]="itemResource.resources"
+                                [resourceIndex]="itemResource.leafIdx">
+                        </div>
+                    </ng-container>
+                    <kendo-hint-container #hintContainer>
+                        <ng-template>
+                            <div *ngFor="let hint of dragHints; trackBy: itemIndex;"
+                                class="k-event-drag-hint"
+                                dayTimeViewItem
+                                    [ngStyle]="hint.style"
+                                    [ngClass]="hint.class"
+                                    [dragHint]="true"
+                                    [eventTemplate]="eventTemplateRef"
+                                    [item]="hint.item"
+                                    [resources]="hint.resources">
+                            </div>
+                            <div *ngIf="resizeHints && resizeHints.length"
+                                kendoResizeHint
+                                [hint]="resizeHints[0]"
+                                [ngClass]="resizeHints[0].class"
+                                [format]="resizeHintFormat">
+                            </div>
+                        </ng-template>
+                    </kendo-hint-container>
+                </div>
+            </div>
+        </div>
+    `, isInline: true, components: [{ type: i7.DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: ["vertical", "isAllDay"] }, { type: i8.HintContainerComponent, selector: "kendo-hint-container" }, { type: i9.ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }], directives: [{ type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i11.TimeSlotDirective, selector: "[timeSlot]", inputs: ["invariantStart", "invariantEnd", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "date"], exportAs: ["timeSlot"] }, { type: i12.FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex"] }], pipes: { "resourceIterator": i13.ResourceIteratorPipe, "repeat": i14.RepeatPipe, "kendoDate": i4.DatePipe, "async": i10.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineMultiDayViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'timeline-multi-day-view',
+                    providers: [
+                        DayTimeSlotService
+                    ],
+                    template: `
+        <div class="k-scheduler-layout k-scheduler-flex-layout" [ngClass]="classNames">
+            <div class="k-scheduler-pane">
+                <div class="k-scheduler-times" #timesHeader>
+                    <table class="k-scheduler-table" aria-hidden="true">
+                        <tr><th></th></tr>
+                        <tr><th class="k-slot-cell"></th></tr>
+                        <tr *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
+                            <th></th>
+                        </tr>
+                    </table>
+                </div>
+                <div class="k-scheduler-header k-state-default" #header >
+                    <div class="k-scheduler-header-wrap" #headerWrap>
+                        <ng-container *ngIf="showCurrentTime">
+                            <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
+                                #currentTimeArrow class="k-current-time k-current-time-arrow-down">
+                            </div>
+                        </ng-container>
+                        <table class="k-scheduler-table" aria-hidden="true">
+                            <colgroup>
+                                <col *ngFor="let slotIndex of slotsCount | repeat; trackBy: itemIndex;" [ngStyle]="{ 'width.px': columnWidth }" />
+                            </colgroup>
+                            <tr *ngFor="let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex;">
+                                <th *ngFor="let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex;"
+                                    class="k-slot-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
+                                    <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(item, resource.textField) }}</ng-container>
+                                    <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
+                                        [ngTemplateOutletContext]="{ resource: item }"></ng-container>
+                                </th>
+                            </tr>
+                             <tr>
+                                 <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;">
+                                     <ng-container *ngFor="let daySlot of daySlots; let index = index; trackBy: itemIndex;">
+                                         <th [attr.colspan]="timeSlots.length" class="k-slot-cell">
+                                             <span *ngIf="!dateHeaderTemplateRef" class="k-link" [ngClass]="{ 'k-nav-day': numberOfDays > 1 }" [attr.data-dayslot-index]="index">{{ daySlot.start | kendoDate: 'm'}}</span>
+                                             <ng-container *ngIf="dateHeaderTemplateRef" [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: daySlot.start }"></ng-container>
+                                         </th>
+                                     </ng-container>
+                                 </ng-container>
+                             </tr>
+                             <tr>
+                                 <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;">
+                                    <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
+                                        <ng-container *ngFor="let timeSlot of timeSlots; let index = index; trackBy: itemIndex;">
+                                            <th *ngIf="timeSlot.isMajor" [attr.colspan]="timeColspan(index)" >{{ timeSlot.start | kendoDate: 't' }}</th>
+                                        </ng-container>
+                                    </ng-container>
+                                 </ng-container>
+                             </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <div class="k-scheduler-pane">
+                <div class="k-scheduler-times" #times>
+                    <table class="k-scheduler-table" #timesTable aria-hidden="true">
+                        <tr *ngIf="!verticalResources.length">
+                            <th rowspan="1" #titleCell>
+                                {{ allEventsMessage }}
+                            </th>
+                        </tr>
+                        <ng-container *ngIf="verticalResources.length">
+                            <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;">
+                                <tr #verticalResourceRows>
+                                    <ng-container *ngFor="let resource of verticalResources; let resourceIndex = index; trackBy: itemIndex;">
+                                        <th *ngIf="verticalItem(leafIndex, resourceIndex)" [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell">
+                                            <div>
+                                                <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}</ng-container>
+                                                <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef"
+                                                    [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
+                                            </div>
+                                        </th>
+                                    </ng-container>
+                                </tr>
+                            </ng-container>
+                        </ng-container>
+                    </table>
+                </div>
+                <div class="k-scheduler-content" #content>
+                    <ng-container *ngIf="showCurrentTime">
+                        <div *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex;"
+                            class="k-current-time" #currentTimeMarker>
+                        </div>
+                    </ng-container>
+                    <table class="k-scheduler-table k-user-select-none" #contentTable role="presentation">
+                        <colgroup>
+                            <col *ngFor="let slotIndex of slotsCount | repeat; trackBy: itemIndex;" [ngStyle]="{ 'width.px': columnWidth }" />
+                        </colgroup>
+                        <tr *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;">
+                            <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;">
+                                <ng-container *ngFor="let daySlot of daySlots; let rangeIndex = index; trackBy: itemIndex;">
+                                    <td *ngFor="let slot of timeSlots; let index = index; trackBy: itemIndex;"
+                                            [ngClass]="timeSlotClass(slot, daySlot.start, verticalResources.length ? verticalIndex : horizontalIndex)"
+                                            timeSlot #timeSlot="timeSlot"
+                                            [date]="daySlot.start"
+                                            [invariantStart]="slot.start"
+                                            [invariantEnd]="slot.end"
+                                            [workDayStart]="workDayStartTime"
+                                            [workDayEnd]="workDayEndTime"
+                                            [workWeekStart]="workWeekStart"
+                                            [workWeekEnd]="workWeekEnd"
+                                            selectableSlot
+                                            [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
+                                            [class.k-state-selected]="isSlotSelected({
+                                                start: toPlainDateTime(daySlot.start, slot.start),
+                                                end: toPlainDateTime(daySlot.start, slot.end),
+                                                isAllDay: false,
+                                                resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
+                                            })"
+                                    >
+                                        <ng-container *ngIf="timeSlotTemplateRef" [ngTemplateOutlet]="timeSlotTemplateRef"
+                                            [ngTemplateOutletContext]="{ date: timeSlot.start, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }">
+                                        </ng-container>
+                                    </td>
+                                </ng-container>
+                            </ng-container>
+                        </tr>
+                    </table>
+                    <ng-container *ngFor="let item of items | async; trackBy: itemIndex;">
+                        <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
+                            [ngClass]="getEventClasses(item, itemResource.resources)"
+                            [ngStyle]="getEventStyles(item, itemResource)"
+                            [kendoSchedulerFocusIndex]="itemResource.leafIdx"
+                            dayTimeViewItem
+                                [editable]="editable"
+                                [item]="item"
+                                [index]="item.index"
+                                [rangeIndex]="item.rangeIndex"
+                                [eventTemplate]="eventTemplateRef"
+                                [resources]="itemResource.resources"
+                                [resourceIndex]="itemResource.leafIdx">
+                        </div>
+                    </ng-container>
+                    <kendo-hint-container #hintContainer>
+                        <ng-template>
+                            <div *ngFor="let hint of dragHints; trackBy: itemIndex;"
+                                class="k-event-drag-hint"
+                                dayTimeViewItem
+                                    [ngStyle]="hint.style"
+                                    [ngClass]="hint.class"
+                                    [dragHint]="true"
+                                    [eventTemplate]="eventTemplateRef"
+                                    [item]="hint.item"
+                                    [resources]="hint.resources">
+                            </div>
+                            <div *ngIf="resizeHints && resizeHints.length"
+                                kendoResizeHint
+                                [hint]="resizeHints[0]"
+                                [ngClass]="resizeHints[0].class"
+                                [format]="resizeHintFormat">
+                            </div>
+                        </ng-template>
+                    </kendo-hint-container>
+                </div>
+            </div>
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.ViewContextService }, { type: i3.ViewStateService }, { type: i4.IntlService }, { type: i5.DayTimeSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i6.PDFService }]; }, propDecorators: { name: [{
+                type: Input
+            }], columnWidth: [{
+                type: Input
+            }], viewName: [{
+                type: Input
+            }], verticalResourceRows: [{
+                type: ViewChildren,
+                args: ['verticalResourceRows']
+            }] } });

package/esm2015/views/timeline/timeline-view.component.js

@@ -0,0 +1,127 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef, Input, ChangeDetectionStrategy } from '@angular/core';
+import { SchedulerView } from '../../types';
+import { TimelineBase } from './timeline-base';
+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";
+import * as i4 from "./timeline-multi-day-view.component";
+import * as i5 from "../common/view-footer.component";
+import * as i6 from "../common/work-hours-footer.directive";
+/**
+ * The component for rendering the **Timeline** view.
+ */
+export class TimelineViewComponent extends TimelineBase {
+    constructor(localization, changeDetector, viewContext, viewState) {
+        super(localization, changeDetector, viewContext, viewState);
+        /**
+         * The long-date format for displaying the
+         * selected date in the Scheduler toolbar.
+         * Defaults to `{0:D}`
+         * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
+         */
+        this.selectedDateFormat = '{0:D}';
+        /**
+         * The short-date format for displaying the
+         * selected date in the Scheduler toolbar.
+         * Defaults to `{0:D}`
+         * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
+         */
+        this.selectedShortDateFormat = '{0:d}';
+        /**
+         * The invariant name for this view (`timeline`).
+         */
+        this.name = 'timeline';
+    }
+    /**
+     * @hidden
+     */
+    get title() {
+        return this.localization.get('timelineViewTitle');
+    }
+}
+TimelineViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineViewComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.ViewContextService }, { token: i3.ViewStateService }], target: i0.ɵɵFactoryTarget.Component });
+TimelineViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimelineViewComponent, selector: "kendo-scheduler-timeline-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat" }, providers: [{
+            provide: SchedulerView,
+            useExisting: forwardRef(() => TimelineViewComponent)
+        }], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #content>
+            <timeline-multi-day-view
+                [name]="name"
+                [eventHeight]="viewEventHeight"
+                [columnWidth]="viewColumnWidth"
+                [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
+                [showWorkHours]="shouldShowWorkHours"
+                [scrollTime]="viewScrollTime"
+                [startTime]="viewStartTime"
+                [endTime]="viewEndTime"
+                [workDayStart]="viewWorkDayStart"
+                [workDayEnd]="viewWorkDayEnd"
+                [workWeekStart]="viewWorkWeekStart"
+                [workWeekEnd]="viewWorkWeekEnd"
+                [slotDuration]="viewSlotDuration"
+                [slotDivisions]="viewSlotDivisions"
+                [slotClass]="viewSlotClass"
+                [eventClass]="viewEventClass"
+                [eventStyles]="viewEventStyles"
+                [еventTemplate]="eventTemplate?.templateRef"
+                [groupHeaderTemplate]="groupHeaderTemplate?.templateRef"
+                [timeSlotTemplate]="timeSlotTemplate?.templateRef"
+                [dateHeaderTemplate]="dateHeaderTemplate?.templateRef"
+                [selectedDateFormat]="selectedDateFormat"
+                [selectedShortDateFormat]="selectedShortDateFormat">
+            </timeline-multi-day-view>
+            <div viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
+        </ng-template>
+    `, isInline: true, components: [{ type: i4.TimelineMultiDayViewComponent, selector: "timeline-multi-day-view", inputs: ["name", "columnWidth", "viewName"] }, { type: i5.ViewFooterComponent, selector: "[viewFooter]", inputs: ["items"], outputs: ["itemClick"] }], directives: [{ type: i6.WorkHoursFooterDirective, selector: "[kendoWorkHoursFooter]", inputs: ["showWorkHours"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'kendo-scheduler-timeline-view',
+                    providers: [{
+                            provide: SchedulerView,
+                            useExisting: forwardRef(() => TimelineViewComponent)
+                        }],
+                    template: `
+        <ng-template #content>
+            <timeline-multi-day-view
+                [name]="name"
+                [eventHeight]="viewEventHeight"
+                [columnWidth]="viewColumnWidth"
+                [currentTimeMarker]="viewCurrentTimeMarker"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
+                [showWorkHours]="shouldShowWorkHours"
+                [scrollTime]="viewScrollTime"
+                [startTime]="viewStartTime"
+                [endTime]="viewEndTime"
+                [workDayStart]="viewWorkDayStart"
+                [workDayEnd]="viewWorkDayEnd"
+                [workWeekStart]="viewWorkWeekStart"
+                [workWeekEnd]="viewWorkWeekEnd"
+                [slotDuration]="viewSlotDuration"
+                [slotDivisions]="viewSlotDivisions"
+                [slotClass]="viewSlotClass"
+                [eventClass]="viewEventClass"
+                [eventStyles]="viewEventStyles"
+                [еventTemplate]="eventTemplate?.templateRef"
+                [groupHeaderTemplate]="groupHeaderTemplate?.templateRef"
+                [timeSlotTemplate]="timeSlotTemplate?.templateRef"
+                [dateHeaderTemplate]="dateHeaderTemplate?.templateRef"
+                [selectedDateFormat]="selectedDateFormat"
+                [selectedShortDateFormat]="selectedShortDateFormat">
+            </timeline-multi-day-view>
+            <div viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.ViewContextService }, { type: i3.ViewStateService }]; }, propDecorators: { selectedDateFormat: [{
+                type: Input
+            }], selectedShortDateFormat: [{
+                type: Input
+            }] } });

package/esm2015/views/timeline/timeline-view.module.js

@@ -0,0 +1,49 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgModule } from '@angular/core';
+import { TimelineMultiDayViewComponent } from './timeline-multi-day-view.component';
+import { TimelineViewComponent } from './timeline-view.component';
+import { TimelineWeekViewComponent } from './timeline-week-view.component';
+import { TimelineMonthViewComponent } from './timeline-month-view.component';
+import { DayTimeModule } from '../day-time/day-time.module';
+import { ViewsSharedModule } from '../common/views-shared.module';
+import * as i0 from "@angular/core";
+const PUBLIC_DIRECTIVES = [
+    TimelineViewComponent,
+    TimelineWeekViewComponent,
+    TimelineMonthViewComponent
+];
+/**
+ * @hidden
+ */
+export class TimelineViewModule {
+}
+TimelineViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TimelineViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineViewModule, declarations: [TimelineViewComponent,
+        TimelineWeekViewComponent,
+        TimelineMonthViewComponent, TimelineMultiDayViewComponent], imports: [DayTimeModule,
+        ViewsSharedModule], exports: [TimelineViewComponent,
+        TimelineWeekViewComponent,
+        TimelineMonthViewComponent] });
+TimelineViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineViewModule, imports: [[
+            DayTimeModule,
+            ViewsSharedModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineViewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        DayTimeModule,
+                        ViewsSharedModule
+                    ],
+                    exports: [
+                        PUBLIC_DIRECTIVES
+                    ],
+                    declarations: [
+                        ...PUBLIC_DIRECTIVES,
+                        TimelineMultiDayViewComponent
+                    ]
+                }]
+        }] });