@progress/kendo-angular-scheduler
Version:
Kendo UI Scheduler Angular - Outlook or Google-style angular scheduler calendar. Full-featured and customizable embedded scheduling from the creator developers trust for professional UI components.
640 lines (639 loc) • 37.1 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, Input, NgZone, ViewChildren, ViewChild, QueryList, ElementRef, Renderer2, ChangeDetectorRef } from '@angular/core';
import { IntlService, DatePipe } from '@progress/kendo-angular-intl';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { ViewContextService } from '../view-context.service';
import { ViewStateService } from '../view-state.service';
import { DayTimeSlotService } from '../day-time/day-time-slot.service';
import { createTasks, SortPipe } from './utils';
import { toPx } from '../utils';
import { DayTimeViewComponent } from '../day-time/day-time-view.component';
import { PDFService } from '../../pdf/pdf.service';
import { ScrollbarWidthService, isDocumentAvailable } from '@progress/kendo-angular-common';
import { ResourceIteratorPipe } from '../common/resource-iterator.pipe';
import { ResizeHintComponent } from '../common/resize-hint.component';
import { HintContainerComponent } from '../common/hint-container.component';
import { FocusableDirective } from '../../navigation/focusable.directive';
import { DayTimeViewItemComponent } from '../day-time/day-time-view-item.component';
import { TimeSlotDirective } from '../day-time/event-slot.directive';
import { NgClass, NgTemplateOutlet, NgStyle, AsyncPipe } from '@angular/common';
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 "@progress/kendo-angular-common";
/**
* @hidden
*/
export class TimelineMultiDayViewComponent extends DayTimeViewComponent {
name = 'timeline';
columnWidth = 100;
viewName = 'timeline';
verticalResourceRows;
get classNames() {
return `k-scheduler-${this.viewName}-view`;
}
headerTable;
get contentWidthPercentage() {
const expectedWidth = this.columnWidth * this.slotsCount;
const percentage = (expectedWidth / this.contentWidth) * 100;
return Math.max(percentage, 100);
}
verticalTime = false;
contentWidth;
constructor(localization, changeDetector, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, scrollBarWidthService) {
super(changeDetector, viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, scrollBarWidthService);
}
ngOnChanges(changes) {
if (changes.columnWidth) {
this.changes.next(null);
}
super.ngOnChanges(changes);
}
reflow() {
if (!isDocumentAvailable()) {
return;
}
const slotService = this.slotService;
this.updateContentHeight();
slotService.containerSize = this.content.nativeElement.scrollWidth;
this.contentWidth = this.content.nativeElement.getBoundingClientRect().width;
this.cdr.detectChanges();
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) {
if (this.minorTimeHeaderTemplateRef) {
return 1;
}
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;
}
handleScroll() {
this.headerWrap.nativeElement.scrollLeft = this.content.nativeElement.scrollLeft;
}
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;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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 }, { token: i7.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineMultiDayViewComponent, isStandalone: true, selector: "timeline-multi-day-view", inputs: { name: "name", columnWidth: "columnWidth", viewName: "viewName" }, providers: [
DayTimeSlotService
], viewQueries: [{ propertyName: "headerTable", first: true, predicate: ["headerTable"], descendants: true }, { propertyName: "verticalResourceRows", predicate: ["verticalResourceRows"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
<table class="k-scheduler-layout" [ngClass]="classNames">
<tbody>
<tr class="k-scheduler-head">
<td>
<div class="k-scheduler-times" #timesHeader>
<table class="k-scheduler-table" aria-hidden="true">
<tbody>
<tr><th class="k-scheduler-cell k-heading-cell"></th></tr>
<tr><th class="k-slot-cell k-scheduler-cell k-heading-cell"></th></tr>
@for (resource of horizontalResources; track itemIndex($index, resource)) {
<tr>
<th class="k-scheduler-cell k-heading-cell"></th>
</tr>
}
</tbody>
</table>
</div>
</td>
<td>
<div class="k-scheduler-header" #header >
<div class="k-scheduler-header-wrap" #headerWrap>
@if (showCurrentTime) {
@for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
<div
#currentTimeArrow class="k-current-time k-current-time-arrow-down">
</div>
}
}
<table class="k-scheduler-table" #headerTable aria-hidden="true" [style.width.%]="contentWidthPercentage">
<tbody>
@for (resource of horizontalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
<tr>
@for (item of horizontalResources | resourceIterator : resourceIndex; track itemIndex($index, item)) {
<th
class="k-slot-cell k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
@if (!groupHeaderTemplateRef) {
{{ getField(item, resource.textField) }}
}
@if (groupHeaderTemplateRef) {
<ng-container [ngTemplateOutlet]="groupHeaderTemplateRef"
[ngTemplateOutletContext]="{ resource: item }"></ng-container>
}
</th>
}
</tr>
}
<tr class="k-scheduler-date-group">
@for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
@for (daySlot of daySlots; track itemIndex(index, daySlot); let index = $index) {
<th [attr.colspan]="timeSlots.length" class="k-scheduler-cell k-heading-cell k-slot-cell">
@if (!dateHeaderTemplateRef) {
<span class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ daySlot.start | kendoDate: 'm'}}</span>
}
@if (dateHeaderTemplateRef) {
<ng-container [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: daySlot.start }"></ng-container>
}
</th>
}
}
</tr>
<tr>
@for (resource of horizontalResources | resourceIterator; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
@for (daySlot of daySlots; track itemIndex(rangeIndex, daySlot); let rangeIndex = $index) {
@for (timeSlot of timeSlots; track itemIndex(index, timeSlot); let index = $index) {
@if (timeSlot.isMajor) {
<th [attr.colspan]="timeColspan(index)" class="k-scheduler-cell k-heading-cell">
@if (!majorTimeHeaderTemplateRef) {
{{ timeSlot.start | kendoDate: 't' }}
}
@if (majorTimeHeaderTemplateRef) {
<ng-container [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }"></ng-container>
}
</th>
}
@if (!timeSlot.isMajor && minorTimeHeaderTemplateRef) {
<th
[ngStyle]="{'border-left-color': 'transparent', 'border-right-color': 'transparent'}"
class="k-scheduler-cell k-heading-cell"
>
<ng-container [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }">
</ng-container>
</th>
}
}
}
}
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr class="k-scheduler-body">
<td>
<div class="k-scheduler-times" #times>
<table class="k-scheduler-table" #timesTable aria-hidden="true">
<tbody>
@if (!verticalResources.length) {
<tr>
<th rowspan="1" #titleCell class="k-scheduler-cell k-heading-cell">
{{ allEventsMessage }}
</th>
</tr>
}
@if (verticalResources.length) {
@for (resourceItem of verticalResources | resourceIterator; track itemIndex(leafIndex, resourceItem); let leafIndex = $index) {
<tr #verticalResourceRows>
@for (resource of verticalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
@if (verticalItem(leafIndex, resourceIndex)) {
<th [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell k-scheduler-cell k-heading-cell">
<div>
@if (!groupHeaderTemplateRef) {
{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}
}
@if (groupHeaderTemplateRef) {
<ng-container [ngTemplateOutlet]="groupHeaderTemplateRef"
[ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
}
</div>
</th>
}
}
</tr>
}
}
</tbody>
</table>
</div>
</td>
<td>
<div
class="k-scheduler-content"
#content
role="group"
tabindex="0"
(scroll)="handleScroll()"
[attr.aria-owns]="matchOwned(items | async | sort)">
@if (showCurrentTime) {
@for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
<div
class="k-current-time" #currentTimeMarker>
</div>
}
}
<table class="k-scheduler-table" #contentTable role="presentation" [style.width.%]="contentWidthPercentage">
<tbody>
@for (resourceItem of verticalResources | resourceIterator; track itemIndex(verticalIndex, resourceItem); let verticalIndex = $index) {
<tr>
@for (resource of horizontalResources | resourceIterator; track itemIndex(horizontalIndex, resource); let horizontalIndex = $index) {
@for (daySlot of daySlots; track itemIndex(rangeIndex, daySlot); let rangeIndex = $index) {
@for (slot of timeSlots; track itemIndex(index, slot); let index = $index) {
<td
[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-selected]="isSlotSelected({
start: toPlainDateTime(daySlot.start, slot.start),
end: toPlainDateTime(daySlot.start, slot.end),
isAllDay: false,
resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
})"
class="k-scheduler-cell"
>
@if (timeSlotTemplateRef) {
<ng-container [ngTemplateOutlet]="timeSlotTemplateRef"
[ngTemplateOutletContext]="{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }">
</ng-container>
}
</td>
}
}
}
</tr>
}
</tbody>
</table>
@for (item of items | async | sort; track itemIndex($index, item)) {
@for (itemResource of item.resources; track itemIndex($index, itemResource)) {
<div
[ngClass]="getEventClasses(item, itemResource.resources)"
[ngStyle]="getEventStyles(item, itemResource)"
role="button"
[kendoSchedulerFocusIndex]="itemResource.leafIdx"
[id]="item.elementId + '_' + itemResource.leafIdx"
dayTimeViewItem
[editable]="editable"
[item]="item"
[index]="item.index"
[rangeIndex]="item.rangeIndex"
[eventTemplate]="eventTemplateRef"
[resources]="itemResource.resources"
[resourceIndex]="itemResource.leafIdx">
</div>
}
}
<kendo-hint-container #hintContainer>
<ng-template>
@for (hint of dragHints; track itemIndex($index, hint)) {
<div
class="k-event-drag-hint"
dayTimeViewItem
[ngStyle]="hint.style"
[ngClass]="hint.class"
[dragHint]="true"
[eventTemplate]="eventTemplateRef"
[item]="hint.item"
[resources]="hint.resources">
</div>
}
@if (resizeHints && resizeHints.length) {
<div
kendoResizeHint
[hint]="resizeHints[0]"
[ngClass]="resizeHints[0].class"
[format]="resizeHintFormat">
</div>
}
</ng-template>
</kendo-hint-container>
</div>
</td>
</tr>
</tbody>
</table>
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TimeSlotDirective, selector: "[timeSlot]", inputs: ["invariantStart", "invariantEnd", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "date"], exportAs: ["timeSlot"] }, { kind: "component", type: DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: ["vertical", "isAllDay", "name"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "component", type: HintContainerComponent, selector: "kendo-hint-container" }, { kind: "component", type: ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }, { kind: "pipe", type: ResourceIteratorPipe, name: "resourceIterator" }, { kind: "pipe", type: DatePipe, name: "kendoDate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SortPipe, name: "sort" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineMultiDayViewComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'timeline-multi-day-view',
providers: [
DayTimeSlotService
],
template: `
<table class="k-scheduler-layout" [ngClass]="classNames">
<tbody>
<tr class="k-scheduler-head">
<td>
<div class="k-scheduler-times" #timesHeader>
<table class="k-scheduler-table" aria-hidden="true">
<tbody>
<tr><th class="k-scheduler-cell k-heading-cell"></th></tr>
<tr><th class="k-slot-cell k-scheduler-cell k-heading-cell"></th></tr>
@for (resource of horizontalResources; track itemIndex($index, resource)) {
<tr>
<th class="k-scheduler-cell k-heading-cell"></th>
</tr>
}
</tbody>
</table>
</div>
</td>
<td>
<div class="k-scheduler-header" #header >
<div class="k-scheduler-header-wrap" #headerWrap>
@if (showCurrentTime) {
@for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
<div
#currentTimeArrow class="k-current-time k-current-time-arrow-down">
</div>
}
}
<table class="k-scheduler-table" #headerTable aria-hidden="true" [style.width.%]="contentWidthPercentage">
<tbody>
@for (resource of horizontalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
<tr>
@for (item of horizontalResources | resourceIterator : resourceIndex; track itemIndex($index, item)) {
<th
class="k-slot-cell k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
@if (!groupHeaderTemplateRef) {
{{ getField(item, resource.textField) }}
}
@if (groupHeaderTemplateRef) {
<ng-container [ngTemplateOutlet]="groupHeaderTemplateRef"
[ngTemplateOutletContext]="{ resource: item }"></ng-container>
}
</th>
}
</tr>
}
<tr class="k-scheduler-date-group">
@for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
@for (daySlot of daySlots; track itemIndex(index, daySlot); let index = $index) {
<th [attr.colspan]="timeSlots.length" class="k-scheduler-cell k-heading-cell k-slot-cell">
@if (!dateHeaderTemplateRef) {
<span class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ daySlot.start | kendoDate: 'm'}}</span>
}
@if (dateHeaderTemplateRef) {
<ng-container [ngTemplateOutlet]="dateHeaderTemplateRef" [ngTemplateOutletContext]="{ date: daySlot.start }"></ng-container>
}
</th>
}
}
</tr>
<tr>
@for (resource of horizontalResources | resourceIterator; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
@for (daySlot of daySlots; track itemIndex(rangeIndex, daySlot); let rangeIndex = $index) {
@for (timeSlot of timeSlots; track itemIndex(index, timeSlot); let index = $index) {
@if (timeSlot.isMajor) {
<th [attr.colspan]="timeColspan(index)" class="k-scheduler-cell k-heading-cell">
@if (!majorTimeHeaderTemplateRef) {
{{ timeSlot.start | kendoDate: 't' }}
}
@if (majorTimeHeaderTemplateRef) {
<ng-container [ngTemplateOutlet]="majorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }"></ng-container>
}
</th>
}
@if (!timeSlot.isMajor && minorTimeHeaderTemplateRef) {
<th
[ngStyle]="{'border-left-color': 'transparent', 'border-right-color': 'transparent'}"
class="k-scheduler-cell k-heading-cell"
>
<ng-container [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }">
</ng-container>
</th>
}
}
}
}
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr class="k-scheduler-body">
<td>
<div class="k-scheduler-times" #times>
<table class="k-scheduler-table" #timesTable aria-hidden="true">
<tbody>
@if (!verticalResources.length) {
<tr>
<th rowspan="1" #titleCell class="k-scheduler-cell k-heading-cell">
{{ allEventsMessage }}
</th>
</tr>
}
@if (verticalResources.length) {
@for (resourceItem of verticalResources | resourceIterator; track itemIndex(leafIndex, resourceItem); let leafIndex = $index) {
<tr #verticalResourceRows>
@for (resource of verticalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
@if (verticalItem(leafIndex, resourceIndex)) {
<th [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell k-scheduler-cell k-heading-cell">
<div>
@if (!groupHeaderTemplateRef) {
{{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}
}
@if (groupHeaderTemplateRef) {
<ng-container [ngTemplateOutlet]="groupHeaderTemplateRef"
[ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
}
</div>
</th>
}
}
</tr>
}
}
</tbody>
</table>
</div>
</td>
<td>
<div
class="k-scheduler-content"
#content
role="group"
tabindex="0"
(scroll)="handleScroll()"
[attr.aria-owns]="matchOwned(items | async | sort)">
@if (showCurrentTime) {
@for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
<div
class="k-current-time" #currentTimeMarker>
</div>
}
}
<table class="k-scheduler-table" #contentTable role="presentation" [style.width.%]="contentWidthPercentage">
<tbody>
@for (resourceItem of verticalResources | resourceIterator; track itemIndex(verticalIndex, resourceItem); let verticalIndex = $index) {
<tr>
@for (resource of horizontalResources | resourceIterator; track itemIndex(horizontalIndex, resource); let horizontalIndex = $index) {
@for (daySlot of daySlots; track itemIndex(rangeIndex, daySlot); let rangeIndex = $index) {
@for (slot of timeSlots; track itemIndex(index, slot); let index = $index) {
<td
[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-selected]="isSlotSelected({
start: toPlainDateTime(daySlot.start, slot.start),
end: toPlainDateTime(daySlot.start, slot.end),
isAllDay: false,
resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
})"
class="k-scheduler-cell"
>
@if (timeSlotTemplateRef) {
<ng-container [ngTemplateOutlet]="timeSlotTemplateRef"
[ngTemplateOutletContext]="{ date: timeSlot.startLocalTime, resources: resourcesByIndex(timeSlot.id.resourceIndex ) }">
</ng-container>
}
</td>
}
}
}
</tr>
}
</tbody>
</table>
@for (item of items | async | sort; track itemIndex($index, item)) {
@for (itemResource of item.resources; track itemIndex($index, itemResource)) {
<div
[ngClass]="getEventClasses(item, itemResource.resources)"
[ngStyle]="getEventStyles(item, itemResource)"
role="button"
[kendoSchedulerFocusIndex]="itemResource.leafIdx"
[id]="item.elementId + '_' + itemResource.leafIdx"
dayTimeViewItem
[editable]="editable"
[item]="item"
[index]="item.index"
[rangeIndex]="item.rangeIndex"
[eventTemplate]="eventTemplateRef"
[resources]="itemResource.resources"
[resourceIndex]="itemResource.leafIdx">
</div>
}
}
<kendo-hint-container #hintContainer>
<ng-template>
@for (hint of dragHints; track itemIndex($index, hint)) {
<div
class="k-event-drag-hint"
dayTimeViewItem
[ngStyle]="hint.style"
[ngClass]="hint.class"
[dragHint]="true"
[eventTemplate]="eventTemplateRef"
[item]="hint.item"
[resources]="hint.resources">
</div>
}
@if (resizeHints && resizeHints.length) {
<div
kendoResizeHint
[hint]="resizeHints[0]"
[ngClass]="resizeHints[0].class"
[format]="resizeHintFormat">
</div>
}
</ng-template>
</kendo-hint-container>
</div>
</td>
</tr>
</tbody>
</table>
`,
standalone: true,
imports: [NgClass, NgTemplateOutlet, NgStyle, TimeSlotDirective, DayTimeViewItemComponent, FocusableDirective, HintContainerComponent, ResizeHintComponent, ResourceIteratorPipe, DatePipe, AsyncPipe, SortPipe]
}]
}], ctorParameters: () => [{ 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 }, { type: i7.ScrollbarWidthService }], propDecorators: { name: [{
type: Input
}], columnWidth: [{
type: Input
}], viewName: [{
type: Input
}], verticalResourceRows: [{
type: ViewChildren,
args: ['verticalResourceRows']
}], headerTable: [{
type: ViewChild,
args: ['headerTable']
}] } });