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

package/fesm2020/progress-kendo-angular-scheduler.mjs

@@ -42,8 +42,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1728372694,
-    version: '16.11.0',
+    publishDate: 1728903665,
+    version: '17.0.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -9945,6 +9945,10 @@ const ONGOING_EVENT_CSS_CLASS = 'k-event-ongoing';
 const DAYS_IN_WEEK_COUNT = 7;
 /** @hidden */
 const WEEKS_COUNT = 6;
+/** @hidden */
+const MORE_BUTTON_HEIGHT = 13;
+/** @hidden */
+const EVENT_SPACING = 2;
 
 /**
  * @hidden
@@ -10062,9 +10066,6 @@ class BaseSlotService {
     }
 }
 
-//better try to measure this one
-const MORE_BUTTON_HEIGHT = 13;
-const EVENT_OFFSET = 2;
 /**
  * @hidden
  */
@@ -10128,8 +10129,17 @@ let SlotRange$1 = 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;
@@ -10144,24 +10154,76 @@ let SlotRange$1 = 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;
@@ -10169,6 +10231,73 @@ let SlotRange$1 = 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
@@ -10223,8 +10352,8 @@ class MonthResourceGroup {
  * @hidden
  */
 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));
@@ -10354,9 +10483,18 @@ const createTasks$3 = (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);
                 }
             }
         }
@@ -11506,9 +11644,7 @@ 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);
@@ -12025,7 +12161,7 @@ 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: MonthSlotService }, { token: i1$1.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>
@@ -12075,6 +12211,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']
@@ -12103,6 +12245,15 @@ 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();
@@ -12181,7 +12332,7 @@ 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';
         }
@@ -12278,7 +12429,7 @@ class MonthViewRendererComponent extends BaseView {
     }
 }
 MonthViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MonthViewRendererComponent, deps: [{ token: ViewContextService }, { token: ViewStateService }, { token: i1$2.IntlService }, { token: MonthSlotService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: PDFService }, { token: i1$1.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">
@@ -12355,13 +12506,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)"
@@ -12425,7 +12579,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: [{
@@ -12509,13 +12663,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)"
@@ -12589,6 +12746,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: [{
@@ -12633,9 +12794,32 @@ 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
      */
@@ -12655,14 +12839,16 @@ class MonthViewComponent extends ConfigurationViewBase {
     }
 }
 MonthViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MonthViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }, { token: i1$2.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"
@@ -12677,7 +12863,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: [{
@@ -12692,6 +12878,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"
@@ -12710,7 +12898,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     standalone: true,
                     imports: [MonthViewRendererComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }, { type: i1$2.IntlService }]; }, propDecorators: { eventHeight: [{
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }, { type: i1$2.IntlService }]; }, propDecorators: { eventsPerDay: [{
+                type: Input
+            }], eventHeight: [{
+                type: Input
+            }], adaptiveSlotHeight: [{
                 type: Input
             }], selectedDateFormat: [{
                 type: Input
@@ -12758,9 +12950,32 @@ 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
      */
@@ -12780,14 +12995,16 @@ class MultiWeekViewComponent extends ConfigurationViewBase {
     }
 }
 MultiWeekViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiWeekViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }, { token: i1$2.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"
@@ -12803,7 +13020,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: [{
@@ -12818,6 +13035,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"
@@ -12839,6 +13058,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }, { type: i1$2.IntlService }]; }, propDecorators: { eventHeight: [{
                 type: Input
+            }], eventsPerDay: [{
+                type: Input
+            }], adaptiveSlotHeight: [{
+                type: Input
             }], numberOfWeeks: [{
                 type: Input
             }], selectedDateFormat: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-scheduler",
-  "version": "16.11.0",
+  "version": "17.0.0-develop.1",
   "description": "Kendo UI Scheduler Angular - Outlook or Google-style angular scheduler calendar. Full-featured and customizable embedded scheduling from the creator developers trust for professional UI components.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -26,23 +26,23 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.20.4",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-tooltip": "16.11.0",
-    "@progress/kendo-angular-buttons": "16.11.0",
-    "@progress/kendo-angular-common": "16.11.0",
-    "@progress/kendo-angular-dateinputs": "16.11.0",
-    "@progress/kendo-angular-dialog": "16.11.0",
-    "@progress/kendo-angular-dropdowns": "16.11.0",
-    "@progress/kendo-angular-icons": "16.11.0",
-    "@progress/kendo-angular-inputs": "16.11.0",
-    "@progress/kendo-angular-intl": "16.11.0",
-    "@progress/kendo-angular-l10n": "16.11.0",
-    "@progress/kendo-angular-label": "16.11.0",
-    "@progress/kendo-angular-popup": "16.11.0",
+    "@progress/kendo-angular-tooltip": "17.0.0-develop.1",
+    "@progress/kendo-angular-buttons": "17.0.0-develop.1",
+    "@progress/kendo-angular-common": "17.0.0-develop.1",
+    "@progress/kendo-angular-dateinputs": "17.0.0-develop.1",
+    "@progress/kendo-angular-dialog": "17.0.0-develop.1",
+    "@progress/kendo-angular-dropdowns": "17.0.0-develop.1",
+    "@progress/kendo-angular-icons": "17.0.0-develop.1",
+    "@progress/kendo-angular-inputs": "17.0.0-develop.1",
+    "@progress/kendo-angular-intl": "17.0.0-develop.1",
+    "@progress/kendo-angular-l10n": "17.0.0-develop.1",
+    "@progress/kendo-angular-label": "17.0.0-develop.1",
+    "@progress/kendo-angular-popup": "17.0.0-develop.1",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "16.11.0",
+    "@progress/kendo-angular-schematics": "17.0.0-develop.1",
     "@progress/kendo-date-math": "^1.3.2",
     "@progress/kendo-draggable": "^3.0.2",
     "@progress/kendo-file-saver": "^1.0.7",

package/schematics/ngAdd/index.js

@@ -4,10 +4,10 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'SchedulerModule', package: 'scheduler', peerDependencies: {
             // peer deps of the dropdowns
-            '@progress/kendo-angular-treeview': '16.11.0',
-            '@progress/kendo-angular-navigation': '16.11.0',
+            '@progress/kendo-angular-treeview': '17.0.0-develop.1',
+            '@progress/kendo-angular-navigation': '17.0.0-develop.1',
             // peer dependency of kendo-angular-inputs
-            '@progress/kendo-angular-dialog': '16.11.0',
+            '@progress/kendo-angular-dialog': '17.0.0-develop.1',
             // peer dependency of kendo-angular-icons
             '@progress/kendo-svg-icons': '^3.0.0'
         } });

package/views/common/base-view.d.ts

@@ -35,7 +35,7 @@ export declare abstract class BaseView implements OnInit, OnChanges, AfterViewIn
     groupHeaderTemplate: TemplateRef<any>;
     selectedDateFormat: string;
     selectedShortDateFormat: string;
-    eventHeight: number;
+    eventHeight: number | 'auto';
     showToolbar: boolean;
     showFooter: boolean;
     slotClass: (args: any) => any;

package/views/constants.d.ts

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

package/views/month/month-slot.component.d.ts

@@ -18,6 +18,9 @@ export declare class MonthSlotComponent extends BaseSlotDirective {
     moreHorizontalIcon: SVGIcon;
     resourcesByIndex: any;
     monthDaySlotTemplateRef: any;
+    eventsPerDay: number | 'auto';
+    eventHeight: number | 'auto';
+    adaptiveSlotHeight: boolean;
     set day(value: Date);
     /**
      * For the slot template we need the day value without the UTC conversion
@@ -42,5 +45,5 @@ export declare class MonthSlotComponent extends BaseSlotDirective {
     invalidate(): void;
     private removeShowMore;
     static ɵfac: i0.ɵɵFactoryDeclaration<MonthSlotComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MonthSlotComponent, "[monthSlot]", never, { "resourcesByIndex": "resourcesByIndex"; "monthDaySlotTemplateRef": "monthDaySlotTemplateRef"; "day": "monthSlot"; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MonthSlotComponent, "[monthSlot]", never, { "resourcesByIndex": "resourcesByIndex"; "monthDaySlotTemplateRef": "monthDaySlotTemplateRef"; "eventsPerDay": "eventsPerDay"; "eventHeight": "eventHeight"; "adaptiveSlotHeight": "adaptiveSlotHeight"; "day": "monthSlot"; }, {}, never, never, true, never>;
 }