@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.
590 lines (587 loc) • 36.4 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, ElementRef, Renderer2, TemplateRef, ChangeDetectorRef, QueryList, ViewChildren } from '@angular/core';
import { IntlService, DatePipe } from '@progress/kendo-angular-intl';
import { isChanged, isDocumentAvailable, ScrollbarWidthService } from '@progress/kendo-angular-common';
import { addDays, firstDayOfMonth, getDate, lastDayOfMonth, toLocalDate } from '@progress/kendo-date-math';
import { ViewContextService } from '../view-context.service';
import { ViewStateService } from '../view-state.service';
import { closestInScope, hasClasses } from '../../common/dom-queries';
import { MonthSlotService } from './month-slot.service';
import { updateTaskData, createTasks } from './utils';
import { toPx, dateInRange } from '../utils';
import { BaseView } from '../common/base-view';
import { PDFService } from '../../pdf/pdf.service';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { MonthViewItemComponent } from './month-view-item.component';
import { isPresent } from '../../common/util';
import { DAYS_IN_WEEK_COUNT, WEEKS_COUNT, MS_PER_MINUTE, ONGOING_EVENT_CSS_CLASS } from '../constants';
import { ResourceIteratorPipe } from '../common/resource-iterator.pipe';
import { RepeatPipe } from '../common/repeat.pipe';
import { ResizeHintComponent } from '../common/resize-hint.component';
import { HintContainerComponent } from '../common/hint-container.component';
import { FocusableDirective } from '../../navigation/focusable.directive';
import { MonthSlotComponent } from './month-slot.component';
import { NgIf, NgFor, NgTemplateOutlet, NgClass, NgStyle, AsyncPipe } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "../view-context.service";
import * as i2 from "../view-state.service";
import * as i3 from "@progress/kendo-angular-intl";
import * as i4 from "./month-slot.service";
import * as i5 from "../../pdf/pdf.service";
import * as i6 from "@progress/kendo-angular-l10n";
import * as i7 from "@progress/kendo-angular-common";
/**
* @hidden
*/
export class MonthViewRendererComponent extends BaseView {
monthDaySlotTemplate;
highlightOngoingEvents;
type;
eventsPerDay;
adaptiveSlotHeight;
/**
* The number of weeks to be rendered in the view
*/
numberOfWeeks = WEEKS_COUNT;
/**
* Calculates the next or previous range to be displayed (for Month and Multi-Week views)
*/
newRange;
/**
* Determines the displayed date range and formats the selected date (for Month and Multi-Week views)
*/
dateRangeFn;
resizeHintFormat = { skeleton: 'Md' };
weeks = [];
eventElements;
get monthDaySlotTemplateRef() {
return this.monthDaySlotTemplate || (this.schedulerMonthDaySlotTemplate || {}).templateRef;
}
ongoingEventsTimeout;
schedulerMonthDaySlotTemplate;
constructor(viewContext, viewState, intl, slotService, zone, element, renderer, pdfService, localization, changeDetector, scrollBarWidthService) {
super(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, changeDetector, scrollBarWidthService);
this.updateOngoingEvents = this.updateOngoingEvents.bind(this);
}
ngOnChanges(changes) {
if (isChanged('weekStart', changes)) {
this.onSelectDate(this.selectedDate);
}
super.ngOnChanges(changes);
}
ngOnInit() {
this.viewState.layoutEnd.subscribe(() => {
if (this.adaptiveSlotHeight) {
this.slotService.invalidate();
this.reflow();
}
});
super.ngOnInit();
}
ngAfterViewInit() {
this.updateOngoingEvents();
super.ngAfterViewInit();
}
ngOnDestroy() {
clearTimeout(this.ongoingEventsTimeout);
super.ngOnDestroy();
}
horizontalColspan(resourceIndex) {
const resources = this.horizontalResources;
let result = DAYS_IN_WEEK_COUNT;
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.numberOfWeeks;
for (let idx = resourceIndex + 1; idx < resources.length; idx++) {
result *= (resources[idx].data || []).length || 1;
}
return result;
}
verticalItem(leafIndex, resourceIndex) {
const data = this.verticalResources[resourceIndex].data || [];
const resources = this.verticalResources;
let result = 1;
for (let idx = resourceIndex + 1; idx < resources.length; idx++) {
result *= ((resources[idx].data || []).length || 1);
}
return data[(leafIndex / result) % data.length];
}
daySlotClass(day, resourceIndex) {
if (this.slotClass) {
return this.slotClass({
start: day,
end: addDays(day, 1),
resources: this.resourcesByIndex(resourceIndex),
isAllDay: false
});
}
}
cellTitle(value) {
return this.intl.formatDate(value, 'D');
}
addDay(dayStart) {
return addDays(dayStart, 1);
}
isDayInPreviousMonth(day) {
const beginningOfMonth = new Date(firstDayOfMonth(this.selectedDate).setHours(0, 0, 0, 0));
return day < beginningOfMonth;
}
isDayInNextMonth(day) {
const endOfMonth = new Date(lastDayOfMonth(this.selectedDate).setHours(23, 59, 59, 59));
return day > endOfMonth;
}
optionsChange(changes) {
this.schedulerMonthDaySlotTemplate = changes[`${this.type}DaySlotTemplate`];
super.optionsChange(changes);
}
createTasks(items, dateRange) {
this.weeks = this.createDaySlots(dateRange);
return createTasks(dateRange.start, dateRange.end, items, this.weeks);
}
onTasksChange() {
updateTaskData(this.tasks);
this.items.next(this.tasks);
}
reflow() {
this.updateContentHeight();
const content = this.content.nativeElement;
this.slotService.containerSize = content.scrollWidth;
if (this.contentHeight === 'auto') {
// bigger size changes cause the table to overflow the container and in horizontal scrollbars
// this changes the table and slots size during rendering before the browser re-adjusts the 100% table width
content.style.overflow = 'visible';
}
this.slotService.layout(this.eventHeight, this.eventsPerDay, this.adaptiveSlotHeight);
if (this.contentHeight === 'auto') {
content.style.overflow = 'auto';
}
this.syncTables();
}
onClick(e, eventType = e.type) {
if (eventType === 'click') {
const eventSlot = closestInScope(e.target, node => node.hasAttribute('data-slot-index'), this.element.nativeElement);
const navigateToDay = closestInScope(e.target, node => hasClasses(node, 'k-more-events k-nav-day'), eventSlot);
if (eventSlot && navigateToDay) {
const index = eventSlot.getAttribute('data-slot-index');
const slot = this.slotService.slotByIndex(index);
this.zone.run(() => {
this.viewState.navigateTo({ viewName: 'day', date: toLocalDate(slot.start) });
});
return;
}
}
super.onClick(e, eventType);
}
slotByIndex(index, _args) {
return this.slotService.slotByIndex(index);
}
onSelectDate(date) {
const dateRange = this.dateRange(date);
this.selectedDate = date;
this.viewState.notifyDateRange(dateRange);
this.weeks = this.createDaySlots(dateRange);
}
onAction(e) {
const now = getDate(this.selectedDate);
if (e.type === 'next') {
const next = this.newRange(now);
if (this.isInRange(next)) {
this.viewState.notifyNextDate(next);
}
}
if (e.type === 'prev') {
const next = this.newRange(now, -1);
if (this.isInRange(next)) {
this.viewState.notifyNextDate(next);
}
}
}
dateRange(date = this.selectedDate) {
return this.dateRangeFn(date, this.weekStart);
}
dragRanges(slot) {
return this.slotService.dragRanges(slot, this.dragging.offset);
}
dragHintSize(first, last) {
return {
width: toPx(last.rect.left - first.rect.left + last.rect.width),
height: toPx(first.height)
};
}
slotByPosition(x, y) {
return this.slotService.slotByPosition(x, y);
}
updateOngoingEvents() {
const disabled = !this.highlightOngoingEvents || this.highlightOngoingEvents.enabled === false;
if (!isDocumentAvailable() || disabled) {
return;
}
clearTimeout(this.ongoingEventsTimeout);
this.zone.runOutsideAngular(() => {
this.ongoingEventsTimeout = setTimeout(this.updateOngoingEvents, this.highlightOngoingEvents.updateInterval || MS_PER_MINUTE);
});
this.toggleOngoingClass();
}
currentTime() {
return new Date();
}
toggleOngoingClass() {
const now = this.currentTime();
const cssClass = isPresent(this.highlightOngoingEvents.cssClass) ? this.highlightOngoingEvents.cssClass : ONGOING_EVENT_CSS_CLASS;
this.eventElements.forEach((event) => {
const isOngoing = dateInRange(now, event.item.start, event.item.end);
this.renderer[isOngoing ? 'addClass' : 'removeClass'](event.nativeElement, cssClass);
});
}
createDaySlots({ start }) {
const weeks = [];
let date = start;
for (let idx = 0; idx < this.numberOfWeeks; idx++) {
const week = [];
weeks.push(week);
for (let dayIdx = 0; dayIdx < DAYS_IN_WEEK_COUNT; dayIdx++) {
week.push(date);
date = addDays(date, 1);
}
}
return weeks;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MonthViewRendererComponent, deps: [{ token: i1.ViewContextService }, { token: i2.ViewStateService }, { token: i3.IntlService }, { token: i4.MonthSlotService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i5.PDFService }, { token: i6.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i7.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MonthViewRendererComponent, isStandalone: true, selector: "month-view", inputs: { monthDaySlotTemplate: "monthDaySlotTemplate", highlightOngoingEvents: "highlightOngoingEvents", type: "type", eventsPerDay: "eventsPerDay", adaptiveSlotHeight: "adaptiveSlotHeight", numberOfWeeks: "numberOfWeeks", newRange: "newRange", dateRangeFn: "dateRangeFn" }, providers: [
MonthSlotService
], viewQueries: [{ propertyName: "eventElements", predicate: MonthViewItemComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
<table class="k-scheduler-layout k-scheduler-monthview">
<tbody>
<tr class="k-scheduler-head">
<td *ngIf="verticalResources.length">
<div class="k-scheduler-times" #timesHeader *ngIf="verticalResources.length">
<table class="k-scheduler-table" aria-hidden="true">
<tbody>
<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>
<!-- Days of the weeks titles -->
<table class="k-scheduler-table" aria-hidden="true">
<tbody>
<tr *ngFor="let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex">
<th *ngFor="let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex"
class="k-scheduler-cell k-heading-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 day of weeks[0]; trackBy: itemIndex" class="k-scheduler-cell k-heading-cell">
{{ day | kendoDate: 'EEEE' }}
</th>
</ng-container>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr class="k-scheduler-body">
<td *ngIf="verticalResources.length">
<div class="k-scheduler-times k-scheduler-resources" #times>
<table class="k-scheduler-table" #timesTable aria-hidden="true">
<tbody>
<ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex">
<tr>
<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 k-heading-cell" [ngClass]="{ 'k-last-resource': resourceIndex === verticalResources.length - 1 }">
<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-slot-cell k-heading-cell k-empty-slot">
</th>
</tr>
<tr *ngFor="let index of (numberOfWeeks - 1) | repeat; trackBy: itemIndex">
<th class="k-slot-cell k-heading-cell k-empty-slot"></th>
</tr>
</ng-container>
</tbody>
</table>
</div>
</td>
<td>
<div
class="k-scheduler-content"
tabindex="0"
#content
role="group"
[attr.aria-owns]="matchOwned(items | async)"
[style.overflowY]="'auto'">
<!-- Main content -->
<table class="k-scheduler-table" [class.k-scheduler-table-auto]="adaptiveSlotHeight" #contentTable role="presentation">
<tbody>
<ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex">
<tr *ngFor="let week of weeks; let rangeIndex = index; trackBy: itemIndex">
<ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex">
<td *ngFor="let day of week; let index = index; trackBy: itemIndex"
[monthSlot]="day"
[eventHeight]="eventHeight"
[eventsPerDay]="eventsPerDay"
[adaptiveSlotHeight]="adaptiveSlotHeight"
[monthDaySlotTemplateRef]="monthDaySlotTemplateRef"
[resourcesByIndex]="resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)"
[ngClass]="daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)"
[id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
[title]="cellTitle(day)"
[class.k-selected]="isSlotSelected({
start: toPlainDate(day),
end: addDay(toPlainDate(day)),
isAllDay: true,
resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
})"
class="k-scheduler-cell"
[class.k-other-month]="isDayInPreviousMonth(day) || isDayInNextMonth(day)"
>
</td>
</ng-container>
</tr>
</ng-container>
</tbody>
</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)"
role="button"
[kendoSchedulerFocusIndex]="itemResource.leafIdx"
[id]="item.elementId + '_' + itemResource.leafIdx"
monthViewItem
[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"
monthViewItem
[ngStyle]="hint.style"
[ngClass]="hint.class"
[dragHint]="true"
[eventTemplate]="eventTemplateRef"
[item]="hint.item"
[resources]="hint.resources">
</div>
<div *ngFor="let hint of resizeHints; trackBy: itemIndex;"
kendoResizeHint
[hint]="hint"
[ngClass]="hint.class"
[format]="resizeHintFormat">
</div>
</ng-template>
</kendo-hint-container>
</div>
</td>
</tr>
</tbody>
</table>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MonthSlotComponent, selector: "[monthSlot]", inputs: ["resourcesByIndex", "monthDaySlotTemplateRef", "eventsPerDay", "eventHeight", "adaptiveSlotHeight", "monthSlot"] }, { kind: "component", type: MonthViewItemComponent, selector: "[monthViewItem]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: RepeatPipe, name: "repeat" }, { kind: "pipe", type: ResourceIteratorPipe, name: "resourceIterator" }, { kind: "pipe", type: DatePipe, name: "kendoDate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MonthViewRendererComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'month-view',
providers: [
MonthSlotService
],
template: `
<table class="k-scheduler-layout k-scheduler-monthview">
<tbody>
<tr class="k-scheduler-head">
<td *ngIf="verticalResources.length">
<div class="k-scheduler-times" #timesHeader *ngIf="verticalResources.length">
<table class="k-scheduler-table" aria-hidden="true">
<tbody>
<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>
<!-- Days of the weeks titles -->
<table class="k-scheduler-table" aria-hidden="true">
<tbody>
<tr *ngFor="let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex">
<th *ngFor="let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex"
class="k-scheduler-cell k-heading-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 day of weeks[0]; trackBy: itemIndex" class="k-scheduler-cell k-heading-cell">
{{ day | kendoDate: 'EEEE' }}
</th>
</ng-container>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr class="k-scheduler-body">
<td *ngIf="verticalResources.length">
<div class="k-scheduler-times k-scheduler-resources" #times>
<table class="k-scheduler-table" #timesTable aria-hidden="true">
<tbody>
<ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let leafIndex = index; trackBy: itemIndex">
<tr>
<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 k-heading-cell" [ngClass]="{ 'k-last-resource': resourceIndex === verticalResources.length - 1 }">
<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-slot-cell k-heading-cell k-empty-slot">
</th>
</tr>
<tr *ngFor="let index of (numberOfWeeks - 1) | repeat; trackBy: itemIndex">
<th class="k-slot-cell k-heading-cell k-empty-slot"></th>
</tr>
</ng-container>
</tbody>
</table>
</div>
</td>
<td>
<div
class="k-scheduler-content"
tabindex="0"
#content
role="group"
[attr.aria-owns]="matchOwned(items | async)"
[style.overflowY]="'auto'">
<!-- Main content -->
<table class="k-scheduler-table" [class.k-scheduler-table-auto]="adaptiveSlotHeight" #contentTable role="presentation">
<tbody>
<ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex">
<tr *ngFor="let week of weeks; let rangeIndex = index; trackBy: itemIndex">
<ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex">
<td *ngFor="let day of week; let index = index; trackBy: itemIndex"
[monthSlot]="day"
[eventHeight]="eventHeight"
[eventsPerDay]="eventsPerDay"
[adaptiveSlotHeight]="adaptiveSlotHeight"
[monthDaySlotTemplateRef]="monthDaySlotTemplateRef"
[resourcesByIndex]="resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)"
[ngClass]="daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)"
[id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
[title]="cellTitle(day)"
[class.k-selected]="isSlotSelected({
start: toPlainDate(day),
end: addDay(toPlainDate(day)),
isAllDay: true,
resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
})"
class="k-scheduler-cell"
[class.k-other-month]="isDayInPreviousMonth(day) || isDayInNextMonth(day)"
>
</td>
</ng-container>
</tr>
</ng-container>
</tbody>
</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)"
role="button"
[kendoSchedulerFocusIndex]="itemResource.leafIdx"
[id]="item.elementId + '_' + itemResource.leafIdx"
monthViewItem
[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"
monthViewItem
[ngStyle]="hint.style"
[ngClass]="hint.class"
[dragHint]="true"
[eventTemplate]="eventTemplateRef"
[item]="hint.item"
[resources]="hint.resources">
</div>
<div *ngFor="let hint of resizeHints; trackBy: itemIndex;"
kendoResizeHint
[hint]="hint"
[ngClass]="hint.class"
[format]="resizeHintFormat">
</div>
</ng-template>
</kendo-hint-container>
</div>
</td>
</tr>
</tbody>
</table>
`,
standalone: true,
imports: [NgIf, NgFor, NgTemplateOutlet, NgClass, MonthSlotComponent, MonthViewItemComponent, NgStyle, FocusableDirective, HintContainerComponent, ResizeHintComponent, RepeatPipe, ResourceIteratorPipe, DatePipe, AsyncPipe]
}]
}], ctorParameters: function () { return [{ type: i1.ViewContextService }, { type: i2.ViewStateService }, { type: i3.IntlService }, { type: i4.MonthSlotService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i5.PDFService }, { type: i6.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i7.ScrollbarWidthService }]; }, propDecorators: { monthDaySlotTemplate: [{
type: Input
}], highlightOngoingEvents: [{
type: Input
}], type: [{
type: Input
}], eventsPerDay: [{
type: Input
}], adaptiveSlotHeight: [{
type: Input
}], numberOfWeeks: [{
type: Input
}], newRange: [{
type: Input
}], dateRangeFn: [{
type: Input
}], eventElements: [{
type: ViewChildren,
args: [MonthViewItemComponent]
}] } });