@progress/kendo-angular-scheduler 21.4.1-develop.1 → 22.0.0-develop.1

package/esm2022/views/month/month-view-renderer.component.mjs

@@ -1,683 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 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, Output, EventEmitter } 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 { NgTemplateOutlet, NgClass, NgStyle, AsyncPipe } from '@angular/common';
-import { MoreEventsClickEvent } from '../../events/more-events-click';
-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 {
-    hiddenDays;
-    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;
-    moreEventsClick = new EventEmitter();
-    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) || isChanged('hiddenDays', 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, this.hiddenDays);
-    }
-    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);
-                const [resourceIndex, rangeIndex] = index.split(':').map(part => parseInt(part, 10));
-                const group = this.slotService['groups'][resourceIndex];
-                const range = group.dayRanges[rangeIndex];
-                this.zone.run(() => {
-                    const moreEventsEvent = new MoreEventsClickEvent();
-                    const filterSlotEvents = (isHidden) => range.items
-                        .filter(viewItem => {
-                        const itemData = viewItem.item.data[resourceIndex];
-                        return itemData.hidden === isHidden &&
-                            viewItem.item.startTime < slot.end &&
-                            viewItem.item.endTime > slot.start;
-                    })
-                        .map(viewItem => viewItem.item.event);
-                    moreEventsEvent.displayedEvents = filterSlotEvents(false);
-                    moreEventsEvent.moreEvents = filterSlotEvents(true);
-                    this.moreEventsClick.emit(moreEventsEvent);
-                    if (!moreEventsEvent.isDefaultPrevented()) {
-                        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++) {
-                if ((this.hiddenDays || []).indexOf(date.getDay()) === -1) {
-                    week.push(date);
-                }
-                date = addDays(date, 1);
-            }
-        }
-        return weeks;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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: "17.0.0", version: "18.2.14", type: MonthViewRendererComponent, isStandalone: true, selector: "month-view", inputs: { hiddenDays: "hiddenDays", monthDaySlotTemplate: "monthDaySlotTemplate", highlightOngoingEvents: "highlightOngoingEvents", type: "type", eventsPerDay: "eventsPerDay", adaptiveSlotHeight: "adaptiveSlotHeight", numberOfWeeks: "numberOfWeeks", newRange: "newRange", dateRangeFn: "dateRangeFn" }, outputs: { moreEventsClick: "moreEventsClick" }, 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">
-              @if (verticalResources.length) {
-                <td>
-                  @if (verticalResources.length) {
-                    <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>
-                        </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>
-                        @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-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>
-                          @for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
-                            @for (day of weeks[0]; track itemIndex($index, day)) {
-                              <th class="k-scheduler-cell k-heading-cell">
-                                {{ day | kendoDate: 'EEEE' }}
-                              </th>
-                            }
-                          }
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr class="k-scheduler-body">
-              @if (verticalResources.length) {
-                <td>
-                  <div class="k-scheduler-times k-scheduler-resources" #times>
-                    <table class="k-scheduler-table" #timesTable aria-hidden="true">
-                      <tbody>
-                        @for (resourceItem of verticalResources | resourceIterator; track itemIndex(leafIndex, resourceItem); let leafIndex = $index) {
-                          <tr>
-                            @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-heading-cell" [ngClass]="{ 'k-last-resource': resourceIndex === verticalResources.length - 1 }">
-                                  @if (!groupHeaderTemplateRef) {
-                                    {{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}
-                                  }
-                                  @if (groupHeaderTemplateRef) {
-                                    <ng-container [ngTemplateOutlet]="groupHeaderTemplateRef"
-                                    [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
-                                  }
-                                </th>
-                              }
-                            }
-                            <th class="k-slot-cell k-heading-cell k-empty-slot">
-                            </th>
-                          </tr>
-                          @for (index of (numberOfWeeks - 1) | repeat; track itemIndex($index, index)) {
-                            <tr>
-                              <th class="k-slot-cell k-heading-cell k-empty-slot"></th>
-                            </tr>
-                          }
-                        }
-                      </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>
-                      @for (resourceItem of verticalResources | resourceIterator; track itemIndex(verticalIndex, resourceItem); let verticalIndex = $index) {
-                        @for (week of weeks; track itemIndex(rangeIndex, week); let rangeIndex = $index) {
-                          <tr>
-                            @for (resource of horizontalResources | resourceIterator; track itemIndex(horizontalIndex, resource); let horizontalIndex = $index) {
-                              @for (day of week; track itemIndex(index, day); let index = $index) {
-                                <td
-                                  [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>
-                              }
-                            }
-                          </tr>
-                        }
-                      }
-                    </tbody>
-                  </table>
-                  @for (item of items | async; 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"
-                        monthViewItem
-                        [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"
-                          monthViewItem
-                          [ngStyle]="hint.style"
-                          [ngClass]="hint.class"
-                          [dragHint]="true"
-                          [eventTemplate]="eventTemplateRef"
-                          [item]="hint.item"
-                          [resources]="hint.resources">
-                        </div>
-                      }
-        
-                      @for (hint of resizeHints; track itemIndex($index, hint)) {
-                        <div
-                          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: 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: "18.2.14", 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">
-              @if (verticalResources.length) {
-                <td>
-                  @if (verticalResources.length) {
-                    <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>
-                        </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>
-                        @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-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>
-                          @for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
-                            @for (day of weeks[0]; track itemIndex($index, day)) {
-                              <th class="k-scheduler-cell k-heading-cell">
-                                {{ day | kendoDate: 'EEEE' }}
-                              </th>
-                            }
-                          }
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr class="k-scheduler-body">
-              @if (verticalResources.length) {
-                <td>
-                  <div class="k-scheduler-times k-scheduler-resources" #times>
-                    <table class="k-scheduler-table" #timesTable aria-hidden="true">
-                      <tbody>
-                        @for (resourceItem of verticalResources | resourceIterator; track itemIndex(leafIndex, resourceItem); let leafIndex = $index) {
-                          <tr>
-                            @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-heading-cell" [ngClass]="{ 'k-last-resource': resourceIndex === verticalResources.length - 1 }">
-                                  @if (!groupHeaderTemplateRef) {
-                                    {{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}
-                                  }
-                                  @if (groupHeaderTemplateRef) {
-                                    <ng-container [ngTemplateOutlet]="groupHeaderTemplateRef"
-                                    [ngTemplateOutletContext]="{ resource: verticalItem(leafIndex, resourceIndex) }"></ng-container>
-                                  }
-                                </th>
-                              }
-                            }
-                            <th class="k-slot-cell k-heading-cell k-empty-slot">
-                            </th>
-                          </tr>
-                          @for (index of (numberOfWeeks - 1) | repeat; track itemIndex($index, index)) {
-                            <tr>
-                              <th class="k-slot-cell k-heading-cell k-empty-slot"></th>
-                            </tr>
-                          }
-                        }
-                      </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>
-                      @for (resourceItem of verticalResources | resourceIterator; track itemIndex(verticalIndex, resourceItem); let verticalIndex = $index) {
-                        @for (week of weeks; track itemIndex(rangeIndex, week); let rangeIndex = $index) {
-                          <tr>
-                            @for (resource of horizontalResources | resourceIterator; track itemIndex(horizontalIndex, resource); let horizontalIndex = $index) {
-                              @for (day of week; track itemIndex(index, day); let index = $index) {
-                                <td
-                                  [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>
-                              }
-                            }
-                          </tr>
-                        }
-                      }
-                    </tbody>
-                  </table>
-                  @for (item of items | async; 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"
-                        monthViewItem
-                        [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"
-                          monthViewItem
-                          [ngStyle]="hint.style"
-                          [ngClass]="hint.class"
-                          [dragHint]="true"
-                          [eventTemplate]="eventTemplateRef"
-                          [item]="hint.item"
-                          [resources]="hint.resources">
-                        </div>
-                      }
-        
-                      @for (hint of resizeHints; track itemIndex($index, hint)) {
-                        <div
-                          kendoResizeHint
-                          [hint]="hint"
-                          [ngClass]="hint.class"
-                          [format]="resizeHintFormat">
-                        </div>
-                      }
-                    </ng-template>
-                  </kendo-hint-container>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        `,
-                    standalone: true,
-                    imports: [NgTemplateOutlet, NgClass, MonthSlotComponent, MonthViewItemComponent, NgStyle, FocusableDirective, HintContainerComponent, ResizeHintComponent, RepeatPipe, ResourceIteratorPipe, DatePipe, AsyncPipe]
-                }]
-        }], ctorParameters: () => [{ 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: { hiddenDays: [{
-                type: Input
-            }], monthDaySlotTemplate: [{
-                type: Input
-            }], highlightOngoingEvents: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], eventsPerDay: [{
-                type: Input
-            }], adaptiveSlotHeight: [{
-                type: Input
-            }], numberOfWeeks: [{
-                type: Input
-            }], newRange: [{
-                type: Input
-            }], dateRangeFn: [{
-                type: Input
-            }], moreEventsClick: [{
-                type: Output
-            }], eventElements: [{
-                type: ViewChildren,
-                args: [MonthViewItemComponent]
-            }] } });