@progress/kendo-angular-scheduler 16.11.0-develop.9 → 16.12.0-develop.1

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1727855434,
-    version: '16.11.0-develop.9',
+    publishDate: 1728573087,
+    version: '16.12.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/scheduler.module.mjs

@@ -6,7 +6,7 @@ import { NgModule } from '@angular/core';
 import { KENDO_SCHEDULER } from './directives';
 import { ResizeBatchService } from '@progress/kendo-angular-common';
 import { DialogContainerService, DialogService, WindowContainerService, WindowService, } from '@progress/kendo-angular-dialog';
-import { CalendarDOMService, CenturyViewService, DayPeriodService, DecadeViewService, HoursService, MillisecondsService, MinutesService, MonthViewService, NavigationService, SecondsService, TimePickerDOMService, WeekNamesService, YearViewService, } from '@progress/kendo-angular-dateinputs';
+import { CalendarDOMService, CenturyViewService, DayPeriodService, DecadeViewService, HoursService, MillisecondsService, MinutesService, MonthViewService, NavigationService, SecondsService, TimePickerDOMService, YearViewService, } from '@progress/kendo-angular-dateinputs';
 import { IconsService } from '@progress/kendo-angular-icons';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { ViewContextService } from './views/view-context.service';
@@ -90,7 +90,6 @@ SchedulerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
         DecadeViewService,
         MonthViewService,
         YearViewService,
-        WeekNamesService,
         NavigationService,
         TimePickerDOMService,
         HoursService,
@@ -123,7 +122,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         DecadeViewService,
                         MonthViewService,
                         YearViewService,
-                        WeekNamesService,
                         NavigationService,
                         TimePickerDOMService,
                         HoursService,

package/esm2020/views/constants.mjs

@@ -25,3 +25,7 @@ export const ONGOING_EVENT_CSS_CLASS = 'k-event-ongoing';
 export const DAYS_IN_WEEK_COUNT = 7;
 /** @hidden */
 export const WEEKS_COUNT = 6;
+/** @hidden */
+export const MORE_BUTTON_HEIGHT = 13;
+/** @hidden */
+export const EVENT_SPACING = 2;

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

@@ -84,7 +84,7 @@ export class MonthSlotComponent extends BaseSlotDirective {
     }
 }
 MonthSlotComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", type: MonthSlotComponent, isStandalone: true, selector: "[monthSlot]", inputs: { resourcesByIndex: "resourcesByIndex", monthDaySlotTemplateRef: "monthDaySlotTemplateRef", day: ["monthSlot", "day"] }, usesInheritance: true, ngImport: i0, template: `
+MonthSlotComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MonthSlotComponent, isStandalone: true, selector: "[monthSlot]", inputs: { resourcesByIndex: "resourcesByIndex", monthDaySlotTemplateRef: "monthDaySlotTemplateRef", eventsPerDay: "eventsPerDay", eventHeight: "eventHeight", adaptiveSlotHeight: "adaptiveSlotHeight", day: ["monthSlot", "day"] }, usesInheritance: true, ngImport: i0, template: `
         <span *ngIf="!monthDaySlotTemplateRef" aria-hidden="true" class="k-link k-nav-day">
             {{ day | kendoDate: isFirstDayOfMonth(day) ? 'MMM dd' : 'dd' }}
         </span>
@@ -134,6 +134,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], monthDaySlotTemplateRef: [{
                 type: Input
+            }], eventsPerDay: [{
+                type: Input
+            }], eventHeight: [{
+                type: Input
+            }], adaptiveSlotHeight: [{
+                type: Input
             }], day: [{
                 type: Input,
                 args: ['monthSlot']

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

@@ -6,10 +6,7 @@ import { orderBy } from '@progress/kendo-data-query';
 import { intersects, findRowIndex, addUTCDays, rectContains, dateWithTime } from '../utils';
 import { ItemMap } from '../view-items/item-map';
 import { BaseSlotService } from '../view-items/base-slot.service';
-import { BORDER_WIDTH } from '../constants';
-//better try to measure this one
-const MORE_BUTTON_HEIGHT = 13;
-const EVENT_OFFSET = 2;
+import { BORDER_WIDTH, DEFAULT_EVENT_HEIGHT, EVENT_SPACING, MORE_BUTTON_HEIGHT } from '../constants';
 /**
  * @hidden
  */
@@ -73,8 +70,17 @@ export class SlotRange {
     unregisterSlot(slot) {
         this.slotMap.removeItem(slot.id.index, slot);
     }
-    layout(eventHeight) {
+    layout(eventHeight, eventsPerDay, adaptiveSlotHeight) {
+        const dateHeader = this.slots[0].element.nativeElement.firstElementChild;
         if (!this.hasItems) {
+            if (eventHeight !== 'auto') {
+                const eventsTotalHeight = adaptiveSlotHeight ? eventHeight : eventHeight * eventsPerDay;
+                const height = (eventsTotalHeight + EVENT_SPACING) + dateHeader.offsetHeight + MORE_BUTTON_HEIGHT + EVENT_SPACING;
+                this.slots.forEach(slot => {
+                    slot.height = height;
+                    slot.element.nativeElement.style.height = height + 'px';
+                });
+            }
             return;
         }
         const items = this.items;
@@ -89,24 +95,76 @@ export class SlotRange {
             const rect = slot.rect;
             const data = event.item.data[event.resourceIndex];
             data.rowIndex = findRowIndex(value.events, data);
-            if (value.height + eventHeight + EVENT_OFFSET + MORE_BUTTON_HEIGHT > rect.height || data.hidden) {
+            let showMore;
+            const _eventHeight = eventHeight === 'auto' ? DEFAULT_EVENT_HEIGHT : eventHeight;
+            if (eventHeight === 'auto' || eventsPerDay) {
+                showMore = eventsPerDay && eventsPerDay !== 'auto' && data.rowIndex >= eventsPerDay;
+            }
+            else {
+                showMore = value.height + _eventHeight + EVENT_SPACING + MORE_BUTTON_HEIGHT > rect.height || data.hidden;
+            }
+            if (showMore) {
                 data.hidden = true;
-                slot.showMore({ width: rect.width, left: rect.left, top: rect.top + slot.linkHeight + ((data.rowIndex) * (eventHeight + EVENT_OFFSET)) });
+                // Needed for when eventHeight is 'auto' in order to render the button at later point
+                slot.hasShowMore = true;
+                // If eventHeight is 'auto', showMore button needs to be displayed after slot accumulated height is calculated
+                if (eventHeight !== 'auto') {
+                    slot.showMore({ width: rect.width, left: rect.left, top: rect.top + slot.linkHeight + ((data.rowIndex) * (eventHeight + EVENT_SPACING)) });
+                }
             }
             else {
+                if (eventHeight === 'auto') {
+                    // If multiday event spanning on new row (group), it will be rendered on top (1st item)
+                    // for simplicity and for consistency with jQuery's implementation
+                    if (event.item.tail) {
+                        event.item.data[event.resourceIndex].rowIndex = 0;
+                    }
+                    if (value.events[data.rowIndex]) {
+                        event.item.data[event.resourceIndex].rowIndex = value.events.length;
+                    }
+                }
                 value.events[data.rowIndex] = event;
-                if (!event.rect) {
-                    event.rect = {
-                        top: rect.top + slot.linkHeight + (data.rowIndex * (eventHeight + EVENT_OFFSET)),
-                        left: rect.left,
-                        height: eventHeight,
-                        width: 0
-                    };
+                if (eventHeight !== 'auto') {
+                    // eventHeight is fixed => each event can be rendered on the go
+                    if (!event.rect) {
+                        event.rect = {
+                            top: rect.top + slot.linkHeight + (data.rowIndex * (eventHeight + EVENT_SPACING)),
+                            left: rect.left,
+                            height: eventHeight,
+                            width: 0
+                        };
+                    }
+                    event.rect.width += rect.width + BORDER_WIDTH;
+                    value.height += eventHeight + EVENT_SPACING;
+                    // Calculate tha actual rendered items to be able to calculate the height
+                    if (adaptiveSlotHeight) {
+                        slots.forEach(_slot => {
+                            if (_slot.key === slot.key) {
+                                _slot.eventsCount = !_slot.eventsCount || data.rowIndex + 1 > _slot.eventsCount ? data.rowIndex + 1 : _slot.eventsCount;
+                            }
+                        });
+                    }
                 }
-                event.rect.width += rect.width + BORDER_WIDTH;
-                value.height += eventHeight + EVENT_OFFSET;
             }
         }));
+        if (eventHeight === 'auto') {
+            // eventHeight is 'auto' => first get all slotItems for a slot and then render them, after they are in the correct rendering order (L140-L146)
+            this.renderAutoHeightEvents(slotItems, dateHeader);
+        }
+        else if (eventsPerDay) {
+            slots.forEach(slot => {
+                const multiplier = !adaptiveSlotHeight ? eventsPerDay : slot.eventsCount;
+                const height = BORDER_WIDTH +
+                    dateHeader.offsetHeight +
+                    EVENT_SPACING +
+                    (multiplier * (eventHeight + EVENT_SPACING)) +
+                    MORE_BUTTON_HEIGHT +
+                    EVENT_SPACING;
+                slot.eventsCount = 0;
+                slot.height = height;
+                slot.element.nativeElement.style.height = height + 'px';
+            });
+        }
         sorted.forEach(event => {
             if (event.rect) {
                 event.rect.width -= BORDER_WIDTH;
@@ -114,6 +172,73 @@ export class SlotRange {
             event.reflow();
         });
     }
+    renderAutoHeightEvents(slotItems, dateHeader) {
+        // Iterate through the slotItems
+        Object.keys(slotItems).forEach((key) => {
+            const slotItem = slotItems[key];
+            const slotRect = slotItem.slot.rect;
+            // Iterate over each event in the events array
+            let accumulatedHeight = dateHeader.offsetHeight;
+            slotItem.events.forEach((event, index) => {
+                const prevEvent = slotItem.events[index - 1];
+                if (!event.rect) {
+                    // Each event is position depending on where the previous event is already positioned
+                    const eventOffset = !prevEvent ? 0 : prevEvent.element.nativeElement.clientHeight + prevEvent.rect.top;
+                    const top = !prevEvent ? slotRect.top + slotItem.slot.linkHeight : eventOffset + EVENT_SPACING;
+                    event.rect = {
+                        top: top,
+                        left: slotRect.left,
+                        width: 0
+                    };
+                }
+                // The number of slots an event spans in current group
+                let eventWidth;
+                if (event.item.isMultiDay) {
+                    const slotMatch = this.slots.filter(slot => intersects(event.item.startTime, event.item.endTime, slot.start, slot.end));
+                    eventWidth = slotMatch.reduce((acc, currentValue) => acc + currentValue.rect.width + BORDER_WIDTH, 0) - BORDER_WIDTH;
+                    if (prevEvent) {
+                        const newHeight = prevEvent.element.nativeElement.clientHeight + prevEvent.rect.top;
+                        const newTop = newHeight + EVENT_SPACING;
+                        // If event is spanning in multiple slots, it needs to be positioned so that its top
+                        // is calculated based on the most 'accumulated height' among all slots
+                        if (event.rect.top < newTop) {
+                            event.rect.top = newTop;
+                            // Consequently, all previously renderd events (after that multi-span event) need to 
+                            // be reposition so that they don't overlap
+                            slotMatch.forEach(slot => {
+                                const slotKey = slot.id.resourceIndex + ':' + slot.id.rangeIndex + ':' + slot.id.index;
+                                if (slotKey !== key) {
+                                    slotItems[slotKey].events.forEach((e, index) => {
+                                        if (index > event.item.data[event.resourceIndex].rowIndex) {
+                                            e.rect.top = event.rect.top + event.element.nativeElement.clientHeight + EVENT_SPACING;
+                                        }
+                                    });
+                                }
+                            });
+                        }
+                    }
+                }
+                else {
+                    eventWidth = slotRect.width;
+                }
+                event.rect.width = eventWidth;
+                event.element.nativeElement.style.width = event.rect.width + 'px';
+                event.element.nativeElement.style.height = 'auto';
+                accumulatedHeight += event.element.nativeElement.clientHeight + EVENT_SPACING;
+            });
+            const slotHeight = slotItem.height = BORDER_WIDTH +
+                dateHeader.offsetHeight +
+                EVENT_SPACING +
+                accumulatedHeight +
+                (slotItem.slot.hasShowMore ? 0 : MORE_BUTTON_HEIGHT);
+            slotItem.slot.element.nativeElement.style.height = slotHeight + 'px';
+            // After events are rendered, position the showMore button
+            if (slotItem.slot.hasShowMore) {
+                const top = slotRect.top + slotItem.slot.linkHeight + accumulatedHeight - MORE_BUTTON_HEIGHT;
+                slotItem.slot.showMore({ width: slotRect.width, left: slotRect.left, top: top });
+            }
+        });
+    }
 }
 /**
  * @hidden
@@ -168,8 +293,8 @@ export class MonthResourceGroup {
  * @hidden
  */
 export class MonthSlotService extends BaseSlotService {
-    layout(eventHeight) {
-        this.groups.forEach((group) => group.forEachRange(range => range.layout(eventHeight)));
+    layout(eventHeight, eventsPerDay, adaptiveSlotHeight) {
+        this.groups.forEach((group) => group.forEachRange(range => range.layout(eventHeight, eventsPerDay, adaptiveSlotHeight)));
     }
     slotByIndex(slotIndex) {
         const [resourceIndex, rangeIndex, index] = slotIndex.split(':').map(part => parseInt(part, 10));

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

@@ -56,6 +56,15 @@ export class MonthViewRendererComponent extends BaseView {
         }
         super.ngOnChanges(changes);
     }
+    ngOnInit() {
+        this.viewState.layoutEnd.subscribe(() => {
+            if (this.adaptiveSlotHeight) {
+                this.slotService.invalidate();
+                this.reflow();
+            }
+        });
+        super.ngOnInit();
+    }
     ngAfterViewInit() {
         this.updateOngoingEvents();
         super.ngAfterViewInit();
@@ -134,7 +143,7 @@ export class MonthViewRendererComponent extends BaseView {
             // 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.slotService.layout(this.eventHeight, this.eventsPerDay, this.adaptiveSlotHeight);
         if (this.contentHeight === 'auto') {
             content.style.overflow = 'auto';
         }
@@ -231,7 +240,7 @@ export class MonthViewRendererComponent extends BaseView {
     }
 }
 MonthViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", type: MonthViewRendererComponent, isStandalone: true, selector: "month-view", inputs: { monthDaySlotTemplate: "monthDaySlotTemplate", highlightOngoingEvents: "highlightOngoingEvents", type: "type", numberOfWeeks: "numberOfWeeks", newRange: "newRange", dateRangeFn: "dateRangeFn" }, providers: [
+MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MonthViewRendererComponent, isStandalone: true, selector: "month-view", inputs: { monthDaySlotTemplate: "monthDaySlotTemplate", highlightOngoingEvents: "highlightOngoingEvents", type: "type", eventsPerDay: "eventsPerDay", adaptiveSlotHeight: "adaptiveSlotHeight", numberOfWeeks: "numberOfWeeks", newRange: "newRange", dateRangeFn: "dateRangeFn" }, providers: [
         MonthSlotService
     ], viewQueries: [{ propertyName: "eventElements", predicate: MonthViewItemComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <table class="k-scheduler-layout k-scheduler-monthview">
@@ -308,13 +317,16 @@ MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
                             [attr.aria-owns]="matchOwned(items | async)"
                             [style.overflowY]="'auto'">
                             <!-- Main content -->
-                            <table class="k-scheduler-table" #contentTable role="presentation">
+                            <table class="k-scheduler-table" [class.k-scheduler-table-auto]="adaptiveSlotHeight" #contentTable role="presentation">
                                 <tbody>
                                     <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex">
                                         <tr *ngFor="let week of weeks;  let rangeIndex = index; trackBy: itemIndex">
                                             <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex">
                                                 <td *ngFor="let day of week; let index = index; trackBy: itemIndex"
                                                     [monthSlot]="day"
+                                                    [eventHeight]="eventHeight"
+                                                    [eventsPerDay]="eventsPerDay"
+                                                    [adaptiveSlotHeight]="adaptiveSlotHeight"
                                                     [monthDaySlotTemplateRef]="monthDaySlotTemplateRef"
                                                     [resourcesByIndex]="resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)"
                                                     [ngClass]="daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)"
@@ -378,7 +390,7 @@ MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
                 </tr>
             </tbody>
         </table>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MonthSlotComponent, selector: "[monthSlot]", inputs: ["resourcesByIndex", "monthDaySlotTemplateRef", "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" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MonthSlotComponent, selector: "[monthSlot]", inputs: ["resourcesByIndex", "monthDaySlotTemplateRef", "eventsPerDay", "eventHeight", "adaptiveSlotHeight", "monthSlot"] }, { kind: "component", type: MonthViewItemComponent, selector: "[monthViewItem]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "component", type: HintContainerComponent, selector: "kendo-hint-container" }, { kind: "component", type: ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }, { kind: "pipe", type: RepeatPipe, name: "repeat" }, { kind: "pipe", type: ResourceIteratorPipe, name: "resourceIterator" }, { kind: "pipe", type: DatePipe, name: "kendoDate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MonthViewRendererComponent, decorators: [{
             type: Component,
             args: [{
@@ -462,13 +474,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                             [attr.aria-owns]="matchOwned(items | async)"
                             [style.overflowY]="'auto'">
                             <!-- Main content -->
-                            <table class="k-scheduler-table" #contentTable role="presentation">
+                            <table class="k-scheduler-table" [class.k-scheduler-table-auto]="adaptiveSlotHeight" #contentTable role="presentation">
                                 <tbody>
                                     <ng-container *ngFor="let resourceItem of verticalResources | resourceIterator; let verticalIndex = index; trackBy: itemIndex">
                                         <tr *ngFor="let week of weeks;  let rangeIndex = index; trackBy: itemIndex">
                                             <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex">
                                                 <td *ngFor="let day of week; let index = index; trackBy: itemIndex"
                                                     [monthSlot]="day"
+                                                    [eventHeight]="eventHeight"
+                                                    [eventsPerDay]="eventsPerDay"
+                                                    [adaptiveSlotHeight]="adaptiveSlotHeight"
                                                     [monthDaySlotTemplateRef]="monthDaySlotTemplateRef"
                                                     [resourcesByIndex]="resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)"
                                                     [ngClass]="daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)"
@@ -542,6 +557,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], type: [{
                 type: Input
+            }], eventsPerDay: [{
+                type: Input
+            }], adaptiveSlotHeight: [{
+                type: Input
             }], numberOfWeeks: [{
                 type: Input
             }], newRange: [{

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

@@ -52,9 +52,32 @@ export class MonthViewComponent extends ConfigurationViewBase {
     get title() {
         return this.localization.get('monthViewTitle');
     }
+    /**
+     * The number of events to be rendered per day. Setting this property to 'auto'
+     * will display all events in the respective slot.
+     * > When set to `'auto'` it will automatically set the `adaptiveSlotHeight` property to `true`.
+     * > If set to `0` it will be normalized internally to `1`.
+     * @default 2
+     */
+    set eventsPerDay(events) {
+        this._eventsPerDay = !events ? 1 : events;
+    }
+    get eventsPerDay() {
+        return this._eventsPerDay;
+    }
     get viewEventHeight() {
         return isPresent(this.eventHeight) ? this.eventHeight : (this.schedulerOptions.eventHeight || DEFAULT_EVENT_HEIGHT);
     }
+    ngOnChanges(changes) {
+        if ((changes['eventHeight'] && changes['eventHeight'].currentValue === 'auto') ||
+            (changes['eventsPerDay'] && changes['eventsPerDay'].currentValue === 'auto')) {
+            this.adaptiveSlotHeight = true;
+        }
+        if ((changes['eventHeight'] && changes['eventHeight'].currentValue === 'auto' && !this.eventsPerDay) ||
+            (changes['adaptiveSlotHeight'] && changes['adaptiveSlotHeight'].currentValue === true && !this.eventsPerDay)) {
+            this.eventsPerDay = 2;
+        }
+    }
     /**
      * @hidden
      */
@@ -74,14 +97,16 @@ export class MonthViewComponent extends ConfigurationViewBase {
     }
 }
 MonthViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MonthViewComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.ViewContextService }, { token: i3.ViewStateService }, { token: i4.IntlService }], target: i0.ɵɵFactoryTarget.Component });
-MonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MonthViewComponent, isStandalone: true, selector: "kendo-scheduler-month-view", inputs: { eventHeight: "eventHeight", selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat" }, providers: [{
+MonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MonthViewComponent, isStandalone: true, selector: "kendo-scheduler-month-view", inputs: { eventsPerDay: "eventsPerDay", eventHeight: "eventHeight", adaptiveSlotHeight: "adaptiveSlotHeight", selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat" }, providers: [{
             provide: SchedulerView,
             useExisting: forwardRef(() => MonthViewComponent)
-        }], queries: [{ propertyName: "monthDaySlotTemplate", first: true, predicate: MonthDaySlotTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        }], queries: [{ propertyName: "monthDaySlotTemplate", first: true, predicate: MonthDaySlotTemplateDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-template #content>
             <month-view
                 type="month"
                 [eventHeight]="viewEventHeight"
+                [adaptiveSlotHeight]="adaptiveSlotHeight"
+                [eventsPerDay]="eventsPerDay"
                 [eventTemplate]="eventTemplate?.templateRef"
                 [slotClass]="viewSlotClass"
                 [eventClass]="viewEventClass"
@@ -96,7 +121,7 @@ MonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
                 [newRange]="newRange">
             </month-view>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: MonthViewRendererComponent, selector: "month-view", inputs: ["monthDaySlotTemplate", "highlightOngoingEvents", "type", "numberOfWeeks", "newRange", "dateRangeFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "component", type: MonthViewRendererComponent, selector: "month-view", inputs: ["monthDaySlotTemplate", "highlightOngoingEvents", "type", "eventsPerDay", "adaptiveSlotHeight", "numberOfWeeks", "newRange", "dateRangeFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MonthViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -111,6 +136,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             <month-view
                 type="month"
                 [eventHeight]="viewEventHeight"
+                [adaptiveSlotHeight]="adaptiveSlotHeight"
+                [eventsPerDay]="eventsPerDay"
                 [eventTemplate]="eventTemplate?.templateRef"
                 [slotClass]="viewSlotClass"
                 [eventClass]="viewEventClass"
@@ -129,7 +156,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     standalone: true,
                     imports: [MonthViewRendererComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.ViewContextService }, { type: i3.ViewStateService }, { type: i4.IntlService }]; }, propDecorators: { eventHeight: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.ViewContextService }, { type: i3.ViewStateService }, { type: i4.IntlService }]; }, propDecorators: { eventsPerDay: [{
+                type: Input
+            }], eventHeight: [{
+                type: Input
+            }], adaptiveSlotHeight: [{
                 type: Input
             }], selectedDateFormat: [{
                 type: Input

package/esm2020/views/month/multi-week-view.component.mjs

@@ -56,9 +56,32 @@ export class MultiWeekViewComponent extends ConfigurationViewBase {
     get title() {
         return this.localization.get('multiWeekViewTitle');
     }
+    /**
+     * The number of events to be rendered per day. Setting this property to 'auto'
+     * will display all events in the respective slot.
+     * > When set to `'auto'` it will automatically set the `adaptiveSlotHeight` property to `true`.
+     * > If set to `0` it will be normalized internally to `1`.
+     * @default 2
+     */
+    set eventsPerDay(events) {
+        this._eventsPerDay = !events ? 1 : events;
+    }
+    get eventsPerDay() {
+        return this._eventsPerDay;
+    }
     get viewEventHeight() {
         return isPresent(this.eventHeight) ? this.eventHeight : (this.schedulerOptions.eventHeight || DEFAULT_EVENT_HEIGHT);
     }
+    ngOnChanges(changes) {
+        if ((changes['eventHeight'] && changes['eventHeight'].currentValue === 'auto') ||
+            (changes['eventsPerDay'] && changes['eventsPerDay'].currentValue === 'auto')) {
+            this.adaptiveSlotHeight = true;
+        }
+        if ((changes['eventHeight'] && changes['eventHeight'].currentValue === 'auto' && !this.eventsPerDay) ||
+            (changes['adaptiveSlotHeight'] && changes['adaptiveSlotHeight'].currentValue === true && !this.eventsPerDay)) {
+            this.eventsPerDay = 2;
+        }
+    }
     /**
      * @hidden
      */
@@ -78,14 +101,16 @@ export class MultiWeekViewComponent extends ConfigurationViewBase {
     }
 }
 MultiWeekViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiWeekViewComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.ViewContextService }, { token: i3.ViewStateService }, { token: i4.IntlService }], target: i0.ɵɵFactoryTarget.Component });
-MultiWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MultiWeekViewComponent, isStandalone: true, selector: "kendo-scheduler-multi-week-view", inputs: { eventHeight: "eventHeight", numberOfWeeks: "numberOfWeeks", selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat" }, providers: [{
+MultiWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MultiWeekViewComponent, isStandalone: true, selector: "kendo-scheduler-multi-week-view", inputs: { eventHeight: "eventHeight", eventsPerDay: "eventsPerDay", adaptiveSlotHeight: "adaptiveSlotHeight", numberOfWeeks: "numberOfWeeks", selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat" }, providers: [{
             provide: SchedulerView,
             useExisting: forwardRef(() => MultiWeekViewComponent)
-        }], queries: [{ propertyName: "multiWeekDaySlotTemplate", first: true, predicate: MultiWeekDaySlotTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        }], queries: [{ propertyName: "multiWeekDaySlotTemplate", first: true, predicate: MultiWeekDaySlotTemplateDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-template #content>
             <month-view
                 type="multiWeek"
                 [eventHeight]="viewEventHeight"
+                [adaptiveSlotHeight]="adaptiveSlotHeight"
+                [eventsPerDay]="eventsPerDay"
                 [eventTemplate]="eventTemplate?.templateRef"
                 [slotClass]="viewSlotClass"
                 [eventClass]="viewEventClass"
@@ -101,7 +126,7 @@ MultiWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 [newRange]="newRange">
             </month-view>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: MonthViewRendererComponent, selector: "month-view", inputs: ["monthDaySlotTemplate", "highlightOngoingEvents", "type", "numberOfWeeks", "newRange", "dateRangeFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "component", type: MonthViewRendererComponent, selector: "month-view", inputs: ["monthDaySlotTemplate", "highlightOngoingEvents", "type", "eventsPerDay", "adaptiveSlotHeight", "numberOfWeeks", "newRange", "dateRangeFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiWeekViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -116,6 +141,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             <month-view
                 type="multiWeek"
                 [eventHeight]="viewEventHeight"
+                [adaptiveSlotHeight]="adaptiveSlotHeight"
+                [eventsPerDay]="eventsPerDay"
                 [eventTemplate]="eventTemplate?.templateRef"
                 [slotClass]="viewSlotClass"
                 [eventClass]="viewEventClass"
@@ -137,6 +164,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.ViewContextService }, { type: i3.ViewStateService }, { type: i4.IntlService }]; }, propDecorators: { eventHeight: [{
                 type: Input
+            }], eventsPerDay: [{
+                type: Input
+            }], adaptiveSlotHeight: [{
+                type: Input
             }], numberOfWeeks: [{
                 type: Input
             }], selectedDateFormat: [{

package/esm2020/views/month/utils.mjs

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { intersects, toUTCDate, addUTCDays } from '../utils';
 import { sortTasksByTime } from '../../common/util';
+import { addDays } from '@progress/kendo-date-math';
 const last = (arr) => arr[arr.length - 1];
 /**
  * @hidden
@@ -35,9 +36,18 @@ export const createTasks = (periodStart, periodEnd, items, ranges) => {
                         rangeIndex: rangeIdx,
                         data: data
                     };
-                    tasks.push(task);
                     task.head = task.endTime > rangeEnd;
                     task.tail = task.startTime < rangeStart;
+                    let slotMatch;
+                    range.forEach(slot => {
+                        const slotStartTime = slot;
+                        const slotEndTime = addDays(slot, 1);
+                        if (task.event.start >= slotStartTime && task.event.start <= slotEndTime) {
+                            slotMatch = { start: slotStartTime, end: slotEndTime };
+                        }
+                    });
+                    task.isMultiDay = task.event.end > slotMatch?.end || task.head || task.tail;
+                    tasks.push(task);
                 }
             }
         }

package/esm2020/views/view-items/base-view-item.mjs

@@ -95,9 +95,7 @@ export class BaseViewItem {
         this.subs.add(this.slotService.slotsChange.subscribe(() => {
             this.rect = null;
             this.setStyles({
-                width: 0,
                 left: 0,
-                bottom: 0
             });
             const slotId = { index: this.index, resourceIndex: this.resourceIndex, rangeIndex: this.rangeIndex };
             this.slotService.unregisterItem(this, slotId);