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

package/esm2015/views/month/month-view-renderer.component.js

@@ -0,0 +1,476 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, 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 { 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 { 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 * 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 "./month-view-item.component";
+import * as i8 from "../common/hint-container.component";
+import * as i9 from "../common/resize-hint.component";
+import * as i10 from "@angular/common";
+import * as i11 from "./month-slot.directive";
+import * as i12 from "../../navigation/focusable.directive";
+import * as i13 from "../common/resource-iterator.pipe";
+import * as i14 from "../common/repeat.pipe";
+/**
+ * @hidden
+ */
+export class MonthViewRendererComponent extends BaseView {
+    constructor(viewContext, viewState, intl, slotService, zone, element, renderer, pdfService, localization, changeDetector) {
+        super(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, changeDetector);
+        this.resizeHintFormat = { skeleton: 'Md' };
+        this.weeks = [];
+        this.updateOngoingEvents = this.updateOngoingEvents.bind(this);
+    }
+    get monthDaySlotTemplateRef() {
+        return this.monthDaySlotTemplate || (this.schedulerMonthDaySlotTemplate || {}).templateRef;
+    }
+    ngOnChanges(changes) {
+        if (isChanged('weekStart', changes)) {
+            this.onSelectDate(this.selectedDate);
+        }
+        super.ngOnChanges(changes);
+    }
+    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 = WEEKS_COUNT;
+        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);
+    }
+    optionsChange(changes) {
+        this.schedulerMonthDaySlotTemplate = changes.monthDaySlotTemplate;
+        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);
+        if (this.contentHeight === 'auto') {
+            content.style.overflow = '';
+        }
+        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 = firstDayOfMonth(addMonths(now, 1));
+            if (this.isInRange(next)) {
+                this.viewState.notifyNextDate(next);
+            }
+        }
+        if (e.type === 'prev') {
+            const next = firstDayOfMonth(addMonths(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 };
+    }
+    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 < WEEKS_COUNT; 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;
+    }
+}
+MonthViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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 }], target: i0.ɵɵFactoryTarget.Component });
+MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MonthViewRendererComponent, selector: "month-view", inputs: { monthDaySlotTemplate: "monthDaySlotTemplate", highlightOngoingEvents: "highlightOngoingEvents" }, 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">
+            <div class="k-scheduler-pane">
+                <div class="k-scheduler-times" #timesHeader *ngIf="verticalResources.length">
+                    <table class="k-scheduler-table" aria-hidden="true">
+                        <tr>
+                            <th></th>
+                        </tr>
+                    </table>
+                </div>
+                <div class="k-scheduler-header k-state-default" #header>
+                    <div class="k-scheduler-header-wrap" #headerWrap>
+                       <table class="k-scheduler-table" aria-hidden="true">
+                         <tr *ngFor="let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex">
+                             <th *ngFor="let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex"
+                                 class="k-slot-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
+                                <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(item, resource.textField) }}</ng-container>
+                                <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef" [ngTemplateOutletContext]="{ resource: item }"></ng-container>
+                             </th>
+                         </tr>
+                         <tr>
+                             <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex">
+                                 <th *ngFor="let day of weeks[0]; trackBy: itemIndex">
+                                     {{ day | kendoDate: 'EEEE' }}
+                                 </th>
+                             </ng-container>
+                         </tr>
+                       </table>
+                    </div>
+                </div>
+            </div>
+            <div class="k-scheduler-pane">
+                <div class="k-scheduler-times k-scheduler-resources" #times *ngIf="verticalResources.length">
+                    <table class="k-scheduler-table" #timesTable aria-hidden="true">
+                        <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" [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-empty-slot">
+                                </th>
+                            </tr>
+                            <tr *ngFor="let index of 5 | repeat; trackBy: itemIndex">
+                                <th class="k-slot-cell k-empty-slot"></th>
+                            </tr>
+                        </ng-container>
+                    </table>
+                </div>
+                <div class="k-scheduler-content" #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
+                                         [ngClass]="daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)"
+                                         [start]="day"
+                                         [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
+                                         [title]="cellTitle(day)"
+                                         [class.k-state-selected]="isSlotSelected({
+                                             start: toPlainDate(day),
+                                             end: addDay(toPlainDate(day)),
+                                             isAllDay: true,
+                                             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>
+                                </ng-container>
+                             </tr>
+                         </ng-container>
+                     </table>
+                     <ng-container *ngFor="let item of items | async; trackBy: itemIndex">
+                         <div *ngFor="let itemResource of item.resources; trackBy: itemIndex"
+                            [ngClass]="getEventClasses(item, itemResource.resources)"
+                            [ngStyle]="getEventStyles(item, itemResource)"
+                            [kendoSchedulerFocusIndex]="itemResource.leafIdx"
+                            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>
+            </div>
+        </div>
+    `, isInline: true, components: [{ type: i7.MonthViewItemComponent, selector: "[monthViewItem]" }, { type: i8.HintContainerComponent, selector: "kendo-hint-container" }, { type: i9.ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.MonthSlotDirective, selector: "[monthSlot]", inputs: ["start"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i12.FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex"] }], pipes: { "resourceIterator": i13.ResourceIteratorPipe, "kendoDate": i3.DatePipe, "repeat": i14.RepeatPipe, "async": i10.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'month-view',
+                    providers: [
+                        MonthSlotService
+                    ],
+                    template: `
+        <div class="k-scheduler-layout k-scheduler-monthview k-scheduler-flex-layout">
+            <div class="k-scheduler-pane">
+                <div class="k-scheduler-times" #timesHeader *ngIf="verticalResources.length">
+                    <table class="k-scheduler-table" aria-hidden="true">
+                        <tr>
+                            <th></th>
+                        </tr>
+                    </table>
+                </div>
+                <div class="k-scheduler-header k-state-default" #header>
+                    <div class="k-scheduler-header-wrap" #headerWrap>
+                       <table class="k-scheduler-table" aria-hidden="true">
+                         <tr *ngFor="let resource of horizontalResources; let resourceIndex = index; trackBy: itemIndex">
+                             <th *ngFor="let item of horizontalResources | resourceIterator : resourceIndex; trackBy: itemIndex"
+                                 class="k-slot-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
+                                <ng-container *ngIf="!groupHeaderTemplateRef">{{ getField(item, resource.textField) }}</ng-container>
+                                <ng-container *ngIf="groupHeaderTemplateRef" [ngTemplateOutlet]="groupHeaderTemplateRef" [ngTemplateOutletContext]="{ resource: item }"></ng-container>
+                             </th>
+                         </tr>
+                         <tr>
+                             <ng-container *ngFor="let resource of horizontalResources | resourceIterator; trackBy: itemIndex">
+                                 <th *ngFor="let day of weeks[0]; trackBy: itemIndex">
+                                     {{ day | kendoDate: 'EEEE' }}
+                                 </th>
+                             </ng-container>
+                         </tr>
+                       </table>
+                    </div>
+                </div>
+            </div>
+            <div class="k-scheduler-pane">
+                <div class="k-scheduler-times k-scheduler-resources" #times *ngIf="verticalResources.length">
+                    <table class="k-scheduler-table" #timesTable aria-hidden="true">
+                        <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" [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-empty-slot">
+                                </th>
+                            </tr>
+                            <tr *ngFor="let index of 5 | repeat; trackBy: itemIndex">
+                                <th class="k-slot-cell k-empty-slot"></th>
+                            </tr>
+                        </ng-container>
+                    </table>
+                </div>
+                <div class="k-scheduler-content" #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
+                                         [ngClass]="daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)"
+                                         [start]="day"
+                                         [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
+                                         [title]="cellTitle(day)"
+                                         [class.k-state-selected]="isSlotSelected({
+                                             start: toPlainDate(day),
+                                             end: addDay(toPlainDate(day)),
+                                             isAllDay: true,
+                                             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>
+                                </ng-container>
+                             </tr>
+                         </ng-container>
+                     </table>
+                     <ng-container *ngFor="let item of items | async; trackBy: itemIndex">
+                         <div *ngFor="let itemResource of item.resources; trackBy: itemIndex"
+                            [ngClass]="getEventClasses(item, itemResource.resources)"
+                            [ngStyle]="getEventStyles(item, itemResource)"
+                            [kendoSchedulerFocusIndex]="itemResource.leafIdx"
+                            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>
+            </div>
+        </div>
+    `
+                }]
+        }], 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 }]; }, propDecorators: { monthDaySlotTemplate: [{
+                type: Input
+            }], highlightOngoingEvents: [{
+                type: Input
+            }], eventElements: [{
+                type: ViewChildren,
+                args: [MonthViewItemComponent]
+            }] } });

package/esm2015/views/month/month-view.component.js

@@ -0,0 +1,108 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, ContentChild, forwardRef, Input, ChangeDetectionStrategy } from '@angular/core';
+import { SchedulerView } from '../../types';
+import { ConfigurationViewBase } from '../common/configuration-view-base';
+import { MonthDaySlotTemplateDirective } from '../templates';
+import { DEFAULT_EVENT_HEIGHT } from '../constants';
+import { isPresent } from '../../common/util';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "../view-context.service";
+import * as i3 from "../view-state.service";
+import * as i4 from "./month-view-renderer.component";
+/**
+ * The component for rendering the **Month** view.
+ */
+export class MonthViewComponent extends ConfigurationViewBase {
+    constructor(localization, changeDetector, viewContext, viewState) {
+        super(localization, changeDetector, viewContext, viewState);
+        /**
+         * The long-date format for displaying the
+         * selected date in the Scheduler toolbar.
+         * Defaults to `{0:Y}`
+         * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
+         */
+        this.selectedDateFormat = '{0:Y}';
+        /**
+         * The short-date format for displaying the
+         * selected date in the Scheduler toolbar.
+         * Defaults to `{0:y}`
+         * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting.
+         */
+        this.selectedShortDateFormat = '{0:y}';
+        /**
+         * The invariant name for this view (`month`).
+         */
+        this.name = 'month';
+    }
+    /**
+     * @hidden
+     */
+    get title() {
+        return this.localization.get('monthViewTitle');
+    }
+    get viewEventHeight() {
+        return isPresent(this.eventHeight) ? this.eventHeight : (this.schedulerOptions.eventHeight || DEFAULT_EVENT_HEIGHT);
+    }
+}
+MonthViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.ViewContextService }, { token: i3.ViewStateService }], target: i0.ɵɵFactoryTarget.Component });
+MonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MonthViewComponent, selector: "kendo-scheduler-month-view", inputs: { eventHeight: "eventHeight", selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat" }, providers: [{
+            provide: SchedulerView,
+            useExisting: forwardRef(() => MonthViewComponent)
+        }], queries: [{ propertyName: "monthDaySlotTemplate", first: true, predicate: MonthDaySlotTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #content>
+            <month-view
+                [eventHeight]="viewEventHeight"
+                [еventTemplate]="eventTemplate?.templateRef"
+                [slotClass]="viewSlotClass"
+                [eventClass]="viewEventClass"
+                [eventStyles]="viewEventStyles"
+                [groupHeaderTemplate]="groupHeaderTemplate?.templateRef"
+                [monthDaySlotTemplate]="monthDaySlotTemplate?.templateRef"
+                [selectedDateFormat]="selectedDateFormat"
+                [selectedShortDateFormat]="selectedShortDateFormat"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
+                [weekStart]="viewWeekStart">
+            </month-view>
+        </ng-template>
+    `, isInline: true, components: [{ type: i4.MonthViewRendererComponent, selector: "month-view", inputs: ["monthDaySlotTemplate", "highlightOngoingEvents"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'kendo-scheduler-month-view',
+                    providers: [{
+                            provide: SchedulerView,
+                            useExisting: forwardRef(() => MonthViewComponent)
+                        }],
+                    template: `
+        <ng-template #content>
+            <month-view
+                [eventHeight]="viewEventHeight"
+                [еventTemplate]="eventTemplate?.templateRef"
+                [slotClass]="viewSlotClass"
+                [eventClass]="viewEventClass"
+                [eventStyles]="viewEventStyles"
+                [groupHeaderTemplate]="groupHeaderTemplate?.templateRef"
+                [monthDaySlotTemplate]="monthDaySlotTemplate?.templateRef"
+                [selectedDateFormat]="selectedDateFormat"
+                [selectedShortDateFormat]="selectedShortDateFormat"
+                [highlightOngoingEvents]="viewHighlightOngoingEvents"
+                [weekStart]="viewWeekStart">
+            </month-view>
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.ViewContextService }, { type: i3.ViewStateService }]; }, propDecorators: { eventHeight: [{
+                type: Input
+            }], selectedDateFormat: [{
+                type: Input
+            }], selectedShortDateFormat: [{
+                type: Input
+            }], monthDaySlotTemplate: [{
+                type: ContentChild,
+                args: [MonthDaySlotTemplateDirective, { static: false }]
+            }] } });

package/esm2015/views/month/month-view.module.js

@@ -0,0 +1,41 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgModule } from '@angular/core';
+import { MonthViewItemComponent } from './month-view-item.component';
+import { MonthViewComponent } from './month-view.component';
+import { MonthViewRendererComponent } from './month-view-renderer.component';
+import { MonthSlotDirective } from './month-slot.directive';
+import { ViewsSharedModule } from '../common/views-shared.module';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class MonthViewModule {
+}
+MonthViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MonthViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewModule, declarations: [MonthViewComponent,
+        MonthViewRendererComponent,
+        MonthViewItemComponent,
+        MonthSlotDirective], imports: [ViewsSharedModule], exports: [MonthViewComponent] });
+MonthViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewModule, imports: [[
+            ViewsSharedModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        ViewsSharedModule
+                    ],
+                    exports: [
+                        MonthViewComponent
+                    ],
+                    declarations: [
+                        MonthViewComponent,
+                        MonthViewRendererComponent,
+                        MonthViewItemComponent,
+                        MonthSlotDirective
+                    ]
+                }]
+        }] });