@progress/kendo-angular-scheduler 14.3.1-develop.2 → 14.4.0-develop.2

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: 1703152353,
-    version: '14.3.1-develop.2',
+    publishDate: 1703164645,
+    version: '14.4.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/views/agenda/agenda-view-list.component.mjs

@@ -113,7 +113,7 @@ AgendaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                         <td class="k-scheduler-timecolumn" role="gridcell">
                             <div *ngIf="!agendaTimeTemplate">
                                 <kendo-icon-wrapper
-                                    *ngIf="extractDataItem(item).tail"
+                                    *ngIf="extractDataItem(item).tail || extractDataItem(item).mid"
                                     [name]="arrowIcons[0]"
                                     [svgIcon]="arrowSVGIcons[0]"
                                     >
@@ -121,7 +121,7 @@ AgendaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
 
                                 {{ formatTime(extractDataItem(item)) }}
                                 <kendo-icon-wrapper
-                                    *ngIf="extractDataItem(item).head"
+                                    *ngIf="extractDataItem(item).head || extractDataItem(item).mid"
                                     [name]="arrowIcons[1]"
                                     [svgIcon]="arrowSVGIcons[1]"
                                     >
@@ -166,7 +166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         <td class="k-scheduler-timecolumn" role="gridcell">
                             <div *ngIf="!agendaTimeTemplate">
                                 <kendo-icon-wrapper
-                                    *ngIf="extractDataItem(item).tail"
+                                    *ngIf="extractDataItem(item).tail || extractDataItem(item).mid"
                                     [name]="arrowIcons[0]"
                                     [svgIcon]="arrowSVGIcons[0]"
                                     >
@@ -174,7 +174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
                                 {{ formatTime(extractDataItem(item)) }}
                                 <kendo-icon-wrapper
-                                    *ngIf="extractDataItem(item).head"
+                                    *ngIf="extractDataItem(item).head || extractDataItem(item).mid"
                                     [name]="arrowIcons[1]"
                                     [svgIcon]="arrowSVGIcons[1]"
                                     >

package/esm2020/views/agenda/utils.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { TaskCollection, compose } from './tasks.collection';
-import { MS_PER_DAY } from '@progress/kendo-date-math';
+import { MS_PER_DAY, toLocalDate } from '@progress/kendo-date-math';
 import { intersects, eventResources, toUTCDate, addUTCDays, getUTCDate } from '../utils';
 import { getField } from '../../common/util';
 /**
@@ -48,11 +48,15 @@ function createTask(item, resourceIdx, resources, color) {
 const durationInDays = ({ start, end, isAllDay = false }) => {
     const eventEnd = isAllDay ? getUTCDate(end) : end;
     const duration = Math.ceil((eventEnd - +getUTCDate(start)) / MS_PER_DAY);
-    if (isAllDay) {
+    if (isAllDay && duration > 0 && !endsAtMidnight(end)) {
         return duration + 1;
     }
     return duration;
 };
+const endsAtMidnight = (end) => {
+    end = toLocalDate(end);
+    return (end.getHours() === 0 && end.getMinutes() === 0 && end.getSeconds() === 0 && end.getMilliseconds() === 0);
+};
 const curry = fn => {
     const len = fn.length;
     return (...args) => len === args.length

package/esm2020/views/multi-day/utils.mjs

@@ -3,7 +3,6 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { intersects, toUTCDate, roundAllDayEnd } from '../utils';
-import { MS_PER_DAY } from '@progress/kendo-date-math';
 import { sortTasksByTime } from '../../common/util';
 /** @hidden */
 export const isMultiDay = ({ start, end }) => {
@@ -21,8 +20,8 @@ export const createTasks = (periodStart, periodEnd, items, ranges) => {
     for (let index = 0; index < items.length; index++) {
         const item = items[index];
         const multiDay = isMultiDay(item);
-        const multipleRanges = multiDay && !item.event.isAllDay && (item.end.getTime() - item.start.getTime()) < MS_PER_DAY;
-        const isAllDay = item.event.isAllDay || (multiDay && !multipleRanges);
+        const multipleRanges = multiDay && !item.event.isAllDay;
+        const isAllDay = typeof item.event.isAllDay === 'boolean' ? item.event.isAllDay : (multiDay && !multipleRanges);
         const endTime = (isAllDay ? roundAllDayEnd(item) : item.end).toUTCDate();
         const startTime = (isAllDay ? item.start.stripTime() : item.start).toUTCDate();
         for (let rangeIndex = 0; rangeIndex < ranges.length; rangeIndex++) {

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

@@ -23,19 +23,10 @@ export class TimelineMonthViewComponent extends TimelineBase {
     constructor(localization, changeDetector, viewContext, viewState) {
         super(localization, changeDetector, viewContext, viewState);
         /**
-         * The long-date format for displaying the
-         * selected date in the Scheduler toolbar.
-         * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
-         * @default '{0:Y}'
+         * Specifies the number of months that the view will render.
+         * @default 1
          */
-        this.selectedDateFormat = '{0:Y}';
-        /**
-         * The short-date format for displaying the
-         * selected date in the Scheduler toolbar.
-         * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
-         * @default '{0:y}'
-         */
-        this.selectedShortDateFormat = '{0:y}';
+        this.numberOfMonths = 1;
         /**
          * The invariant name for this view.
          * @default 'timelineMonth'
@@ -51,7 +42,7 @@ export class TimelineMonthViewComponent extends TimelineBase {
          * @hidden
          */
         this.getEndDate = (selectedDate) => {
-            return addMonths(this.getStartDate(selectedDate), 1);
+            return addMonths(this.getStartDate(selectedDate), this.numberOfMonths);
         };
         /**
          * @hidden
@@ -66,9 +57,41 @@ export class TimelineMonthViewComponent extends TimelineBase {
     get title() {
         return this.localization.get('timelineMonthViewTitle');
     }
+    /**
+     * The long-date format for displaying the
+     * selected date in the Scheduler toolbar.
+     * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
+     * > Note: If [numberOfMonths](#toc-numberofmonths) > 1, the default format value shows a range - `'{0:Y} - {1:Y}'`, where `0` is the start and `1` is the end date.
+     * @default '{0:Y}'
+     */
+    set selectedDateFormat(format) {
+        this._selectedDateFormat = format;
+    }
+    get selectedDateFormat() {
+        if (this._selectedDateFormat) {
+            return this._selectedDateFormat;
+        }
+        return this.numberOfMonths && this.numberOfMonths > 1 ? '{0:Y} - {1:Y}' : '{0:Y}';
+    }
+    /**
+     * The short-date format for displaying the
+     * selected date in the Scheduler toolbar.
+     * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
+     * > Note: If [numberOfMonths](#toc-numberofmonths) > 1, the default format value shows a range - `'{0:y} - {1:y}'`, where `0` is the start and `1` is the end date.
+     * @default '{0:y}'
+     */
+    set selectedShortDateFormat(format) {
+        this._selectedShortDateFormat = format;
+    }
+    get selectedShortDateFormat() {
+        if (this._selectedShortDateFormat) {
+            return this._selectedShortDateFormat;
+        }
+        return this.numberOfMonths && this.numberOfMonths > 1 ? '{0:y} - {1:y}' : '{0:y}';
+    }
 }
 TimelineMonthViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineMonthViewComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.ViewContextService }, { token: i3.ViewStateService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineMonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimelineMonthViewComponent, selector: "kendo-scheduler-timeline-month-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat" }, providers: [{
+TimelineMonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimelineMonthViewComponent, selector: "kendo-scheduler-timeline-month-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat", numberOfMonths: "numberOfMonths" }, providers: [{
             provide: SchedulerView,
             useExisting: forwardRef(() => TimelineMonthViewComponent)
         }], usesInheritance: true, ngImport: i0, template: `
@@ -159,4 +182,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], selectedShortDateFormat: [{
                 type: Input
+            }], numberOfMonths: [{
+                type: Input
             }] } });

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

@@ -22,19 +22,10 @@ export class TimelineViewComponent extends TimelineBase {
     constructor(localization, changeDetector, viewContext, viewState) {
         super(localization, changeDetector, viewContext, viewState);
         /**
-         * The long-date format for displaying the
-         * selected date in the Scheduler toolbar.
-         * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
-         * @default '{0:D}'
+         * Specifies the number of days that the view will render.
+         * @default 1
          */
-        this.selectedDateFormat = '{0:D}';
-        /**
-         * The short-date format for displaying the
-         * selected date in the Scheduler toolbar.
-         * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
-         * @default '{0:d}'
-         */
-        this.selectedShortDateFormat = '{0:d}';
+        this.numberOfDays = 1;
         /**
          * The invariant name for this view.
          * @default 'timeline'
@@ -47,15 +38,48 @@ export class TimelineViewComponent extends TimelineBase {
     get title() {
         return this.localization.get('timelineViewTitle');
     }
+    /**
+     * The long-date format for displaying the
+     * selected date in the Scheduler toolbar.
+     * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
+     * > Note: If [numberOfDays](#toc-numberofdays) > 1, the default format value shows a range - `'{0:D} - {1:D}'`, where `0` is the start and `1` is the end date.
+     * @default '{0:D}'
+     */
+    set selectedDateFormat(format) {
+        this._selectedDateFormat = format;
+    }
+    get selectedDateFormat() {
+        if (this._selectedDateFormat) {
+            return this._selectedDateFormat;
+        }
+        return this.numberOfDays && this.numberOfDays > 1 ? '{0:D} - {1:D}' : '{0:D}';
+    }
+    /**
+     * The short-date format for displaying the
+     * selected date in the Scheduler toolbar.
+     * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
+     * > Note: If [numberOfDays](#toc-numberofdays) > 1, the default format value shows a range - `'{0:d} - {1:d}'`, where `0` is the start and `1` is the end date.
+     * @default '{0:d}'
+     */
+    set selectedShortDateFormat(format) {
+        this._selectedShortDateFormat = format;
+    }
+    get selectedShortDateFormat() {
+        if (this._selectedShortDateFormat) {
+            return this._selectedShortDateFormat;
+        }
+        return this.numberOfDays && this.numberOfDays > 1 ? '{0:d} - {1:d}' : '{0:d}';
+    }
 }
 TimelineViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineViewComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.ViewContextService }, { token: i3.ViewStateService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimelineViewComponent, selector: "kendo-scheduler-timeline-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat" }, providers: [{
+TimelineViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimelineViewComponent, selector: "kendo-scheduler-timeline-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat", numberOfDays: "numberOfDays" }, providers: [{
             provide: SchedulerView,
             useExisting: forwardRef(() => TimelineViewComponent)
         }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #content>
             <timeline-multi-day-view
                 [name]="name"
+                [numberOfDays]="numberOfDays"
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
@@ -98,6 +122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ng-template #content>
             <timeline-multi-day-view
                 [name]="name"
+                [numberOfDays]="numberOfDays"
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
@@ -132,4 +157,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], selectedShortDateFormat: [{
                 type: Input
+            }], numberOfDays: [{
+                type: Input
             }] } });

package/esm2020/views/timeline/timeline-week-view.component.mjs

@@ -42,6 +42,11 @@ export class TimelineWeekViewComponent extends TimelineBase {
          * @default '{0:d} - {1:d}'
          */
         this.selectedShortDateFormat = '{0:d} - {1:d}';
+        /**
+        * Specifies the number of weeks that the view will render.
+        * @default 1
+        */
+        this.numberOfWeeks = 1;
         /**
          * The invariant name for this view.
          * @default 'timelineWeek'
@@ -62,7 +67,7 @@ export class TimelineWeekViewComponent extends TimelineBase {
     }
 }
 TimelineWeekViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineWeekViewComponent, deps: [{ token: i1.IntlService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i3.ViewContextService }, { token: i4.ViewStateService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimelineWeekViewComponent, selector: "kendo-scheduler-timeline-week-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat" }, providers: [{
+TimelineWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimelineWeekViewComponent, selector: "kendo-scheduler-timeline-week-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat", numberOfWeeks: "numberOfWeeks" }, providers: [{
             provide: SchedulerView,
             useExisting: forwardRef(() => TimelineWeekViewComponent)
         }], usesInheritance: true, ngImport: i0, template: `
@@ -70,7 +75,7 @@ TimelineWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             <timeline-multi-day-view
                 viewName="timeline-week"
                 [name]="name"
-                [numberOfDays]="7"
+                [numberOfDays]="7 * numberOfWeeks"
                 [getStartDate]="getStartDate"
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
@@ -116,7 +121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <timeline-multi-day-view
                 viewName="timeline-week"
                 [name]="name"
-                [numberOfDays]="7"
+                [numberOfDays]="7 * numberOfWeeks"
                 [getStartDate]="getStartDate"
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
@@ -153,4 +158,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], selectedShortDateFormat: [{
                 type: Input
+            }], numberOfWeeks: [{
+                type: Input
             }] } });

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

@@ -48,8 +48,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1703152353,
-    version: '14.3.1-develop.2',
+    publishDate: 1703164645,
+    version: '14.4.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -8139,11 +8139,15 @@ function createTask(item, resourceIdx, resources, color) {
 const durationInDays = ({ start, end, isAllDay = false }) => {
     const eventEnd = isAllDay ? getUTCDate(end) : end;
     const duration = Math.ceil((eventEnd - +getUTCDate(start)) / MS_PER_DAY$1);
-    if (isAllDay) {
+    if (isAllDay && duration > 0 && !endsAtMidnight(end)) {
         return duration + 1;
     }
     return duration;
 };
+const endsAtMidnight = (end) => {
+    end = toLocalDate(end);
+    return (end.getHours() === 0 && end.getMinutes() === 0 && end.getSeconds() === 0 && end.getMilliseconds() === 0);
+};
 const curry = fn => {
     const len = fn.length;
     return (...args) => len === args.length
@@ -8573,7 +8577,7 @@ AgendaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                         <td class="k-scheduler-timecolumn" role="gridcell">
                             <div *ngIf="!agendaTimeTemplate">
                                 <kendo-icon-wrapper
-                                    *ngIf="extractDataItem(item).tail"
+                                    *ngIf="extractDataItem(item).tail || extractDataItem(item).mid"
                                     [name]="arrowIcons[0]"
                                     [svgIcon]="arrowSVGIcons[0]"
                                     >
@@ -8581,7 +8585,7 @@ AgendaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
 
                                 {{ formatTime(extractDataItem(item)) }}
                                 <kendo-icon-wrapper
-                                    *ngIf="extractDataItem(item).head"
+                                    *ngIf="extractDataItem(item).head || extractDataItem(item).mid"
                                     [name]="arrowIcons[1]"
                                     [svgIcon]="arrowSVGIcons[1]"
                                     >
@@ -8626,7 +8630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         <td class="k-scheduler-timecolumn" role="gridcell">
                             <div *ngIf="!agendaTimeTemplate">
                                 <kendo-icon-wrapper
-                                    *ngIf="extractDataItem(item).tail"
+                                    *ngIf="extractDataItem(item).tail || extractDataItem(item).mid"
                                     [name]="arrowIcons[0]"
                                     [svgIcon]="arrowSVGIcons[0]"
                                     >
@@ -8634,7 +8638,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
                                 {{ formatTime(extractDataItem(item)) }}
                                 <kendo-icon-wrapper
-                                    *ngIf="extractDataItem(item).head"
+                                    *ngIf="extractDataItem(item).head || extractDataItem(item).mid"
                                     [name]="arrowIcons[1]"
                                     [svgIcon]="arrowSVGIcons[1]"
                                     >
@@ -13008,8 +13012,8 @@ const createTasks = (periodStart, periodEnd, items, ranges) => {
     for (let index = 0; index < items.length; index++) {
         const item = items[index];
         const multiDay = isMultiDay(item);
-        const multipleRanges = multiDay && !item.event.isAllDay && (item.end.getTime() - item.start.getTime()) < MS_PER_DAY$1;
-        const isAllDay = item.event.isAllDay || (multiDay && !multipleRanges);
+        const multipleRanges = multiDay && !item.event.isAllDay;
+        const isAllDay = typeof item.event.isAllDay === 'boolean' ? item.event.isAllDay : (multiDay && !multipleRanges);
         const endTime = (isAllDay ? roundAllDayEnd(item) : item.end).toUTCDate();
         const startTime = (isAllDay ? item.start.stripTime() : item.start).toUTCDate();
         for (let rangeIndex = 0; rangeIndex < ranges.length; rangeIndex++) {
@@ -15646,19 +15650,10 @@ class TimelineViewComponent extends TimelineBase {
     constructor(localization, changeDetector, viewContext, viewState) {
         super(localization, changeDetector, viewContext, viewState);
         /**
-         * The long-date format for displaying the
-         * selected date in the Scheduler toolbar.
-         * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
-         * @default '{0:D}'
-         */
-        this.selectedDateFormat = '{0:D}';
-        /**
-         * The short-date format for displaying the
-         * selected date in the Scheduler toolbar.
-         * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
-         * @default '{0:d}'
+         * Specifies the number of days that the view will render.
+         * @default 1
          */
-        this.selectedShortDateFormat = '{0:d}';
+        this.numberOfDays = 1;
         /**
          * The invariant name for this view.
          * @default 'timeline'
@@ -15671,15 +15666,48 @@ class TimelineViewComponent extends TimelineBase {
     get title() {
         return this.localization.get('timelineViewTitle');
     }
+    /**
+     * The long-date format for displaying the
+     * selected date in the Scheduler toolbar.
+     * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
+     * > Note: If [numberOfDays](#toc-numberofdays) > 1, the default format value shows a range - `'{0:D} - {1:D}'`, where `0` is the start and `1` is the end date.
+     * @default '{0:D}'
+     */
+    set selectedDateFormat(format) {
+        this._selectedDateFormat = format;
+    }
+    get selectedDateFormat() {
+        if (this._selectedDateFormat) {
+            return this._selectedDateFormat;
+        }
+        return this.numberOfDays && this.numberOfDays > 1 ? '{0:D} - {1:D}' : '{0:D}';
+    }
+    /**
+     * The short-date format for displaying the
+     * selected date in the Scheduler toolbar.
+     * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
+     * > Note: If [numberOfDays](#toc-numberofdays) > 1, the default format value shows a range - `'{0:d} - {1:d}'`, where `0` is the start and `1` is the end date.
+     * @default '{0:d}'
+     */
+    set selectedShortDateFormat(format) {
+        this._selectedShortDateFormat = format;
+    }
+    get selectedShortDateFormat() {
+        if (this._selectedShortDateFormat) {
+            return this._selectedShortDateFormat;
+        }
+        return this.numberOfDays && this.numberOfDays > 1 ? '{0:d} - {1:d}' : '{0:d}';
+    }
 }
 TimelineViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimelineViewComponent, selector: "kendo-scheduler-timeline-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat" }, providers: [{
+TimelineViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimelineViewComponent, selector: "kendo-scheduler-timeline-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat", numberOfDays: "numberOfDays" }, providers: [{
             provide: SchedulerView,
             useExisting: forwardRef(() => TimelineViewComponent)
         }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #content>
             <timeline-multi-day-view
                 [name]="name"
+                [numberOfDays]="numberOfDays"
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
@@ -15722,6 +15750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ng-template #content>
             <timeline-multi-day-view
                 [name]="name"
+                [numberOfDays]="numberOfDays"
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
@@ -15756,6 +15785,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], selectedShortDateFormat: [{
                 type: Input
+            }], numberOfDays: [{
+                type: Input
             }] } });
 
 /**
@@ -15782,6 +15813,11 @@ class TimelineWeekViewComponent extends TimelineBase {
          * @default '{0:d} - {1:d}'
          */
         this.selectedShortDateFormat = '{0:d} - {1:d}';
+        /**
+        * Specifies the number of weeks that the view will render.
+        * @default 1
+        */
+        this.numberOfWeeks = 1;
         /**
          * The invariant name for this view.
          * @default 'timelineWeek'
@@ -15802,7 +15838,7 @@ class TimelineWeekViewComponent extends TimelineBase {
     }
 }
 TimelineWeekViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineWeekViewComponent, deps: [{ token: i1$4.IntlService }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimelineWeekViewComponent, selector: "kendo-scheduler-timeline-week-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat" }, providers: [{
+TimelineWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimelineWeekViewComponent, selector: "kendo-scheduler-timeline-week-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat", numberOfWeeks: "numberOfWeeks" }, providers: [{
             provide: SchedulerView,
             useExisting: forwardRef(() => TimelineWeekViewComponent)
         }], usesInheritance: true, ngImport: i0, template: `
@@ -15810,7 +15846,7 @@ TimelineWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             <timeline-multi-day-view
                 viewName="timeline-week"
                 [name]="name"
-                [numberOfDays]="7"
+                [numberOfDays]="7 * numberOfWeeks"
                 [getStartDate]="getStartDate"
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
@@ -15856,7 +15892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <timeline-multi-day-view
                 viewName="timeline-week"
                 [name]="name"
-                [numberOfDays]="7"
+                [numberOfDays]="7 * numberOfWeeks"
                 [getStartDate]="getStartDate"
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
@@ -15893,6 +15929,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], selectedShortDateFormat: [{
                 type: Input
+            }], numberOfWeeks: [{
+                type: Input
             }] } });
 
 /**
@@ -15902,19 +15940,10 @@ class TimelineMonthViewComponent extends TimelineBase {
     constructor(localization, changeDetector, viewContext, viewState) {
         super(localization, changeDetector, viewContext, viewState);
         /**
-         * The long-date format for displaying the
-         * selected date in the Scheduler toolbar.
-         * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
-         * @default '{0:Y}'
-         */
-        this.selectedDateFormat = '{0:Y}';
-        /**
-         * The short-date format for displaying the
-         * selected date in the Scheduler toolbar.
-         * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
-         * @default '{0:y}'
+         * Specifies the number of months that the view will render.
+         * @default 1
          */
-        this.selectedShortDateFormat = '{0:y}';
+        this.numberOfMonths = 1;
         /**
          * The invariant name for this view.
          * @default 'timelineMonth'
@@ -15930,7 +15959,7 @@ class TimelineMonthViewComponent extends TimelineBase {
          * @hidden
          */
         this.getEndDate = (selectedDate) => {
-            return addMonths(this.getStartDate(selectedDate), 1);
+            return addMonths(this.getStartDate(selectedDate), this.numberOfMonths);
         };
         /**
          * @hidden
@@ -15945,9 +15974,41 @@ class TimelineMonthViewComponent extends TimelineBase {
     get title() {
         return this.localization.get('timelineMonthViewTitle');
     }
+    /**
+     * The long-date format for displaying the
+     * selected date in the Scheduler toolbar.
+     * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
+     * > Note: If [numberOfMonths](#toc-numberofmonths) > 1, the default format value shows a range - `'{0:Y} - {1:Y}'`, where `0` is the start and `1` is the end date.
+     * @default '{0:Y}'
+     */
+    set selectedDateFormat(format) {
+        this._selectedDateFormat = format;
+    }
+    get selectedDateFormat() {
+        if (this._selectedDateFormat) {
+            return this._selectedDateFormat;
+        }
+        return this.numberOfMonths && this.numberOfMonths > 1 ? '{0:Y} - {1:Y}' : '{0:Y}';
+    }
+    /**
+     * The short-date format for displaying the
+     * selected date in the Scheduler toolbar.
+     * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
+     * > Note: If [numberOfMonths](#toc-numberofmonths) > 1, the default format value shows a range - `'{0:y} - {1:y}'`, where `0` is the start and `1` is the end date.
+     * @default '{0:y}'
+     */
+    set selectedShortDateFormat(format) {
+        this._selectedShortDateFormat = format;
+    }
+    get selectedShortDateFormat() {
+        if (this._selectedShortDateFormat) {
+            return this._selectedShortDateFormat;
+        }
+        return this.numberOfMonths && this.numberOfMonths > 1 ? '{0:y} - {1:y}' : '{0:y}';
+    }
 }
 TimelineMonthViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineMonthViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineMonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimelineMonthViewComponent, selector: "kendo-scheduler-timeline-month-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat" }, providers: [{
+TimelineMonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimelineMonthViewComponent, selector: "kendo-scheduler-timeline-month-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat", numberOfMonths: "numberOfMonths" }, providers: [{
             provide: SchedulerView,
             useExisting: forwardRef(() => TimelineMonthViewComponent)
         }], usesInheritance: true, ngImport: i0, template: `
@@ -16038,6 +16099,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], selectedShortDateFormat: [{
                 type: Input
+            }], numberOfMonths: [{
+                type: Input
             }] } });
 
 const PUBLIC_DIRECTIVES = [

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

@@ -48,8 +48,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1703152353,
-    version: '14.3.1-develop.2',
+    publishDate: 1703164645,
+    version: '14.4.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -8101,11 +8101,15 @@ function createTask(item, resourceIdx, resources, color) {
 const durationInDays = ({ start, end, isAllDay = false }) => {
     const eventEnd = isAllDay ? getUTCDate(end) : end;
     const duration = Math.ceil((eventEnd - +getUTCDate(start)) / MS_PER_DAY$1);
-    if (isAllDay) {
+    if (isAllDay && duration > 0 && !endsAtMidnight(end)) {
         return duration + 1;
     }
     return duration;
 };
+const endsAtMidnight = (end) => {
+    end = toLocalDate(end);
+    return (end.getHours() === 0 && end.getMinutes() === 0 && end.getSeconds() === 0 && end.getMilliseconds() === 0);
+};
 const curry = fn => {
     const len = fn.length;
     return (...args) => len === args.length
@@ -8538,7 +8542,7 @@ AgendaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                         <td class="k-scheduler-timecolumn" role="gridcell">
                             <div *ngIf="!agendaTimeTemplate">
                                 <kendo-icon-wrapper
-                                    *ngIf="extractDataItem(item).tail"
+                                    *ngIf="extractDataItem(item).tail || extractDataItem(item).mid"
                                     [name]="arrowIcons[0]"
                                     [svgIcon]="arrowSVGIcons[0]"
                                     >
@@ -8546,7 +8550,7 @@ AgendaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
 
                                 {{ formatTime(extractDataItem(item)) }}
                                 <kendo-icon-wrapper
-                                    *ngIf="extractDataItem(item).head"
+                                    *ngIf="extractDataItem(item).head || extractDataItem(item).mid"
                                     [name]="arrowIcons[1]"
                                     [svgIcon]="arrowSVGIcons[1]"
                                     >
@@ -8591,7 +8595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         <td class="k-scheduler-timecolumn" role="gridcell">
                             <div *ngIf="!agendaTimeTemplate">
                                 <kendo-icon-wrapper
-                                    *ngIf="extractDataItem(item).tail"
+                                    *ngIf="extractDataItem(item).tail || extractDataItem(item).mid"
                                     [name]="arrowIcons[0]"
                                     [svgIcon]="arrowSVGIcons[0]"
                                     >
@@ -8599,7 +8603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
                                 {{ formatTime(extractDataItem(item)) }}
                                 <kendo-icon-wrapper
-                                    *ngIf="extractDataItem(item).head"
+                                    *ngIf="extractDataItem(item).head || extractDataItem(item).mid"
                                     [name]="arrowIcons[1]"
                                     [svgIcon]="arrowSVGIcons[1]"
                                     >
@@ -12964,8 +12968,8 @@ const createTasks = (periodStart, periodEnd, items, ranges) => {
     for (let index = 0; index < items.length; index++) {
         const item = items[index];
         const multiDay = isMultiDay(item);
-        const multipleRanges = multiDay && !item.event.isAllDay && (item.end.getTime() - item.start.getTime()) < MS_PER_DAY$1;
-        const isAllDay = item.event.isAllDay || (multiDay && !multipleRanges);
+        const multipleRanges = multiDay && !item.event.isAllDay;
+        const isAllDay = typeof item.event.isAllDay === 'boolean' ? item.event.isAllDay : (multiDay && !multipleRanges);
         const endTime = (isAllDay ? roundAllDayEnd(item) : item.end).toUTCDate();
         const startTime = (isAllDay ? item.start.stripTime() : item.start).toUTCDate();
         for (let rangeIndex = 0; rangeIndex < ranges.length; rangeIndex++) {
@@ -15600,19 +15604,10 @@ class TimelineViewComponent extends TimelineBase {
     constructor(localization, changeDetector, viewContext, viewState) {
         super(localization, changeDetector, viewContext, viewState);
         /**
-         * The long-date format for displaying the
-         * selected date in the Scheduler toolbar.
-         * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
-         * @default '{0:D}'
-         */
-        this.selectedDateFormat = '{0:D}';
-        /**
-         * The short-date format for displaying the
-         * selected date in the Scheduler toolbar.
-         * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
-         * @default '{0:d}'
+         * Specifies the number of days that the view will render.
+         * @default 1
          */
-        this.selectedShortDateFormat = '{0:d}';
+        this.numberOfDays = 1;
         /**
          * The invariant name for this view.
          * @default 'timeline'
@@ -15625,15 +15620,48 @@ class TimelineViewComponent extends TimelineBase {
     get title() {
         return this.localization.get('timelineViewTitle');
     }
+    /**
+     * The long-date format for displaying the
+     * selected date in the Scheduler toolbar.
+     * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
+     * > Note: If [numberOfDays](#toc-numberofdays) > 1, the default format value shows a range - `'{0:D} - {1:D}'`, where `0` is the start and `1` is the end date.
+     * @default '{0:D}'
+     */
+    set selectedDateFormat(format) {
+        this._selectedDateFormat = format;
+    }
+    get selectedDateFormat() {
+        if (this._selectedDateFormat) {
+            return this._selectedDateFormat;
+        }
+        return this.numberOfDays && this.numberOfDays > 1 ? '{0:D} - {1:D}' : '{0:D}';
+    }
+    /**
+     * The short-date format for displaying the
+     * selected date in the Scheduler toolbar.
+     * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
+     * > Note: If [numberOfDays](#toc-numberofdays) > 1, the default format value shows a range - `'{0:d} - {1:d}'`, where `0` is the start and `1` is the end date.
+     * @default '{0:d}'
+     */
+    set selectedShortDateFormat(format) {
+        this._selectedShortDateFormat = format;
+    }
+    get selectedShortDateFormat() {
+        if (this._selectedShortDateFormat) {
+            return this._selectedShortDateFormat;
+        }
+        return this.numberOfDays && this.numberOfDays > 1 ? '{0:d} - {1:d}' : '{0:d}';
+    }
 }
 TimelineViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimelineViewComponent, selector: "kendo-scheduler-timeline-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat" }, providers: [{
+TimelineViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimelineViewComponent, selector: "kendo-scheduler-timeline-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat", numberOfDays: "numberOfDays" }, providers: [{
             provide: SchedulerView,
             useExisting: forwardRef(() => TimelineViewComponent)
         }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #content>
             <timeline-multi-day-view
                 [name]="name"
+                [numberOfDays]="numberOfDays"
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
@@ -15676,6 +15704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ng-template #content>
             <timeline-multi-day-view
                 [name]="name"
+                [numberOfDays]="numberOfDays"
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
                 [currentTimeMarker]="viewCurrentTimeMarker"
@@ -15710,6 +15739,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], selectedShortDateFormat: [{
                 type: Input
+            }], numberOfDays: [{
+                type: Input
             }] } });
 
 /**
@@ -15736,6 +15767,11 @@ class TimelineWeekViewComponent extends TimelineBase {
          * @default '{0:d} - {1:d}'
          */
         this.selectedShortDateFormat = '{0:d} - {1:d}';
+        /**
+        * Specifies the number of weeks that the view will render.
+        * @default 1
+        */
+        this.numberOfWeeks = 1;
         /**
          * The invariant name for this view.
          * @default 'timelineWeek'
@@ -15756,7 +15792,7 @@ class TimelineWeekViewComponent extends TimelineBase {
     }
 }
 TimelineWeekViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineWeekViewComponent, deps: [{ token: i1$4.IntlService }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimelineWeekViewComponent, selector: "kendo-scheduler-timeline-week-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat" }, providers: [{
+TimelineWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimelineWeekViewComponent, selector: "kendo-scheduler-timeline-week-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat", numberOfWeeks: "numberOfWeeks" }, providers: [{
             provide: SchedulerView,
             useExisting: forwardRef(() => TimelineWeekViewComponent)
         }], usesInheritance: true, ngImport: i0, template: `
@@ -15764,7 +15800,7 @@ TimelineWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             <timeline-multi-day-view
                 viewName="timeline-week"
                 [name]="name"
-                [numberOfDays]="7"
+                [numberOfDays]="7 * numberOfWeeks"
                 [getStartDate]="getStartDate"
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
@@ -15810,7 +15846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <timeline-multi-day-view
                 viewName="timeline-week"
                 [name]="name"
-                [numberOfDays]="7"
+                [numberOfDays]="7 * numberOfWeeks"
                 [getStartDate]="getStartDate"
                 [eventHeight]="viewEventHeight"
                 [columnWidth]="viewColumnWidth"
@@ -15847,6 +15883,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], selectedShortDateFormat: [{
                 type: Input
+            }], numberOfWeeks: [{
+                type: Input
             }] } });
 
 /**
@@ -15856,19 +15894,10 @@ class TimelineMonthViewComponent extends TimelineBase {
     constructor(localization, changeDetector, viewContext, viewState) {
         super(localization, changeDetector, viewContext, viewState);
         /**
-         * The long-date format for displaying the
-         * selected date in the Scheduler toolbar.
-         * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
-         * @default '{0:Y}'
-         */
-        this.selectedDateFormat = '{0:Y}';
-        /**
-         * The short-date format for displaying the
-         * selected date in the Scheduler toolbar.
-         * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
-         * @default '{0:y}'
+         * Specifies the number of months that the view will render.
+         * @default 1
          */
-        this.selectedShortDateFormat = '{0:y}';
+        this.numberOfMonths = 1;
         /**
          * The invariant name for this view.
          * @default 'timelineMonth'
@@ -15884,7 +15913,7 @@ class TimelineMonthViewComponent extends TimelineBase {
          * @hidden
          */
         this.getEndDate = (selectedDate) => {
-            return addMonths(this.getStartDate(selectedDate), 1);
+            return addMonths(this.getStartDate(selectedDate), this.numberOfMonths);
         };
         /**
          * @hidden
@@ -15899,9 +15928,41 @@ class TimelineMonthViewComponent extends TimelineBase {
     get title() {
         return this.localization.get('timelineMonthViewTitle');
     }
+    /**
+     * The long-date format for displaying the
+     * selected date in the Scheduler toolbar.
+     * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
+     * > Note: If [numberOfMonths](#toc-numberofmonths) > 1, the default format value shows a range - `'{0:Y} - {1:Y}'`, where `0` is the start and `1` is the end date.
+     * @default '{0:Y}'
+     */
+    set selectedDateFormat(format) {
+        this._selectedDateFormat = format;
+    }
+    get selectedDateFormat() {
+        if (this._selectedDateFormat) {
+            return this._selectedDateFormat;
+        }
+        return this.numberOfMonths && this.numberOfMonths > 1 ? '{0:Y} - {1:Y}' : '{0:Y}';
+    }
+    /**
+     * The short-date format for displaying the
+     * selected date in the Scheduler toolbar.
+     * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
+     * > Note: If [numberOfMonths](#toc-numberofmonths) > 1, the default format value shows a range - `'{0:y} - {1:y}'`, where `0` is the start and `1` is the end date.
+     * @default '{0:y}'
+     */
+    set selectedShortDateFormat(format) {
+        this._selectedShortDateFormat = format;
+    }
+    get selectedShortDateFormat() {
+        if (this._selectedShortDateFormat) {
+            return this._selectedShortDateFormat;
+        }
+        return this.numberOfMonths && this.numberOfMonths > 1 ? '{0:y} - {1:y}' : '{0:y}';
+    }
 }
 TimelineMonthViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineMonthViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineMonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimelineMonthViewComponent, selector: "kendo-scheduler-timeline-month-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat" }, providers: [{
+TimelineMonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TimelineMonthViewComponent, selector: "kendo-scheduler-timeline-month-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat", numberOfMonths: "numberOfMonths" }, providers: [{
             provide: SchedulerView,
             useExisting: forwardRef(() => TimelineMonthViewComponent)
         }], usesInheritance: true, ngImport: i0, template: `
@@ -15992,6 +16053,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], selectedShortDateFormat: [{
                 type: Input
+            }], numberOfMonths: [{
+                type: Input
             }] } });
 
 const PUBLIC_DIRECTIVES = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-scheduler",
-  "version": "14.3.1-develop.2",
+  "version": "14.4.0-develop.2",
   "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,21 +26,21 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.17.2",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "14.3.1-develop.2",
-    "@progress/kendo-angular-common": "14.3.1-develop.2",
-    "@progress/kendo-angular-dateinputs": "14.3.1-develop.2",
-    "@progress/kendo-angular-dialog": "14.3.1-develop.2",
-    "@progress/kendo-angular-dropdowns": "14.3.1-develop.2",
-    "@progress/kendo-angular-icons": "14.3.1-develop.2",
-    "@progress/kendo-angular-inputs": "14.3.1-develop.2",
-    "@progress/kendo-angular-intl": "14.3.1-develop.2",
-    "@progress/kendo-angular-l10n": "14.3.1-develop.2",
-    "@progress/kendo-angular-popup": "14.3.1-develop.2",
+    "@progress/kendo-angular-buttons": "14.4.0-develop.2",
+    "@progress/kendo-angular-common": "14.4.0-develop.2",
+    "@progress/kendo-angular-dateinputs": "14.4.0-develop.2",
+    "@progress/kendo-angular-dialog": "14.4.0-develop.2",
+    "@progress/kendo-angular-dropdowns": "14.4.0-develop.2",
+    "@progress/kendo-angular-icons": "14.4.0-develop.2",
+    "@progress/kendo-angular-inputs": "14.4.0-develop.2",
+    "@progress/kendo-angular-intl": "14.4.0-develop.2",
+    "@progress/kendo-angular-l10n": "14.4.0-develop.2",
+    "@progress/kendo-angular-popup": "14.4.0-develop.2",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "14.3.1-develop.2",
+    "@progress/kendo-angular-schematics": "14.4.0-develop.2",
     "@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,9 +4,9 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'SchedulerModule', package: 'scheduler', peerDependencies: {
             // peer dep of the dropdowns
-            '@progress/kendo-angular-treeview': '14.3.1-develop.2',
+            '@progress/kendo-angular-treeview': '14.4.0-develop.2',
             // peer dependency of kendo-angular-inputs
-            '@progress/kendo-angular-dialog': '14.3.1-develop.2',
+            '@progress/kendo-angular-dialog': '14.4.0-develop.2',
             // peer dependency of kendo-angular-icons
             '@progress/kendo-svg-icons': '^2.0.0'
         } });

package/views/timeline/timeline-month-view.component.d.ts

@@ -20,16 +20,27 @@ export declare class TimelineMonthViewComponent extends TimelineBase {
      * The long-date format for displaying the
      * selected date in the Scheduler toolbar.
      * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
+     * > Note: If [numberOfMonths](#toc-numberofmonths) > 1, the default format value shows a range - `'{0:Y} - {1:Y}'`, where `0` is the start and `1` is the end date.
      * @default '{0:Y}'
      */
-    selectedDateFormat: string;
+    set selectedDateFormat(format: string);
+    get selectedDateFormat(): string;
+    private _selectedDateFormat;
     /**
      * The short-date format for displaying the
      * selected date in the Scheduler toolbar.
      * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
+     * > Note: If [numberOfMonths](#toc-numberofmonths) > 1, the default format value shows a range - `'{0:y} - {1:y}'`, where `0` is the start and `1` is the end date.
      * @default '{0:y}'
      */
-    selectedShortDateFormat: string;
+    set selectedShortDateFormat(format: string);
+    get selectedShortDateFormat(): string;
+    private _selectedShortDateFormat;
+    /**
+     * Specifies the number of months that the view will render.
+     * @default 1
+     */
+    numberOfMonths: number;
     /**
      * The invariant name for this view.
      * @default 'timelineMonth'
@@ -49,5 +60,5 @@ export declare class TimelineMonthViewComponent extends TimelineBase {
     getNextDate: (date: Date, count: number) => Date;
     constructor(localization: LocalizationService, changeDetector: ChangeDetectorRef, viewContext: ViewContextService, viewState: ViewStateService);
     static ɵfac: i0.ɵɵFactoryDeclaration<TimelineMonthViewComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TimelineMonthViewComponent, "kendo-scheduler-timeline-month-view", never, { "selectedDateFormat": "selectedDateFormat"; "selectedShortDateFormat": "selectedShortDateFormat"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimelineMonthViewComponent, "kendo-scheduler-timeline-month-view", never, { "selectedDateFormat": "selectedDateFormat"; "selectedShortDateFormat": "selectedShortDateFormat"; "numberOfMonths": "numberOfMonths"; }, {}, never, never>;
 }

package/views/timeline/timeline-view.component.d.ts

@@ -20,16 +20,27 @@ export declare class TimelineViewComponent extends TimelineBase {
      * The long-date format for displaying the
      * selected date in the Scheduler toolbar.
      * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
+     * > Note: If [numberOfDays](#toc-numberofdays) > 1, the default format value shows a range - `'{0:D} - {1:D}'`, where `0` is the start and `1` is the end date.
      * @default '{0:D}'
      */
-    selectedDateFormat: string;
+    set selectedDateFormat(format: string);
+    get selectedDateFormat(): string;
+    private _selectedDateFormat;
     /**
      * The short-date format for displaying the
      * selected date in the Scheduler toolbar.
      * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
+     * > Note: If [numberOfDays](#toc-numberofdays) > 1, the default format value shows a range - `'{0:d} - {1:d}'`, where `0` is the start and `1` is the end date.
      * @default '{0:d}'
      */
-    selectedShortDateFormat: string;
+    set selectedShortDateFormat(format: string);
+    get selectedShortDateFormat(): string;
+    private _selectedShortDateFormat;
+    /**
+     * Specifies the number of days that the view will render.
+     * @default 1
+     */
+    numberOfDays: number;
     /**
      * The invariant name for this view.
      * @default 'timeline'
@@ -37,5 +48,5 @@ export declare class TimelineViewComponent extends TimelineBase {
     readonly name: string;
     constructor(localization: LocalizationService, changeDetector: ChangeDetectorRef, viewContext: ViewContextService, viewState: ViewStateService);
     static ɵfac: i0.ɵɵFactoryDeclaration<TimelineViewComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TimelineViewComponent, "kendo-scheduler-timeline-view", never, { "selectedDateFormat": "selectedDateFormat"; "selectedShortDateFormat": "selectedShortDateFormat"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimelineViewComponent, "kendo-scheduler-timeline-view", never, { "selectedDateFormat": "selectedDateFormat"; "selectedShortDateFormat": "selectedShortDateFormat"; "numberOfDays": "numberOfDays"; }, {}, never, never>;
 }

package/views/timeline/timeline-week-view.component.d.ts

@@ -35,6 +35,11 @@ export declare class TimelineWeekViewComponent extends TimelineBase {
      * @default '{0:d} - {1:d}'
      */
     selectedShortDateFormat: string;
+    /**
+    * Specifies the number of weeks that the view will render.
+    * @default 1
+    */
+    numberOfWeeks: number;
     /**
      * The invariant name for this view.
      * @default 'timelineWeek'
@@ -46,5 +51,5 @@ export declare class TimelineWeekViewComponent extends TimelineBase {
      */
     getStartDate: (selectedDate: Date) => Date;
     static ɵfac: i0.ɵɵFactoryDeclaration<TimelineWeekViewComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TimelineWeekViewComponent, "kendo-scheduler-timeline-week-view", never, { "selectedDateFormat": "selectedDateFormat"; "selectedShortDateFormat": "selectedShortDateFormat"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimelineWeekViewComponent, "kendo-scheduler-timeline-week-view", never, { "selectedDateFormat": "selectedDateFormat"; "selectedShortDateFormat": "selectedShortDateFormat"; "numberOfWeeks": "numberOfWeeks"; }, {}, never, never>;
 }