@progress/kendo-angular-scheduler 4.3.7 → 11.0.0-develop.101

package/esm2020/views/month/month-slot.component.mjs

@@ -0,0 +1,129 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Input, ElementRef, Component, ChangeDetectorRef } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { BaseSlotDirective } from '../view-items/base-slot.directive';
+import { MonthSlotService } from './month-slot.service';
+import { firstElementChild } from '../../common/dom-queries';
+import { addUTCDays, toUTCDate } from '../utils';
+import { firstDayOfMonth, isEqualDate } from '@progress/kendo-date-math';
+import { moreHorizontalIcon } from '@progress/kendo-svg-icons';
+import * as i0 from "@angular/core";
+import * as i1 from "./month-slot.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "@progress/kendo-angular-icons";
+import * as i4 from "@angular/common";
+import * as i5 from "@progress/kendo-angular-intl";
+/**
+ * @hidden
+ */
+export class MonthSlotComponent extends BaseSlotDirective {
+    constructor(element, slotService, localization, cdr) {
+        super(element, slotService, localization);
+        this.cdr = cdr;
+        this.moreHorizontalIcon = moreHorizontalIcon;
+        this.isDaySlot = true;
+        this._linkHeight = null;
+    }
+    set start(value) {
+        this.startDate = toUTCDate(value);
+    }
+    get start() {
+        return this.startDate;
+    }
+    get end() {
+        return addUTCDays(this.start, 1);
+    }
+    isFirstDayOfMonth(day) {
+        return isEqualDate(day, firstDayOfMonth(day));
+    }
+    get linkHeight() {
+        if (this._linkHeight === null) {
+            const element = firstElementChild(this.nativeElement);
+            this._linkHeight = element ? element.offsetHeight + element.offsetTop : 0;
+        }
+        return this._linkHeight;
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.removeShowMore();
+    }
+    showMore(rect) {
+        this.showMoreButton = true;
+        this.style = `width: ${rect.width}px; left: ${rect.left}px; top: ${rect.top}px; border-color: inherit;`;
+        this.cdr.detectChanges();
+    }
+    hideMore() {
+        this.showMoreButton = false;
+        this.removeShowMore();
+    }
+    invalidate() {
+        super.invalidate();
+        this._linkHeight = null;
+        this.showMoreButton = false;
+        this.removeShowMore();
+    }
+    removeShowMore() {
+        this.showMoreButton = false;
+        this.cdr.detectChanges();
+    }
+}
+MonthSlotComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthSlotComponent, deps: [{ token: i0.ElementRef }, { token: i1.MonthSlotService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MonthSlotComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MonthSlotComponent, selector: "[monthSlot]", inputs: { resourcesByIndex: "resourcesByIndex", monthDaySlotTemplateRef: "monthDaySlotTemplateRef", start: ["monthSlot", "start"] }, usesInheritance: true, ngImport: i0, template: `
+        <span *ngIf="!monthDaySlotTemplateRef" aria-hidden="true" class="k-link k-nav-day">
+            {{ start | kendoDate: isFirstDayOfMonth(start) ? 'MMM dd' : 'dd' }}
+        </span>
+        <ng-container
+            *ngIf="monthDaySlotTemplateRef"
+            [ngTemplateOutlet]="monthDaySlotTemplateRef"
+            [ngTemplateOutletContext]="{ date: start, resources: resourcesByIndex }"
+            >
+        </ng-container>
+
+        <kendo-icon-wrapper
+            *ngIf="showMoreButton"
+            class="k-more-events k-button"
+            innerCssClass="k-i-more-horizontal"
+            name="more-horizontal"
+            [svgIcon]="moreHorizontalIcon"
+            [style]="style"
+            >
+        </kendo-icon-wrapper>
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "kendoDate": i5.DatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthSlotComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[monthSlot]',
+                    template: `
+        <span *ngIf="!monthDaySlotTemplateRef" aria-hidden="true" class="k-link k-nav-day">
+            {{ start | kendoDate: isFirstDayOfMonth(start) ? 'MMM dd' : 'dd' }}
+        </span>
+        <ng-container
+            *ngIf="monthDaySlotTemplateRef"
+            [ngTemplateOutlet]="monthDaySlotTemplateRef"
+            [ngTemplateOutletContext]="{ date: start, resources: resourcesByIndex }"
+            >
+        </ng-container>
+
+        <kendo-icon-wrapper
+            *ngIf="showMoreButton"
+            class="k-more-events k-button"
+            innerCssClass="k-i-more-horizontal"
+            name="more-horizontal"
+            [svgIcon]="moreHorizontalIcon"
+            [style]="style"
+            >
+        </kendo-icon-wrapper>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.MonthSlotService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { resourcesByIndex: [{
+                type: Input
+            }], monthDaySlotTemplateRef: [{
+                type: Input
+            }], start: [{
+                type: Input,
+                args: ['monthSlot']
+            }] } });

package/{esm2015/views/month/month-slot.service.js → esm2020/views/month/month-slot.service.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { orderBy } from '@progress/kendo-data-query';

package/{esm2015/views/month/month-view-item.component.js → esm2020/views/month/month-view-item.component.mjs}

@@ -1,14 +1,19 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Inject, LOCALE_ID } from '@angular/core';
+import { Component, ElementRef, Renderer2, Inject, LOCALE_ID } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { MonthSlotService } from './month-slot.service';
 import { BaseViewItem } from '../view-items/base-view-item';
+import { FocusService } from '../../navigation';
+import { arrowRotateCwIcon, arrowsNoRepeatIcon, caretAltLeftIcon, caretAltRightIcon, xIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "./month-slot.service";
 import * as i2 from "@progress/kendo-angular-l10n";
 import * as i3 from "../../navigation";
-import * as i4 from "@angular/common";
+import * as i4 from "@progress/kendo-angular-icons";
+import * as i5 from "@angular/common";
 /**
  * @hidden
  */
@@ -16,6 +21,11 @@ export class MonthViewItemComponent extends BaseViewItem {
     constructor(slotService, localization, focusService, element, renderer, localeId) {
         super(slotService, localization, focusService, element, renderer, localeId);
         this.localeId = localeId;
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.caretAltRightIcon = caretAltRightIcon;
+        this.arrowRotateCwIcon = arrowRotateCwIcon;
+        this.arrowsNoRepeatIcon = arrowsNoRepeatIcon;
+        this.xIcon = xIcon;
     }
     reflow() {
         if (this.item.data[this.resourceIndex].hidden) {
@@ -28,12 +38,27 @@ export class MonthViewItemComponent extends BaseViewItem {
         super.reflow();
     }
 }
-MonthViewItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MonthViewItemComponent, deps: [{ token: i1.MonthSlotService }, { token: i2.LocalizationService }, { token: i3.FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
-MonthViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MonthViewItemComponent, selector: "[monthViewItem]", usesInheritance: true, ngImport: i0, template: `
+MonthViewItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthViewItemComponent, deps: [{ token: i1.MonthSlotService }, { token: i2.LocalizationService }, { token: i3.FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
+MonthViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MonthViewItemComponent, selector: "[monthViewItem]", usesInheritance: true, ngImport: i0, template: `
         <span class="k-event-actions">
-            <span class="k-icon k-i-caret-alt-left" *ngIf="item.tail"></span>
-            <span class="k-icon k-i-arrow-rotate-cw" *ngIf="isRecurrence"></span>
-            <span class="k-icon k-i-arrows-no-repeat" *ngIf="isRecurrenceException"></span>
+            <kendo-icon-wrapper
+                *ngIf="item.tail"
+                name="caret-alt-left"
+                [svgIcon]="caretAltLeftIcon"
+                >
+            </kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                *ngIf="isRecurrence"
+                name="arrow-rotate-cw"
+                [svgIcon]="arrowRotateCwIcon"
+                >
+            </kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                *ngIf="isRecurrenceException"
+                name="arrows-no-repeat"
+                [svgIcon]="arrowsNoRepeatIcon"
+                >
+            </kendo-icon-wrapper>
         </span>
         <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
             [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: resources }">
@@ -44,26 +69,46 @@ MonthViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
 
         <span class="k-event-actions">
             <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
-                <span class="k-icon k-i-x"></span>
+                <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
             </span>
-            <span class="k-icon k-i-caret-alt-right" *ngIf="item.head"></span>
+            <kendo-icon-wrapper
+                *ngIf="item.head"
+                name="caret-alt-right"
+                [svgIcon]="caretAltRightIcon"
+                >
+            </kendo-icon-wrapper>
         </span>
 
         <ng-container *ngIf="resizable">
             <span class="k-resize-handle k-resize-w"></span>
             <span class="k-resize-handle k-resize-e"></span>
         </ng-container>
-    `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MonthViewItemComponent, decorators: [{
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthViewItemComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[monthViewItem]',
                     template: `
         <span class="k-event-actions">
-            <span class="k-icon k-i-caret-alt-left" *ngIf="item.tail"></span>
-            <span class="k-icon k-i-arrow-rotate-cw" *ngIf="isRecurrence"></span>
-            <span class="k-icon k-i-arrows-no-repeat" *ngIf="isRecurrenceException"></span>
+            <kendo-icon-wrapper
+                *ngIf="item.tail"
+                name="caret-alt-left"
+                [svgIcon]="caretAltLeftIcon"
+                >
+            </kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                *ngIf="isRecurrence"
+                name="arrow-rotate-cw"
+                [svgIcon]="arrowRotateCwIcon"
+                >
+            </kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                *ngIf="isRecurrenceException"
+                name="arrows-no-repeat"
+                [svgIcon]="arrowsNoRepeatIcon"
+                >
+            </kendo-icon-wrapper>
         </span>
         <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
             [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: resources }">
@@ -74,9 +119,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
 
         <span class="k-event-actions">
             <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
-                <span class="k-icon k-i-x"></span>
+                <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
             </span>
-            <span class="k-icon k-i-caret-alt-right" *ngIf="item.head"></span>
+            <kendo-icon-wrapper
+                *ngIf="item.head"
+                name="caret-alt-right"
+                [svgIcon]="caretAltRightIcon"
+                >
+            </kendo-icon-wrapper>
         </span>
 
         <ng-container *ngIf="resizable">

package/{esm2015/views/month/month-view-renderer.component.js → esm2020/views/month/month-view-renderer.component.mjs}

@@ -1,15 +1,20 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, ViewChildren } from '@angular/core';
-import { isChanged, isDocumentAvailable } from '@progress/kendo-angular-common';
-import { addDays, addMonths, firstDayInWeek, firstDayOfMonth, getDate, toLocalDate } from '@progress/kendo-date-math';
+import { Component, Input, NgZone, ElementRef, Renderer2, TemplateRef, ChangeDetectorRef, QueryList, ViewChildren } from '@angular/core';
+import { IntlService } from '@progress/kendo-angular-intl';
+import { isChanged, isDocumentAvailable, ScrollbarWidthService } from '@progress/kendo-angular-common';
+import { addDays, getDate, 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';
@@ -21,11 +26,11 @@ 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";
-import * as i8 from "./month-view-item.component";
-import * as i9 from "../common/hint-container.component";
-import * as i10 from "../common/resize-hint.component";
-import * as i11 from "@angular/common";
-import * as i12 from "./month-slot.directive";
+import * as i8 from "./month-slot.component";
+import * as i9 from "./month-view-item.component";
+import * as i10 from "../common/hint-container.component";
+import * as i11 from "../common/resize-hint.component";
+import * as i12 from "@angular/common";
 import * as i13 from "../../navigation/focusable.directive";
 import * as i14 from "../common/resource-iterator.pipe";
 import * as i15 from "../common/repeat.pipe";
@@ -35,6 +40,10 @@ import * as i15 from "../common/repeat.pipe";
 export class MonthViewRendererComponent extends BaseView {
     constructor(viewContext, viewState, intl, slotService, zone, element, renderer, pdfService, localization, changeDetector, scrollBarWidthService) {
         super(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, changeDetector, scrollBarWidthService);
+        /**
+         * The number of weeks to be rendered in the view
+         */
+        this.numberOfWeeks = WEEKS_COUNT;
         this.resizeHintFormat = { skeleton: 'Md' };
         this.weeks = [];
         this.updateOngoingEvents = this.updateOngoingEvents.bind(this);
@@ -66,7 +75,7 @@ export class MonthViewRendererComponent extends BaseView {
     }
     verticalRowspan(resourceIndex) {
         const resources = this.verticalResources;
-        let result = WEEKS_COUNT;
+        let result = this.numberOfWeeks;
         for (let idx = resourceIndex + 1; idx < resources.length; idx++) {
             result *= (resources[idx].data || []).length || 1;
         }
@@ -98,7 +107,7 @@ export class MonthViewRendererComponent extends BaseView {
         return addDays(dayStart, 1);
     }
     optionsChange(changes) {
-        this.schedulerMonthDaySlotTemplate = changes.monthDaySlotTemplate;
+        this.schedulerMonthDaySlotTemplate = changes[`${this.type}DaySlotTemplate`];
         super.optionsChange(changes);
     }
     createTasks(items, dateRange) {
@@ -151,25 +160,20 @@ export class MonthViewRendererComponent extends BaseView {
     onAction(e) {
         const now = getDate(this.selectedDate);
         if (e.type === 'next') {
-            const next = firstDayOfMonth(addMonths(now, 1));
+            const next = this.newRange(now);
             if (this.isInRange(next)) {
                 this.viewState.notifyNextDate(next);
             }
         }
         if (e.type === 'prev') {
-            const next = firstDayOfMonth(addMonths(now, -1));
+            const next = this.newRange(now, -1);
             if (this.isInRange(next)) {
                 this.viewState.notifyNextDate(next);
             }
         }
     }
     dateRange(date = this.selectedDate) {
-        const monthStart = firstDayOfMonth(getDate(date));
-        const start = firstDayInWeek(monthStart, this.weekStart);
-        const end = addDays(start, DAYS_IN_WEEK_COUNT * WEEKS_COUNT);
-        const text = this.intl.format(this.selectedDateFormat, monthStart);
-        const shortText = this.intl.format(this.selectedShortDateFormat, monthStart);
-        return { start, end, text, shortText };
+        return this.dateRangeFn(date, this.weekStart);
     }
     dragRanges(slot) {
         return this.slotService.dragRanges(slot, this.dragging.offset);
@@ -208,7 +212,7 @@ export class MonthViewRendererComponent extends BaseView {
     createDaySlots({ start }) {
         const weeks = [];
         let date = start;
-        for (let idx = 0; idx < WEEKS_COUNT; idx++) {
+        for (let idx = 0; idx < this.numberOfWeeks; idx++) {
             const week = [];
             weeks.push(week);
             for (let dayIdx = 0; dayIdx < DAYS_IN_WEEK_COUNT; dayIdx++) {
@@ -219,8 +223,8 @@ export class MonthViewRendererComponent extends BaseView {
         return weeks;
     }
 }
-MonthViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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 });
-MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MonthViewRendererComponent, selector: "month-view", inputs: { monthDaySlotTemplate: "monthDaySlotTemplate", highlightOngoingEvents: "highlightOngoingEvents" }, providers: [
+MonthViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", 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 });
+MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MonthViewRendererComponent, selector: "month-view", inputs: { monthDaySlotTemplate: "monthDaySlotTemplate", highlightOngoingEvents: "highlightOngoingEvents", type: "type", numberOfWeeks: "numberOfWeeks", newRange: "newRange", dateRangeFn: "dateRangeFn" }, providers: [
         MonthSlotService
     ], viewQueries: [{ propertyName: "eventElements", predicate: MonthViewItemComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <div class="k-scheduler-layout k-scheduler-monthview k-scheduler-flex-layout">
@@ -234,6 +238,7 @@ MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </div>
                 <div class="k-scheduler-header k-state-default" #header>
                     <div class="k-scheduler-header-wrap" #headerWrap>
+                        <!-- Days of the weeks titles -->
                        <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"
@@ -268,7 +273,7 @@ MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                                 <th class="k-slot-cell k-empty-slot">
                                 </th>
                             </tr>
-                            <tr *ngFor="let index of 5 | repeat; trackBy: itemIndex">
+                            <tr *ngFor="let index of (numberOfWeeks - 1) | repeat; trackBy: itemIndex">
                                 <th class="k-slot-cell k-empty-slot"></th>
                             </tr>
                         </ng-container>
@@ -280,14 +285,16 @@ MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                     #content
                     role="group"
                     [attr.aria-owns]="matchOwned(items | async)">
+                    <!-- Main content -->
                      <table class="k-scheduler-table k-user-select-none" #contentTable role="presentation">
                          <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
+                                         [monthSlot]="day"
+                                         [monthDaySlotTemplateRef]="monthDaySlotTemplateRef"
+                                         [resourcesByIndex]="resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)"
                                          [ngClass]="daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)"
-                                         [start]="day"
                                          [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
                                          [title]="cellTitle(day)"
                                          [class.k-selected]="isSlotSelected({
@@ -297,10 +304,7 @@ MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                                              resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
                                          })"
                                         >
-                                        <span aria-hidden="true" class="k-link k-nav-day" *ngIf="!monthDaySlotTemplateRef">{{ day | kendoDate: 'dd' }}</span>
-                                        <ng-container *ngIf="monthDaySlotTemplateRef" [ngTemplateOutlet]="monthDaySlotTemplateRef"
-                                            [ngTemplateOutletContext]="{ date: day, resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex) }"></ng-container>
-                                     </td>
+                                    </td>
                                 </ng-container>
                              </tr>
                          </ng-container>
@@ -346,8 +350,8 @@ MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </div>
             </div>
         </div>
-    `, isInline: true, components: [{ type: i8.MonthViewItemComponent, selector: "[monthViewItem]" }, { type: i9.HintContainerComponent, selector: "kendo-hint-container" }, { type: i10.ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.MonthSlotDirective, selector: "[monthSlot]", inputs: ["start"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i13.FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }], pipes: { "resourceIterator": i14.ResourceIteratorPipe, "kendoDate": i3.DatePipe, "repeat": i15.RepeatPipe, "async": i11.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MonthViewRendererComponent, decorators: [{
+    `, isInline: true, components: [{ type: i8.MonthSlotComponent, selector: "[monthSlot]", inputs: ["resourcesByIndex", "monthDaySlotTemplateRef", "monthSlot"] }, { type: i9.MonthViewItemComponent, selector: "[monthViewItem]" }, { type: i10.HintContainerComponent, selector: "kendo-hint-container" }, { type: i11.ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }], directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i13.FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }], pipes: { "resourceIterator": i14.ResourceIteratorPipe, "kendoDate": i3.DatePipe, "repeat": i15.RepeatPipe, "async": i12.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthViewRendererComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -367,6 +371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 </div>
                 <div class="k-scheduler-header k-state-default" #header>
                     <div class="k-scheduler-header-wrap" #headerWrap>
+                        <!-- Days of the weeks titles -->
                        <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"
@@ -401,7 +406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                                 <th class="k-slot-cell k-empty-slot">
                                 </th>
                             </tr>
-                            <tr *ngFor="let index of 5 | repeat; trackBy: itemIndex">
+                            <tr *ngFor="let index of (numberOfWeeks - 1) | repeat; trackBy: itemIndex">
                                 <th class="k-slot-cell k-empty-slot"></th>
                             </tr>
                         </ng-container>
@@ -413,14 +418,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                     #content
                     role="group"
                     [attr.aria-owns]="matchOwned(items | async)">
+                    <!-- Main content -->
                      <table class="k-scheduler-table k-user-select-none" #contentTable role="presentation">
                          <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
+                                         [monthSlot]="day"
+                                         [monthDaySlotTemplateRef]="monthDaySlotTemplateRef"
+                                         [resourcesByIndex]="resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)"
                                          [ngClass]="daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)"
-                                         [start]="day"
                                          [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
                                          [title]="cellTitle(day)"
                                          [class.k-selected]="isSlotSelected({
@@ -430,10 +437,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                                              resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
                                          })"
                                         >
-                                        <span aria-hidden="true" class="k-link k-nav-day" *ngIf="!monthDaySlotTemplateRef">{{ day | kendoDate: 'dd' }}</span>
-                                        <ng-container *ngIf="monthDaySlotTemplateRef" [ngTemplateOutlet]="monthDaySlotTemplateRef"
-                                            [ngTemplateOutletContext]="{ date: day, resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex) }"></ng-container>
-                                     </td>
+                                    </td>
                                 </ng-container>
                              </tr>
                          </ng-container>
@@ -485,6 +489,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], highlightOngoingEvents: [{
                 type: Input
+            }], type: [{
+                type: Input
+            }], numberOfWeeks: [{
+                type: Input
+            }], newRange: [{
+                type: Input
+            }], dateRangeFn: [{
+                type: Input
             }], eventElements: [{
                 type: ViewChildren,
                 args: [MonthViewItemComponent]