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

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

@@ -0,0 +1,762 @@
+/**-----------------------------------------------------------------------------------------
+* 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, ViewChild, ViewChildren } from '@angular/core';
+import { anyChanged, isChanged } from '@progress/kendo-angular-common';
+import { BehaviorSubject } from 'rxjs';
+import { DayTimeSlotService } from '../day-time/day-time-slot.service';
+import { createTasks, isMultiDay } from './utils';
+import { DayTimeViewComponent } from '../day-time/day-time-view.component';
+import { toPx, dateWithTime, elementOffset, toUTCTime, toUTCDate } from '../utils';
+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";
+/**
+ * @hidden
+ */
+export class MultiDayViewRendererComponent extends DayTimeViewComponent {
+    constructor(localization, viewContext, viewState, intl, slotService, zone, renderer, element, changeDetector, pdfService) {
+        super(changeDetector, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization);
+        this.name = 'day';
+        this.dateFormat = { skeleton: 'MEd' };
+        this.allDayResizeHintFormat = { skeleton: 'Md' };
+        this.allDayItems = new BehaviorSubject(null);
+    }
+    get allDaySlotTemplateRef() {
+        return this.allDaySlotTemplate || (this.schedulerAllDaySlotTemplate || {}).templateRef;
+    }
+    get allDayEventTemplateRef() {
+        return this.allDayEventTemplate || (this.schedulerAllDayEventTemplate || {}).templateRef;
+    }
+    get minorTimeHeaderTemplateRef() {
+        return this.minorTimeHeaderTemplate || (this.schedulerMinorTimeHeaderTemplate || {}).templateRef;
+    }
+    get majorTimeHeaderTemplateRef() {
+        return this.majorTimeHeaderTemplate || (this.schedulerMajorTimeHeaderTemplate || {}).templateRef;
+    }
+    get allDayMessage() {
+        return this.localization.get('allDay');
+    }
+    get allDayResizeHint() {
+        return this.resizing && this.resizing.task.isAllDay;
+    }
+    get allDayDragHint() {
+        return this.dragging && this.dragging.slot.isDaySlot;
+    }
+    optionsChange(changes) {
+        this.schedulerAllDaySlotTemplate = changes.allDaySlotTemplate;
+        this.schedulerAllDayEventTemplate = changes.allDayEventTemplate;
+        this.schedulerMinorTimeHeaderTemplate = changes.minorTimeHeaderTemplate;
+        this.schedulerMajorTimeHeaderTemplate = changes.majorTimeHeaderTemplate;
+        super.optionsChange(changes);
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        if (changes.slotFill) {
+            this.changes.next(null);
+        }
+        if (anyChanged(['startTime', 'endTime', 'showWorkHours', 'workDayStart',
+            'workDayEnd', 'workWeekStart', 'workWeekEnd'], changes)) {
+            this.viewRangeChange.next(null);
+        }
+        if (isChanged('numberOfDays', changes, true /* skipFirstChange */) ||
+            isChanged('weekStart', changes)) {
+            this.daySlots = this.createDaySlots();
+            this.viewState.notifyDateRange(this.dateRange());
+        }
+    }
+    horizontalColspan(resourceIndex) {
+        const resources = this.horizontalResources;
+        let result = this.daySlots.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 = this.timeSlots.length + 1;
+        for (let idx = resourceIndex + 1; idx < resources.length; idx++) {
+            result *= (resources[idx].data || []).length || 1;
+        }
+        return result;
+    }
+    allDaySlotClass(slot, resourceIndex) {
+        if (this.slotClass) {
+            return this.slotClass({
+                start: slot.start,
+                end: slot.end,
+                resources: this.resourcesByIndex(resourceIndex),
+                isAllDay: true
+            });
+        }
+    }
+    createTasks(items, dateRange) {
+        const startTimeSlot = this.timeSlots[0];
+        const endTimeSlot = this.timeSlots[this.timeSlots.length - 1].end;
+        const nextDateEnd = !(endTimeSlot.getHours() || endTimeSlot.getMinutes());
+        const ranges = this.daySlots.map(daySlot => ({
+            start: toUTCTime(daySlot.start, startTimeSlot.start),
+            end: nextDateEnd ? toUTCDate(daySlot.end) : toUTCTime(daySlot.start, endTimeSlot)
+        }));
+        return createTasks(dateRange.start, dateRange.end, items, ranges);
+    }
+    onTasksChange() {
+        this.items.next(this.tasks.filter(task => !task.isAllDay));
+        this.allDayItems.next(this.tasks.filter(task => task.isAllDay));
+    }
+    reflow() {
+        const slotService = this.slotService;
+        if (!this.verticalResources.length) {
+            this.updateContentHeight();
+            this.syncTables();
+        }
+        this.slotService.containerSize = this.content.nativeElement.clientWidth;
+        slotService.layoutDays(this.eventHeight);
+        this.updateContentHeight();
+        this.syncTables();
+        if (this.dayCells.length) {
+            const cells = this.dayCells.toArray();
+            if (this.verticalResources.length) {
+                slotService.forEachDateRange((range, index) => {
+                    const slot = range.firstSlot;
+                    cells[index].nativeElement.style.height = `${slot.rect.height - slot.padding}px`;
+                });
+            }
+            else {
+                const size = slotService.syncDateRanges();
+                cells[0].nativeElement.style.height = `${size}px`;
+            }
+        }
+        slotService.layoutTimes({ fill: this.slotFill });
+        this.syncTables();
+    }
+    dragHorizontal(slot) {
+        return slot.isDaySlot;
+    }
+    updateHintContainer() {
+        if (this.headerHintContainer) {
+            this.headerHintContainer.detectChanges();
+        }
+        super.updateHintContainer();
+    }
+    onRelease(args) {
+        super.onRelease(args);
+        this.dragContainers = null;
+    }
+    updateDragContainer(args) {
+        if (!this.dragContainers) {
+            this.dragContainers = this.containers;
+        }
+        const container = this.dragContainers.find(c => {
+            const offset = c.offset;
+            return offset.top <= args.pageY && args.pageY <= offset.top + offset.height;
+        }) || {};
+        this.container = container.element;
+        this.containerOffset = container.offset;
+    }
+    containerByPosition({ x, y }) {
+        return this.containers.find(c => {
+            const offset = c.offset;
+            return offset.top <= y && y <= offset.top + offset.height && offset.left <= x && x <= offset.left + offset.width;
+        });
+    }
+    get containers() {
+        const header = this.headerWrap.nativeElement.children[1];
+        const content = this.content.nativeElement;
+        return [{
+                element: content,
+                offset: elementOffset(content)
+            }, {
+                element: header,
+                offset: elementOffset(header)
+            }];
+    }
+    scrollContainer(callback, args) {
+        clearInterval(this.scrollInterval);
+        if (this.container && this.container === this.content.nativeElement) {
+            super.scrollContainer(callback, args);
+        }
+    }
+    dragRanges(slot) {
+        const task = this.dragging.task;
+        if (slot.isDaySlot && !task.isAllDay) {
+            return {
+                ranges: [[slot]],
+                start: dateWithTime(slot.start, task.start.toUTCDate()),
+                end: dateWithTime(slot.start, task.end.toUTCDate()),
+                isAllDay: true
+            };
+        }
+        const allDayToTime = task.isAllDay && !slot.isDaySlot;
+        const result = this.slotService.dragRanges(slot, allDayToTime ? { start: 0, end: 0 } : this.dragging.offset);
+        if (allDayToTime) {
+            result.end = slot.end;
+        }
+        result.isAllDay = this.draggedIsAllDay(task, slot);
+        return result;
+    }
+    dragHintEventStyleArgs() {
+        return {
+            event: this.dragging.task.event,
+            resources: this.dragging.resourceItems,
+            isAllDay: Boolean(this.allDayDragHint)
+        };
+    }
+    draggedIsAllDay(task, slot) {
+        return Boolean(slot.isDaySlot && (task.event.isAllDay || !isMultiDay(task)));
+    }
+    dragHintSize(firstSlot, lastSlot) {
+        let width, height;
+        if (firstSlot.isDaySlot) {
+            width = toPx(lastSlot.rect.left - firstSlot.rect.left + lastSlot.rect.width);
+            height = toPx(firstSlot.height);
+        }
+        else {
+            width = toPx(firstSlot.rect.width * 0.9);
+            height = toPx(this.dragging.task.isAllDay ? firstSlot.rect.height : lastSlot.rect.top - firstSlot.rect.top + lastSlot.rect.height);
+        }
+        return { width, height };
+    }
+    currentTimeArrowOffset() {
+        if (this.verticalResources.length) {
+            const el = this.times.nativeElement.querySelector('.k-scheduler-times-all-day');
+            const timesEl = this.times.nativeElement;
+            return this.localization.rtl ? timesEl.offsetWidth - el.offsetWidth : el.offsetLeft;
+        }
+        return 0;
+    }
+}
+MultiDayViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiDayViewRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ViewContextService }, { token: i3.ViewStateService }, { token: i4.IntlService }, { token: i5.DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i6.PDFService }], target: i0.ɵɵFactoryTarget.Component });
+MultiDayViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiDayViewRendererComponent, selector: "multi-day-view", inputs: { name: "name", slotFill: "slotFill", allDaySlotTemplate: "allDaySlotTemplate", allDayEventTemplate: "allDayEventTemplate", minorTimeHeaderTemplate: "minorTimeHeaderTemplate", majorTimeHeaderTemplate: "majorTimeHeaderTemplate" }, providers: [
+        DayTimeSlotService
+    ], viewQueries: [{ propertyName: "headerHintContainer", first: true, predicate: ["headerHintContainer"], descendants: true }, { propertyName: "dayCells", predicate: ["allDayCell"], 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 *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
+                            <th></th>
+                        </tr>
+                        <tr>
+                            <th>​</th>
+                        </tr>
+                        <tr *ngIf="!verticalResources.length">
+                            <th class="k-scheduler-times-all-day" #allDayCell>{{ allDayMessage }}</th>
+                        </tr>
+                    </table>
+                </div>
+                <div class="k-scheduler-header k-state-default" #header>
+                    <div class="k-scheduler-header-wrap" #headerWrap>
+                        <table class="k-scheduler-table" aria-hidden="true">
+                            <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;">
+                                    <th *ngFor="let slot of daySlots; let index = index; trackBy: itemIndex">
+                                        <span *ngIf="!dateHeaderTemplateRef" class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ slot.start | kendoDate: dateFormat }}</span>
+                                        <ng-container *ngIf="dateHeaderTemplateRef" [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }"></ng-container>
+                                    </th>
+                                </ng-container>
+                            </tr>
+                        </table>
+                        <div style="position: relative;" *ngIf="!verticalResources.length">
+                            <table class="k-scheduler-table k-scheduler-header-all-day k-user-select-none" aria-hidden="true">
+                                <tr>
+                                    <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;">
+                                        <td *ngFor="let slot of daySlots; let index = index; trackBy: itemIndex"
+                                            daySlot
+                                            [start]="slot.start"
+                                            [end]="slot.end"
+                                            [id]="{ resourceIndex: resourceIndex, rangeIndex: 0, index: index }"
+                                            [class.k-state-selected]="isSlotSelected({
+                                                start: toPlainDate(slot.start),
+                                                end: toPlainDate(slot.end),
+                                                isAllDay: true,
+                                                resources: resourcesByIndex(resourceIndex)
+                                            })"
+                                            [ngClass]="allDaySlotClass(slot, resourceIndex)">
+                                            <ng-container *ngIf="allDaySlotTemplateRef" [ngTemplateOutlet]="allDaySlotTemplateRef"
+                                                [ngTemplateOutletContext]="{ date: slot.start, resources: resourcesByIndex(resourceIndex) }"></ng-container>
+                                        </td>
+                                    </ng-container>
+                                </tr>
+                            </table>
+                            <ng-container *ngFor="let item of allDayItems | async; trackBy: itemIndex;">
+                                <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
+                                    [ngClass]="getEventClasses(item, itemResource.resources, true)"
+                                    [ngStyle]="getEventStyles(item, itemResource, true)"
+                                    [kendoSchedulerFocusIndex]="itemResource.leafIdx"
+                                     dayTimeViewItem
+                                        [isAllDay]="true"
+                                        [editable]="editable"
+                                        [eventTemplate]="allDayEventTemplateRef"
+                                        [item]="item"
+                                        [index]="item.index"
+                                        [rangeIndex]="item.rangeIndex"
+                                        [resources]="itemResource.resources"
+                                        [resourceIndex]="itemResource.leafIdx">
+                                </div>
+                            </ng-container>
+                            <kendo-hint-container #headerHintContainer>
+                                <ng-template>
+                                    <div *ngIf="dragHints.length && allDayDragHint"
+                                        class="k-event-drag-hint"
+                                        dayTimeViewItem
+                                            [isAllDay]="true"
+                                            [ngStyle]="dragHints[0].style"
+                                            [ngClass]="dragHints[0].class"
+                                            [dragHint]="true"
+                                            [eventTemplate]="eventTemplateRef"
+                                            [item]="dragHints[0].item"
+                                            [resources]="dragHints[0].resources">
+                                    </div>
+
+                                    <div *ngIf="resizeHints.length && allDayResizeHint"
+                                        kendoResizeHint
+                                            [hint]="resizeHints[0]"
+                                            [ngClass]="resizeHints[0].class"
+                                            [format]="allDayResizeHintFormat">
+                                    </div>
+                                </ng-template>
+                            </kendo-hint-container>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="k-scheduler-pane">
+                <div class="k-scheduler-times" #times>
+                    <ng-container *ngIf="showCurrentTime">
+                        <div *ngFor="let resource of verticalResources | resourceIterator; trackBy: itemIndex;"
+                            #currentTimeArrow class="k-current-time k-current-time-arrow-right">
+                        </div>
+                    </ng-container>
+                    <table class="k-scheduler-table" #timesTable aria-hidden="true">
+                        <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;">
+                            <tr *ngIf="verticalResources.length">
+                                <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">
+                                        <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>
+                                    </th>
+                                </ng-container>
+                                <th class="k-scheduler-times-all-day" #allDayCell>{{ allDayMessage }}</th>
+                            </tr>
+                            <tr *ngFor="let slot of timeSlots; let timeSlotIndex = index;trackBy: itemIndex">
+                                <th *ngIf="slot.isMajor" [ngClass]="{ 'k-slot-cell': slotDivisions === 1 }">
+                                    <ng-container *ngIf="!majorTimeHeaderTemplateRef">{{ slot.start | kendoDate: 't' }}</ng-container>
+                                    <ng-container *ngIf="majorTimeHeaderTemplateRef" [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }"></ng-container>
+                                </th>
+                                <th *ngIf="!slot.isMajor" [ngClass]="{ 'k-slot-cell': timeSlotIndex % slotDivisions === slotDivisions - 1 }">
+                                    <ng-container *ngIf="minorTimeHeaderTemplateRef" [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }">
+                                    </ng-container>
+                                </th>
+                            </tr>
+                        </ng-container>
+                    </table>
+                </div>
+                <div class="k-scheduler-content k-user-select-none" #content>
+                    <ng-container *ngIf="showCurrentTime">
+                        <div *ngFor="let resource of verticalResources | resourceIterator; trackBy: itemIndex;"
+                            #currentTimeMarker class="k-current-time">
+                        </div>
+                    </ng-container>
+                    <table class="k-scheduler-table" #contentTable role="presentation">
+                        <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;">
+                            <tr class="k-scheduler-header-all-day" *ngIf="verticalResources.length">
+                                <td *ngFor="let slot of daySlots; let index = index; trackBy: itemIndex"
+                                    daySlot
+                                    [start]="slot.start"
+                                    [end]="slot.end"
+                                    [class.k-state-selected]="isSlotSelected({
+                                        start: toPlainDate(slot.start),
+                                        end: toPlainDate(slot.end),
+                                        isAllDay: true,
+                                        resources: resourcesByIndex(verticalIndex)
+                                    })"
+                                    [id]="{ resourceIndex: verticalIndex, rangeIndex: 0, index: index }">
+                                    <ng-container *ngIf="allDaySlotTemplateRef" [ngTemplateOutlet]="allDaySlotTemplateRef"
+                                        [ngTemplateOutletContext]="{ date: slot.start, resources: resourcesByIndex(verticalIndex) }"></ng-container>
+                                </td>
+                            </tr>
+                            <tr *ngFor="let slot of timeSlots; index as index; trackBy: itemIndex" [class.k-middle-row]="slot.isMajor">
+                                <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;">
+                                    <td *ngFor="let daySlot of daySlots; index as rangeIndex; 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"
+                                            [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.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex) }">
+                                        </ng-container>
+                                    </td>
+                                </ng-container>
+                            </tr>
+                        </ng-container>
+                    </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"
+                                [vertical]="true"
+                                [eventTemplate]="eventTemplateRef"
+                                [item]="item"
+                                [index]="item.index"
+                                [rangeIndex]="item.rangeIndex"
+                                [resources]="itemResource.resources"
+                                [resourceIndex]="itemResource.leafIdx">
+                        </div>
+                    </ng-container>
+                    <ng-container *ngIf="verticalResources.length">
+                        <ng-container *ngFor="let item of allDayItems | async; trackBy: itemIndex;">
+                            <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
+                                [ngClass]="getEventClasses(item, itemResource.resources, true)"
+                                [ngStyle]="getEventStyles(item, itemResource, true)"
+                                [kendoSchedulerFocusIndex]="itemResource.leafIdx"
+                                dayTimeViewItem
+                                    [isAllDay]="true"
+                                    [editable]="editable"
+                                    [eventTemplate]="allDayEventTemplateRef"
+                                    [item]="item"
+                                    [index]="item.index"
+                                    [rangeIndex]="item.rangeIndex"
+                                    [resources]="itemResource.resources"
+                                    [resourceIndex]="itemResource.leafIdx">
+                            </div>
+                        </ng-container>
+                    </ng-container>
+                    <kendo-hint-container #hintContainer>
+                        <ng-template>
+                            <div *ngIf="dragHints.length && (!allDayDragHint || verticalResources.length)"
+                                class="k-event-drag-hint"
+                                dayTimeViewItem
+                                    [isAllDay]="allDayDragHint"
+                                    [ngStyle]="dragHints[0].style"
+                                    [ngClass]="dragHints[0].class"
+                                    [dragHint]="true"
+                                    [eventTemplate]="eventTemplateRef"
+                                    [resources]="dragHints[0].resources"
+                                    [item]="dragHints[0].item">
+                            </div>
+
+                            <ng-container *ngIf="resizeHints.length && (!allDayResizeHint || verticalResources.length)">
+                                <div *ngFor="let hint of resizeHints; trackBy: itemIndex;"
+                                    kendoResizeHint
+                                        [hint]="hint"
+                                        [ngClass]="hint.class"
+                                        [format]="allDayResizeHint ? allDayResizeHintFormat : resizeHintFormat">
+                                </div>
+                            </ng-container>
+                        </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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i11.DaySlotDirective, selector: "[daySlot]", inputs: ["start", "end"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i12.FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex"] }, { type: i11.TimeSlotDirective, selector: "[timeSlot]", inputs: ["invariantStart", "invariantEnd", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "date"], exportAs: ["timeSlot"] }], pipes: { "resourceIterator": i13.ResourceIteratorPipe, "kendoDate": i4.DatePipe, "async": i10.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiDayViewRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '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 *ngFor="let resource of horizontalResources; trackBy: itemIndex;">
+                            <th></th>
+                        </tr>
+                        <tr>
+                            <th>​</th>
+                        </tr>
+                        <tr *ngIf="!verticalResources.length">
+                            <th class="k-scheduler-times-all-day" #allDayCell>{{ allDayMessage }}</th>
+                        </tr>
+                    </table>
+                </div>
+                <div class="k-scheduler-header k-state-default" #header>
+                    <div class="k-scheduler-header-wrap" #headerWrap>
+                        <table class="k-scheduler-table" aria-hidden="true">
+                            <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;">
+                                    <th *ngFor="let slot of daySlots; let index = index; trackBy: itemIndex">
+                                        <span *ngIf="!dateHeaderTemplateRef" class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ slot.start | kendoDate: dateFormat }}</span>
+                                        <ng-container *ngIf="dateHeaderTemplateRef" [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }"></ng-container>
+                                    </th>
+                                </ng-container>
+                            </tr>
+                        </table>
+                        <div style="position: relative;" *ngIf="!verticalResources.length">
+                            <table class="k-scheduler-table k-scheduler-header-all-day k-user-select-none" aria-hidden="true">
+                                <tr>
+                                    <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let resourceIndex = index; trackBy: itemIndex;">
+                                        <td *ngFor="let slot of daySlots; let index = index; trackBy: itemIndex"
+                                            daySlot
+                                            [start]="slot.start"
+                                            [end]="slot.end"
+                                            [id]="{ resourceIndex: resourceIndex, rangeIndex: 0, index: index }"
+                                            [class.k-state-selected]="isSlotSelected({
+                                                start: toPlainDate(slot.start),
+                                                end: toPlainDate(slot.end),
+                                                isAllDay: true,
+                                                resources: resourcesByIndex(resourceIndex)
+                                            })"
+                                            [ngClass]="allDaySlotClass(slot, resourceIndex)">
+                                            <ng-container *ngIf="allDaySlotTemplateRef" [ngTemplateOutlet]="allDaySlotTemplateRef"
+                                                [ngTemplateOutletContext]="{ date: slot.start, resources: resourcesByIndex(resourceIndex) }"></ng-container>
+                                        </td>
+                                    </ng-container>
+                                </tr>
+                            </table>
+                            <ng-container *ngFor="let item of allDayItems | async; trackBy: itemIndex;">
+                                <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
+                                    [ngClass]="getEventClasses(item, itemResource.resources, true)"
+                                    [ngStyle]="getEventStyles(item, itemResource, true)"
+                                    [kendoSchedulerFocusIndex]="itemResource.leafIdx"
+                                     dayTimeViewItem
+                                        [isAllDay]="true"
+                                        [editable]="editable"
+                                        [eventTemplate]="allDayEventTemplateRef"
+                                        [item]="item"
+                                        [index]="item.index"
+                                        [rangeIndex]="item.rangeIndex"
+                                        [resources]="itemResource.resources"
+                                        [resourceIndex]="itemResource.leafIdx">
+                                </div>
+                            </ng-container>
+                            <kendo-hint-container #headerHintContainer>
+                                <ng-template>
+                                    <div *ngIf="dragHints.length && allDayDragHint"
+                                        class="k-event-drag-hint"
+                                        dayTimeViewItem
+                                            [isAllDay]="true"
+                                            [ngStyle]="dragHints[0].style"
+                                            [ngClass]="dragHints[0].class"
+                                            [dragHint]="true"
+                                            [eventTemplate]="eventTemplateRef"
+                                            [item]="dragHints[0].item"
+                                            [resources]="dragHints[0].resources">
+                                    </div>
+
+                                    <div *ngIf="resizeHints.length && allDayResizeHint"
+                                        kendoResizeHint
+                                            [hint]="resizeHints[0]"
+                                            [ngClass]="resizeHints[0].class"
+                                            [format]="allDayResizeHintFormat">
+                                    </div>
+                                </ng-template>
+                            </kendo-hint-container>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="k-scheduler-pane">
+                <div class="k-scheduler-times" #times>
+                    <ng-container *ngIf="showCurrentTime">
+                        <div *ngFor="let resource of verticalResources | resourceIterator; trackBy: itemIndex;"
+                            #currentTimeArrow class="k-current-time k-current-time-arrow-right">
+                        </div>
+                    </ng-container>
+                    <table class="k-scheduler-table" #timesTable aria-hidden="true">
+                        <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex;">
+                            <tr *ngIf="verticalResources.length">
+                                <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">
+                                        <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>
+                                    </th>
+                                </ng-container>
+                                <th class="k-scheduler-times-all-day" #allDayCell>{{ allDayMessage }}</th>
+                            </tr>
+                            <tr *ngFor="let slot of timeSlots; let timeSlotIndex = index;trackBy: itemIndex">
+                                <th *ngIf="slot.isMajor" [ngClass]="{ 'k-slot-cell': slotDivisions === 1 }">
+                                    <ng-container *ngIf="!majorTimeHeaderTemplateRef">{{ slot.start | kendoDate: 't' }}</ng-container>
+                                    <ng-container *ngIf="majorTimeHeaderTemplateRef" [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }"></ng-container>
+                                </th>
+                                <th *ngIf="!slot.isMajor" [ngClass]="{ 'k-slot-cell': timeSlotIndex % slotDivisions === slotDivisions - 1 }">
+                                    <ng-container *ngIf="minorTimeHeaderTemplateRef" [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }">
+                                    </ng-container>
+                                </th>
+                            </tr>
+                        </ng-container>
+                    </table>
+                </div>
+                <div class="k-scheduler-content k-user-select-none" #content>
+                    <ng-container *ngIf="showCurrentTime">
+                        <div *ngFor="let resource of verticalResources | resourceIterator; trackBy: itemIndex;"
+                            #currentTimeMarker class="k-current-time">
+                        </div>
+                    </ng-container>
+                    <table class="k-scheduler-table" #contentTable role="presentation">
+                        <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex;">
+                            <tr class="k-scheduler-header-all-day" *ngIf="verticalResources.length">
+                                <td *ngFor="let slot of daySlots; let index = index; trackBy: itemIndex"
+                                    daySlot
+                                    [start]="slot.start"
+                                    [end]="slot.end"
+                                    [class.k-state-selected]="isSlotSelected({
+                                        start: toPlainDate(slot.start),
+                                        end: toPlainDate(slot.end),
+                                        isAllDay: true,
+                                        resources: resourcesByIndex(verticalIndex)
+                                    })"
+                                    [id]="{ resourceIndex: verticalIndex, rangeIndex: 0, index: index }">
+                                    <ng-container *ngIf="allDaySlotTemplateRef" [ngTemplateOutlet]="allDaySlotTemplateRef"
+                                        [ngTemplateOutletContext]="{ date: slot.start, resources: resourcesByIndex(verticalIndex) }"></ng-container>
+                                </td>
+                            </tr>
+                            <tr *ngFor="let slot of timeSlots; index as index; trackBy: itemIndex" [class.k-middle-row]="slot.isMajor">
+                                <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex;">
+                                    <td *ngFor="let daySlot of daySlots; index as rangeIndex; 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"
+                                            [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.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex) }">
+                                        </ng-container>
+                                    </td>
+                                </ng-container>
+                            </tr>
+                        </ng-container>
+                    </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"
+                                [vertical]="true"
+                                [eventTemplate]="eventTemplateRef"
+                                [item]="item"
+                                [index]="item.index"
+                                [rangeIndex]="item.rangeIndex"
+                                [resources]="itemResource.resources"
+                                [resourceIndex]="itemResource.leafIdx">
+                        </div>
+                    </ng-container>
+                    <ng-container *ngIf="verticalResources.length">
+                        <ng-container *ngFor="let item of allDayItems | async; trackBy: itemIndex;">
+                            <div *ngFor="let itemResource of item.resources; trackBy: itemIndex;"
+                                [ngClass]="getEventClasses(item, itemResource.resources, true)"
+                                [ngStyle]="getEventStyles(item, itemResource, true)"
+                                [kendoSchedulerFocusIndex]="itemResource.leafIdx"
+                                dayTimeViewItem
+                                    [isAllDay]="true"
+                                    [editable]="editable"
+                                    [eventTemplate]="allDayEventTemplateRef"
+                                    [item]="item"
+                                    [index]="item.index"
+                                    [rangeIndex]="item.rangeIndex"
+                                    [resources]="itemResource.resources"
+                                    [resourceIndex]="itemResource.leafIdx">
+                            </div>
+                        </ng-container>
+                    </ng-container>
+                    <kendo-hint-container #hintContainer>
+                        <ng-template>
+                            <div *ngIf="dragHints.length && (!allDayDragHint || verticalResources.length)"
+                                class="k-event-drag-hint"
+                                dayTimeViewItem
+                                    [isAllDay]="allDayDragHint"
+                                    [ngStyle]="dragHints[0].style"
+                                    [ngClass]="dragHints[0].class"
+                                    [dragHint]="true"
+                                    [eventTemplate]="eventTemplateRef"
+                                    [resources]="dragHints[0].resources"
+                                    [item]="dragHints[0].item">
+                            </div>
+
+                            <ng-container *ngIf="resizeHints.length && (!allDayResizeHint || verticalResources.length)">
+                                <div *ngFor="let hint of resizeHints; trackBy: itemIndex;"
+                                    kendoResizeHint
+                                        [hint]="hint"
+                                        [ngClass]="hint.class"
+                                        [format]="allDayResizeHint ? allDayResizeHintFormat : resizeHintFormat">
+                                </div>
+                            </ng-container>
+                        </ng-template>
+                    </kendo-hint-container>
+                </div>
+            </div>
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ViewContextService }, { type: i3.ViewStateService }, { type: i4.IntlService }, { type: i5.DayTimeSlotService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i6.PDFService }]; }, propDecorators: { name: [{
+                type: Input
+            }], slotFill: [{
+                type: Input
+            }], allDaySlotTemplate: [{
+                type: Input
+            }], allDayEventTemplate: [{
+                type: Input
+            }], minorTimeHeaderTemplate: [{
+                type: Input
+            }], majorTimeHeaderTemplate: [{
+                type: Input
+            }], dayCells: [{
+                type: ViewChildren,
+                args: ['allDayCell']
+            }], headerHintContainer: [{
+                type: ViewChild,
+                args: ['headerHintContainer', { static: false }]
+            }] } });