@progress/kendo-angular-gantt 13.2.0-develop.2 → 13.2.0-develop.4

package/common/option-changes.service.d.ts

@@ -10,8 +10,10 @@ import * as i0 from "@angular/core";
 export declare class OptionChangesService {
     readonly viewChanges: EventEmitter<any>;
     readonly columnChanges: EventEmitter<any>;
+    readonly dateFormatChanges: EventEmitter<any>;
     notifyColumnChanges(): void;
     notifyViewChanges(): void;
+    notifyDateFormatChanges(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<OptionChangesService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<OptionChangesService>;
 }

package/esm2020/common/option-changes.service.mjs

@@ -11,6 +11,7 @@ export class OptionChangesService {
     constructor() {
         this.viewChanges = new EventEmitter();
         this.columnChanges = new EventEmitter();
+        this.dateFormatChanges = new EventEmitter();
     }
     notifyColumnChanges() {
         this.columnChanges.emit();
@@ -18,6 +19,9 @@ export class OptionChangesService {
     notifyViewChanges() {
         this.viewChanges.emit();
     }
+    notifyDateFormatChanges() {
+        this.dateFormatChanges.emit();
+    }
 }
 OptionChangesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: OptionChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 OptionChangesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: OptionChangesService });

package/esm2020/gantt.component.mjs

@@ -412,6 +412,9 @@ export class GanttComponent {
         this.optionChangesSubscriptions.add(this.optionChangesService.viewChanges.subscribe(() => {
             this.loadTimelineData();
         }));
+        this.optionChangesSubscriptions.add(this.optionChangesService.dateFormatChanges.subscribe(() => {
+            this.loadTimelineData();
+        }));
         this.optionChangesSubscriptions.add(this.optionChangesService.columnChanges.subscribe(() => {
             this.treeList.columns.notifyOnChanges();
         }));

package/esm2020/models/timeline-header-date-format.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1688401408,
-    version: '13.2.0-develop.2',
+    publishDate: 1688648456,
+    version: '13.2.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2020/timeline/timeline-base-view.service.mjs

@@ -21,6 +21,10 @@ export const HOUR_FORMAT = 'HH:mm aa';
  * @hidden
  */
 export const MONTH_FORMAT = 'MMM';
+/**
+ * @hidden
+ */
+export const YEAR_FORMAT = 'yyyy';
 /**
  * @hidden
  */
@@ -61,13 +65,14 @@ let TimelineBaseViewService = class TimelineBaseViewService {
      * @param end - The tasks' range end date
      * @returns {Array<Object>} - A collection containing the hour slots
      */
-    getHours(start, end) {
+    getHours(start, end, customDateFormat) {
         const slots = [];
         const workDayStart = this.intlService.parseDate(this.options.workDayStart).getHours();
         const workDayEnd = this.intlService.parseDate(this.options.workDayEnd).getHours();
         // TODO: retrieve from option?
         const hourSpan = 1;
         let startDate = new Date(start);
+        const hoursFormat = customDateFormat ? customDateFormat : HOUR_FORMAT;
         const endDate = new Date(end);
         while (startDate < endDate) {
             const slotEnd = new Date(startDate);
@@ -77,7 +82,7 @@ let TimelineBaseViewService = class TimelineBaseViewService {
                 start: startDate,
                 end: slotEnd,
                 isWorking: isWorkSlot,
-                text: this.intlService.formatDate(startDate, HOUR_FORMAT, this.localeId),
+                text: this.intlService.formatDate(startDate, hoursFormat, this.localeId),
                 span: 1,
                 slotWidth: this.options.slotWidth
             });
@@ -91,9 +96,10 @@ let TimelineBaseViewService = class TimelineBaseViewService {
      * @param end - The tasks' range end date
      * @returns {Array<Object>} - A collection containing the day slots
      */
-    getDays(start, end) {
+    getDays(start, end, customDateFormat) {
         const slots = [];
         let startDay = new Date(start);
+        const dayFormat = customDateFormat ? customDateFormat : DAY_FORMAT;
         const endDay = new Date(end);
         while (startDay <= endDay) {
             // Get the days with cleared time values (except for start and end day)
@@ -105,7 +111,7 @@ let TimelineBaseViewService = class TimelineBaseViewService {
                 start: startDay,
                 end: slotEnd,
                 isWorking: isWorking,
-                text: this.intlService.formatDate(startDay, DAY_FORMAT, this.localeId),
+                text: this.intlService.formatDate(startDay, dayFormat, this.localeId),
                 span: 1,
                 slotWidth: this.options.slotWidth
             });
@@ -113,18 +119,19 @@ let TimelineBaseViewService = class TimelineBaseViewService {
         }
         return slots;
     }
-    getWeeks(start, end) {
+    getWeeks(start, end, customDateFormat) {
         const weekStart = this.intlService.firstDay();
         const slots = [];
         let startDay = new Date(start);
+        const dayFormat = customDateFormat ? customDateFormat : DAY_FORMAT;
         const endDay = new Date(end);
         while (startDay <= endDay) {
             const lastWeekDay = lastDayOfWeek(startDay, weekStart);
             const slotEnd = lastWeekDay > endDay ? endDay : lastWeekDay;
             const daySlots = this.getDays(startDay, slotEnd);
             const span = daySlots.length;
-            const firstDay = this.intlService.formatDate(firstDayInWeek(getDate(startDay), weekStart), DAY_FORMAT, this.localeId);
-            const lastDay = this.intlService.formatDate(slotEnd, DAY_FORMAT, this.localeId);
+            const firstDay = this.intlService.formatDate(firstDayInWeek(getDate(startDay), weekStart), dayFormat, this.localeId);
+            const lastDay = this.intlService.formatDate(slotEnd, dayFormat, this.localeId);
             if (span > 0) {
                 slots.push({
                     start: daySlots[0].start,
@@ -138,9 +145,10 @@ let TimelineBaseViewService = class TimelineBaseViewService {
         }
         return slots;
     }
-    getMonths(start, end, isMainViewType) {
+    getMonths(start, end, isMainViewType, customDateFormat) {
         const slots = [];
         let startDay = new Date(start);
+        const monthFormat = customDateFormat ? customDateFormat : MONTH_FORMAT;
         const endDay = new Date(end);
         while (startDay < endDay) {
             const endMonth = lastDayOfMonth(startDay);
@@ -149,7 +157,7 @@ let TimelineBaseViewService = class TimelineBaseViewService {
             const weekSlots = this.getWeeks(startDay, slotEnd);
             const span = isMainViewType ? daySlots.length : weekSlots.length;
             const monthStart = firstDayOfMonth(getDate(startDay));
-            const shortText = this.intlService.formatDate(monthStart, MONTH_FORMAT, this.localeId);
+            const shortText = this.intlService.formatDate(monthStart, monthFormat, this.localeId);
             if (span > 0) {
                 slots.push({
                     start: isMainViewType ? daySlots[0].start : weekSlots[0].start,
@@ -163,10 +171,11 @@ let TimelineBaseViewService = class TimelineBaseViewService {
         }
         return slots;
     }
-    getYears(start, end) {
+    getYears(start, end, customDateFormat) {
         const slots = [];
         let startDay = new Date(start);
         const endDay = new Date(end);
+        const yearFormat = customDateFormat ? customDateFormat : YEAR_FORMAT;
         while (startDay < endDay) {
             const yearEnd = lastDayOfMonth(lastMonthOfYear(startDay));
             const slotEnd = endDay < yearEnd ? endDay : yearEnd;
@@ -177,7 +186,7 @@ let TimelineBaseViewService = class TimelineBaseViewService {
                     start: monthSlots[0].start,
                     end: monthSlots[span - 1].end,
                     span: span,
-                    text: slotEnd.getFullYear(),
+                    text: this.intlService.formatDate(slotEnd, yearFormat),
                     slotWidth: this.options.slotWidth
                 });
             }

package/esm2020/timeline/timeline-day-view.service.mjs

@@ -50,11 +50,11 @@ export class TimelineDayViewService extends TimelineBaseViewService {
         // will return the header rows slots
         const slots = [];
         const { start, end } = this.getRange(tasks);
-        const daySlots = this.getDays(start, end);
+        const daySlots = this.getDays(start, end, this.options.timelineHeadersDateFormat?.groupHeaderDateFormat);
         const hourSlots = [];
         for (let i = 0; i < daySlots.length; i++) {
             const daySlot = daySlots[i];
-            const hours = this.getHours(daySlot.start, daySlot.end);
+            const hours = this.getHours(daySlot.start, daySlot.end, this.options.timelineHeadersDateFormat?.columnHeaderDateFormat);
             daySlot.span = hours.length;
             hourSlots.push(...hours);
         }

package/esm2020/timeline/timeline-month-view.service.mjs

@@ -54,8 +54,8 @@ export class TimelineMonthViewService extends TimelineBaseViewService {
         // will return the header rows slots
         const slots = [];
         const { start, end } = this.getRange(tasks);
-        const months = this.getMonths(start, end, true);
-        const weeks = this.getWeeks(start, end);
+        const months = this.getMonths(start, end, true, this.options.timelineHeadersDateFormat?.groupHeaderDateFormat);
+        const weeks = this.getWeeks(start, end, this.options.timelineHeadersDateFormat?.columnHeaderDateFormat);
         slots.push(months, weeks);
         return slots;
     }

package/esm2020/timeline/timeline-week-view.service.mjs

@@ -50,8 +50,8 @@ export class TimelineWeekViewService extends TimelineBaseViewService {
         // will return the header rows slots
         const slots = [];
         const { start, end } = this.getRange(tasks);
-        const weeks = this.getWeeks(start, end);
-        const days = this.getDays(start, end);
+        const weeks = this.getWeeks(start, end, this.options.timelineHeadersDateFormat?.groupHeaderDateFormat);
+        const days = this.getDays(start, end, this.options.timelineHeadersDateFormat?.columnHeaderDateFormat);
         slots.push(weeks, days);
         return slots;
     }

package/esm2020/timeline/timeline-year-view.service.mjs

@@ -45,8 +45,8 @@ export class TimeLineYearViewService extends TimelineBaseViewService {
         // will return the header rows slots
         const slots = [];
         const { start, end } = this.getRange(tasks);
-        const years = this.getYears(start, end);
-        const months = this.getMonths(start, end);
+        const years = this.getYears(start, end, this.options.timelineHeadersDateFormat?.groupHeaderDateFormat);
+        const months = this.getMonths(start, end, false, this.options.timelineHeadersDateFormat?.columnHeaderDateFormat);
         slots.push(years, months);
         return slots;
     }

package/esm2020/timeline/view-base.mjs

@@ -32,10 +32,13 @@ export class ViewBase {
             this.optionChangesService.notifyColumnChanges();
             this.dependencyDomService.notifyChanges();
         }
+        if (anyChanged(['timelineHeadersDateFormat'], changes)) {
+            this.optionChangesService.notifyDateFormatChanges();
+        }
     }
 }
 ViewBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewBase, deps: [{ token: i1.OptionChangesService }, { token: i2.DependencyDomService }], target: i0.ɵɵFactoryTarget.Directive });
-ViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ViewBase, selector: "kendo-gantt-view-base", inputs: { slotWidth: "slotWidth" }, usesOnChanges: true, ngImport: i0 });
+ViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ViewBase, selector: "kendo-gantt-view-base", inputs: { slotWidth: "slotWidth", timelineHeadersDateFormat: "timelineHeadersDateFormat" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewBase, decorators: [{
             type: Directive,
             args: [{
@@ -44,4 +47,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.OptionChangesService }, { type: i2.DependencyDomService }]; }, propDecorators: { slotWidth: [{
                 type: Input
+            }], timelineHeadersDateFormat: [{
+                type: Input
             }] } });

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

@@ -52,8 +52,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1688401408,
-    version: '13.2.0-develop.2',
+    publishDate: 1688648456,
+    version: '13.2.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -716,6 +716,10 @@ const HOUR_FORMAT = 'HH:mm aa';
  * @hidden
  */
 const MONTH_FORMAT = 'MMM';
+/**
+ * @hidden
+ */
+const YEAR_FORMAT = 'yyyy';
 /**
  * @hidden
  */
@@ -756,13 +760,14 @@ let TimelineBaseViewService = class TimelineBaseViewService {
      * @param end - The tasks' range end date
      * @returns {Array<Object>} - A collection containing the hour slots
      */
-    getHours(start, end) {
+    getHours(start, end, customDateFormat) {
         const slots = [];
         const workDayStart = this.intlService.parseDate(this.options.workDayStart).getHours();
         const workDayEnd = this.intlService.parseDate(this.options.workDayEnd).getHours();
         // TODO: retrieve from option?
         const hourSpan = 1;
         let startDate = new Date(start);
+        const hoursFormat = customDateFormat ? customDateFormat : HOUR_FORMAT;
         const endDate = new Date(end);
         while (startDate < endDate) {
             const slotEnd = new Date(startDate);
@@ -772,7 +777,7 @@ let TimelineBaseViewService = class TimelineBaseViewService {
                 start: startDate,
                 end: slotEnd,
                 isWorking: isWorkSlot,
-                text: this.intlService.formatDate(startDate, HOUR_FORMAT, this.localeId),
+                text: this.intlService.formatDate(startDate, hoursFormat, this.localeId),
                 span: 1,
                 slotWidth: this.options.slotWidth
             });
@@ -786,9 +791,10 @@ let TimelineBaseViewService = class TimelineBaseViewService {
      * @param end - The tasks' range end date
      * @returns {Array<Object>} - A collection containing the day slots
      */
-    getDays(start, end) {
+    getDays(start, end, customDateFormat) {
         const slots = [];
         let startDay = new Date(start);
+        const dayFormat = customDateFormat ? customDateFormat : DAY_FORMAT;
         const endDay = new Date(end);
         while (startDay <= endDay) {
             // Get the days with cleared time values (except for start and end day)
@@ -800,7 +806,7 @@ let TimelineBaseViewService = class TimelineBaseViewService {
                 start: startDay,
                 end: slotEnd,
                 isWorking: isWorking,
-                text: this.intlService.formatDate(startDay, DAY_FORMAT, this.localeId),
+                text: this.intlService.formatDate(startDay, dayFormat, this.localeId),
                 span: 1,
                 slotWidth: this.options.slotWidth
             });
@@ -808,18 +814,19 @@ let TimelineBaseViewService = class TimelineBaseViewService {
         }
         return slots;
     }
-    getWeeks(start, end) {
+    getWeeks(start, end, customDateFormat) {
         const weekStart = this.intlService.firstDay();
         const slots = [];
         let startDay = new Date(start);
+        const dayFormat = customDateFormat ? customDateFormat : DAY_FORMAT;
         const endDay = new Date(end);
         while (startDay <= endDay) {
             const lastWeekDay = lastDayOfWeek(startDay, weekStart);
             const slotEnd = lastWeekDay > endDay ? endDay : lastWeekDay;
             const daySlots = this.getDays(startDay, slotEnd);
             const span = daySlots.length;
-            const firstDay = this.intlService.formatDate(firstDayInWeek(getDate(startDay), weekStart), DAY_FORMAT, this.localeId);
-            const lastDay = this.intlService.formatDate(slotEnd, DAY_FORMAT, this.localeId);
+            const firstDay = this.intlService.formatDate(firstDayInWeek(getDate(startDay), weekStart), dayFormat, this.localeId);
+            const lastDay = this.intlService.formatDate(slotEnd, dayFormat, this.localeId);
             if (span > 0) {
                 slots.push({
                     start: daySlots[0].start,
@@ -833,9 +840,10 @@ let TimelineBaseViewService = class TimelineBaseViewService {
         }
         return slots;
     }
-    getMonths(start, end, isMainViewType) {
+    getMonths(start, end, isMainViewType, customDateFormat) {
         const slots = [];
         let startDay = new Date(start);
+        const monthFormat = customDateFormat ? customDateFormat : MONTH_FORMAT;
         const endDay = new Date(end);
         while (startDay < endDay) {
             const endMonth = lastDayOfMonth(startDay);
@@ -844,7 +852,7 @@ let TimelineBaseViewService = class TimelineBaseViewService {
             const weekSlots = this.getWeeks(startDay, slotEnd);
             const span = isMainViewType ? daySlots.length : weekSlots.length;
             const monthStart = firstDayOfMonth(getDate(startDay));
-            const shortText = this.intlService.formatDate(monthStart, MONTH_FORMAT, this.localeId);
+            const shortText = this.intlService.formatDate(monthStart, monthFormat, this.localeId);
             if (span > 0) {
                 slots.push({
                     start: isMainViewType ? daySlots[0].start : weekSlots[0].start,
@@ -858,10 +866,11 @@ let TimelineBaseViewService = class TimelineBaseViewService {
         }
         return slots;
     }
-    getYears(start, end) {
+    getYears(start, end, customDateFormat) {
         const slots = [];
         let startDay = new Date(start);
         const endDay = new Date(end);
+        const yearFormat = customDateFormat ? customDateFormat : YEAR_FORMAT;
         while (startDay < endDay) {
             const yearEnd = lastDayOfMonth(lastMonthOfYear(startDay));
             const slotEnd = endDay < yearEnd ? endDay : yearEnd;
@@ -872,7 +881,7 @@ let TimelineBaseViewService = class TimelineBaseViewService {
                     start: monthSlots[0].start,
                     end: monthSlots[span - 1].end,
                     span: span,
-                    text: slotEnd.getFullYear(),
+                    text: this.intlService.formatDate(slotEnd, yearFormat),
                     slotWidth: this.options.slotWidth
                 });
             }
@@ -924,14 +933,15 @@ class TimelineDayViewService extends TimelineBaseViewService {
      * Used to render the number of columns and the header
      */
     getSlots(tasks) {
+        var _a, _b;
         // will return the header rows slots
         const slots = [];
         const { start, end } = this.getRange(tasks);
-        const daySlots = this.getDays(start, end);
+        const daySlots = this.getDays(start, end, (_a = this.options.timelineHeadersDateFormat) === null || _a === void 0 ? void 0 : _a.groupHeaderDateFormat);
         const hourSlots = [];
         for (let i = 0; i < daySlots.length; i++) {
             const daySlot = daySlots[i];
-            const hours = this.getHours(daySlot.start, daySlot.end);
+            const hours = this.getHours(daySlot.start, daySlot.end, (_b = this.options.timelineHeadersDateFormat) === null || _b === void 0 ? void 0 : _b.columnHeaderDateFormat);
             daySlot.span = hours.length;
             hourSlots.push(...hours);
         }
@@ -991,11 +1001,12 @@ class TimelineMonthViewService extends TimelineBaseViewService {
      * Used to render the number of columns and the header
      */
     getSlots(tasks) {
+        var _a, _b;
         // will return the header rows slots
         const slots = [];
         const { start, end } = this.getRange(tasks);
-        const months = this.getMonths(start, end, true);
-        const weeks = this.getWeeks(start, end);
+        const months = this.getMonths(start, end, true, (_a = this.options.timelineHeadersDateFormat) === null || _a === void 0 ? void 0 : _a.groupHeaderDateFormat);
+        const weeks = this.getWeeks(start, end, (_b = this.options.timelineHeadersDateFormat) === null || _b === void 0 ? void 0 : _b.columnHeaderDateFormat);
         slots.push(months, weeks);
         return slots;
     }
@@ -1048,11 +1059,12 @@ class TimelineWeekViewService extends TimelineBaseViewService {
      * Used to render the number of columns and the header
      */
     getSlots(tasks) {
+        var _a, _b;
         // will return the header rows slots
         const slots = [];
         const { start, end } = this.getRange(tasks);
-        const weeks = this.getWeeks(start, end);
-        const days = this.getDays(start, end);
+        const weeks = this.getWeeks(start, end, (_a = this.options.timelineHeadersDateFormat) === null || _a === void 0 ? void 0 : _a.groupHeaderDateFormat);
+        const days = this.getDays(start, end, (_b = this.options.timelineHeadersDateFormat) === null || _b === void 0 ? void 0 : _b.columnHeaderDateFormat);
         slots.push(weeks, days);
         return slots;
     }
@@ -1100,11 +1112,12 @@ class TimeLineYearViewService extends TimelineBaseViewService {
      * Used to render the number of columns and the header
      */
     getSlots(tasks) {
+        var _a, _b;
         // will return the header rows slots
         const slots = [];
         const { start, end } = this.getRange(tasks);
-        const years = this.getYears(start, end);
-        const months = this.getMonths(start, end);
+        const years = this.getYears(start, end, (_a = this.options.timelineHeadersDateFormat) === null || _a === void 0 ? void 0 : _a.groupHeaderDateFormat);
+        const months = this.getMonths(start, end, false, (_b = this.options.timelineHeadersDateFormat) === null || _b === void 0 ? void 0 : _b.columnHeaderDateFormat);
         slots.push(years, months);
         return slots;
     }
@@ -1155,6 +1168,7 @@ class OptionChangesService {
     constructor() {
         this.viewChanges = new EventEmitter();
         this.columnChanges = new EventEmitter();
+        this.dateFormatChanges = new EventEmitter();
     }
     notifyColumnChanges() {
         this.columnChanges.emit();
@@ -1162,6 +1176,9 @@ class OptionChangesService {
     notifyViewChanges() {
         this.viewChanges.emit();
     }
+    notifyDateFormatChanges() {
+        this.dateFormatChanges.emit();
+    }
 }
 OptionChangesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: OptionChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 OptionChangesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: OptionChangesService });
@@ -3935,10 +3952,13 @@ class ViewBase {
             this.optionChangesService.notifyColumnChanges();
             this.dependencyDomService.notifyChanges();
         }
+        if (anyChanged(['timelineHeadersDateFormat'], changes)) {
+            this.optionChangesService.notifyDateFormatChanges();
+        }
     }
 }
 ViewBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewBase, deps: [{ token: OptionChangesService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Directive });
-ViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ViewBase, selector: "kendo-gantt-view-base", inputs: { slotWidth: "slotWidth" }, usesOnChanges: true, ngImport: i0 });
+ViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ViewBase, selector: "kendo-gantt-view-base", inputs: { slotWidth: "slotWidth", timelineHeadersDateFormat: "timelineHeadersDateFormat" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewBase, decorators: [{
             type: Directive,
             args: [{
@@ -3947,6 +3967,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: OptionChangesService }, { type: DependencyDomService }]; }, propDecorators: { slotWidth: [{
                 type: Input
+            }], timelineHeadersDateFormat: [{
+                type: Input
             }] } });
 
 /**
@@ -5349,6 +5371,9 @@ class GanttComponent {
         this.optionChangesSubscriptions.add(this.optionChangesService.viewChanges.subscribe(() => {
             this.loadTimelineData();
         }));
+        this.optionChangesSubscriptions.add(this.optionChangesService.dateFormatChanges.subscribe(() => {
+            this.loadTimelineData();
+        }));
         this.optionChangesSubscriptions.add(this.optionChangesService.columnChanges.subscribe(() => {
             this.treeList.columns.notifyOnChanges();
         }));

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

@@ -52,8 +52,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1688401408,
-    version: '13.2.0-develop.2',
+    publishDate: 1688648456,
+    version: '13.2.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -968,6 +968,7 @@ class OptionChangesService {
     constructor() {
         this.viewChanges = new EventEmitter();
         this.columnChanges = new EventEmitter();
+        this.dateFormatChanges = new EventEmitter();
     }
     notifyColumnChanges() {
         this.columnChanges.emit();
@@ -975,6 +976,9 @@ class OptionChangesService {
     notifyViewChanges() {
         this.viewChanges.emit();
     }
+    notifyDateFormatChanges() {
+        this.dateFormatChanges.emit();
+    }
 }
 OptionChangesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: OptionChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 OptionChangesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: OptionChangesService });
@@ -994,6 +998,10 @@ const HOUR_FORMAT = 'HH:mm aa';
  * @hidden
  */
 const MONTH_FORMAT = 'MMM';
+/**
+ * @hidden
+ */
+const YEAR_FORMAT = 'yyyy';
 /**
  * @hidden
  */
@@ -1034,13 +1042,14 @@ let TimelineBaseViewService = class TimelineBaseViewService {
      * @param end - The tasks' range end date
      * @returns {Array<Object>} - A collection containing the hour slots
      */
-    getHours(start, end) {
+    getHours(start, end, customDateFormat) {
         const slots = [];
         const workDayStart = this.intlService.parseDate(this.options.workDayStart).getHours();
         const workDayEnd = this.intlService.parseDate(this.options.workDayEnd).getHours();
         // TODO: retrieve from option?
         const hourSpan = 1;
         let startDate = new Date(start);
+        const hoursFormat = customDateFormat ? customDateFormat : HOUR_FORMAT;
         const endDate = new Date(end);
         while (startDate < endDate) {
             const slotEnd = new Date(startDate);
@@ -1050,7 +1059,7 @@ let TimelineBaseViewService = class TimelineBaseViewService {
                 start: startDate,
                 end: slotEnd,
                 isWorking: isWorkSlot,
-                text: this.intlService.formatDate(startDate, HOUR_FORMAT, this.localeId),
+                text: this.intlService.formatDate(startDate, hoursFormat, this.localeId),
                 span: 1,
                 slotWidth: this.options.slotWidth
             });
@@ -1064,9 +1073,10 @@ let TimelineBaseViewService = class TimelineBaseViewService {
      * @param end - The tasks' range end date
      * @returns {Array<Object>} - A collection containing the day slots
      */
-    getDays(start, end) {
+    getDays(start, end, customDateFormat) {
         const slots = [];
         let startDay = new Date(start);
+        const dayFormat = customDateFormat ? customDateFormat : DAY_FORMAT;
         const endDay = new Date(end);
         while (startDay <= endDay) {
             // Get the days with cleared time values (except for start and end day)
@@ -1078,7 +1088,7 @@ let TimelineBaseViewService = class TimelineBaseViewService {
                 start: startDay,
                 end: slotEnd,
                 isWorking: isWorking,
-                text: this.intlService.formatDate(startDay, DAY_FORMAT, this.localeId),
+                text: this.intlService.formatDate(startDay, dayFormat, this.localeId),
                 span: 1,
                 slotWidth: this.options.slotWidth
             });
@@ -1086,18 +1096,19 @@ let TimelineBaseViewService = class TimelineBaseViewService {
         }
         return slots;
     }
-    getWeeks(start, end) {
+    getWeeks(start, end, customDateFormat) {
         const weekStart = this.intlService.firstDay();
         const slots = [];
         let startDay = new Date(start);
+        const dayFormat = customDateFormat ? customDateFormat : DAY_FORMAT;
         const endDay = new Date(end);
         while (startDay <= endDay) {
             const lastWeekDay = lastDayOfWeek(startDay, weekStart);
             const slotEnd = lastWeekDay > endDay ? endDay : lastWeekDay;
             const daySlots = this.getDays(startDay, slotEnd);
             const span = daySlots.length;
-            const firstDay = this.intlService.formatDate(firstDayInWeek(getDate(startDay), weekStart), DAY_FORMAT, this.localeId);
-            const lastDay = this.intlService.formatDate(slotEnd, DAY_FORMAT, this.localeId);
+            const firstDay = this.intlService.formatDate(firstDayInWeek(getDate(startDay), weekStart), dayFormat, this.localeId);
+            const lastDay = this.intlService.formatDate(slotEnd, dayFormat, this.localeId);
             if (span > 0) {
                 slots.push({
                     start: daySlots[0].start,
@@ -1111,9 +1122,10 @@ let TimelineBaseViewService = class TimelineBaseViewService {
         }
         return slots;
     }
-    getMonths(start, end, isMainViewType) {
+    getMonths(start, end, isMainViewType, customDateFormat) {
         const slots = [];
         let startDay = new Date(start);
+        const monthFormat = customDateFormat ? customDateFormat : MONTH_FORMAT;
         const endDay = new Date(end);
         while (startDay < endDay) {
             const endMonth = lastDayOfMonth(startDay);
@@ -1122,7 +1134,7 @@ let TimelineBaseViewService = class TimelineBaseViewService {
             const weekSlots = this.getWeeks(startDay, slotEnd);
             const span = isMainViewType ? daySlots.length : weekSlots.length;
             const monthStart = firstDayOfMonth(getDate(startDay));
-            const shortText = this.intlService.formatDate(monthStart, MONTH_FORMAT, this.localeId);
+            const shortText = this.intlService.formatDate(monthStart, monthFormat, this.localeId);
             if (span > 0) {
                 slots.push({
                     start: isMainViewType ? daySlots[0].start : weekSlots[0].start,
@@ -1136,10 +1148,11 @@ let TimelineBaseViewService = class TimelineBaseViewService {
         }
         return slots;
     }
-    getYears(start, end) {
+    getYears(start, end, customDateFormat) {
         const slots = [];
         let startDay = new Date(start);
         const endDay = new Date(end);
+        const yearFormat = customDateFormat ? customDateFormat : YEAR_FORMAT;
         while (startDay < endDay) {
             const yearEnd = lastDayOfMonth(lastMonthOfYear(startDay));
             const slotEnd = endDay < yearEnd ? endDay : yearEnd;
@@ -1150,7 +1163,7 @@ let TimelineBaseViewService = class TimelineBaseViewService {
                     start: monthSlots[0].start,
                     end: monthSlots[span - 1].end,
                     span: span,
-                    text: slotEnd.getFullYear(),
+                    text: this.intlService.formatDate(slotEnd, yearFormat),
                     slotWidth: this.options.slotWidth
                 });
             }
@@ -1205,11 +1218,11 @@ class TimelineDayViewService extends TimelineBaseViewService {
         // will return the header rows slots
         const slots = [];
         const { start, end } = this.getRange(tasks);
-        const daySlots = this.getDays(start, end);
+        const daySlots = this.getDays(start, end, this.options.timelineHeadersDateFormat?.groupHeaderDateFormat);
         const hourSlots = [];
         for (let i = 0; i < daySlots.length; i++) {
             const daySlot = daySlots[i];
-            const hours = this.getHours(daySlot.start, daySlot.end);
+            const hours = this.getHours(daySlot.start, daySlot.end, this.options.timelineHeadersDateFormat?.columnHeaderDateFormat);
             daySlot.span = hours.length;
             hourSlots.push(...hours);
         }
@@ -1270,8 +1283,8 @@ class TimelineMonthViewService extends TimelineBaseViewService {
         // will return the header rows slots
         const slots = [];
         const { start, end } = this.getRange(tasks);
-        const months = this.getMonths(start, end, true);
-        const weeks = this.getWeeks(start, end);
+        const months = this.getMonths(start, end, true, this.options.timelineHeadersDateFormat?.groupHeaderDateFormat);
+        const weeks = this.getWeeks(start, end, this.options.timelineHeadersDateFormat?.columnHeaderDateFormat);
         slots.push(months, weeks);
         return slots;
     }
@@ -1325,8 +1338,8 @@ class TimelineWeekViewService extends TimelineBaseViewService {
         // will return the header rows slots
         const slots = [];
         const { start, end } = this.getRange(tasks);
-        const weeks = this.getWeeks(start, end);
-        const days = this.getDays(start, end);
+        const weeks = this.getWeeks(start, end, this.options.timelineHeadersDateFormat?.groupHeaderDateFormat);
+        const days = this.getDays(start, end, this.options.timelineHeadersDateFormat?.columnHeaderDateFormat);
         slots.push(weeks, days);
         return slots;
     }
@@ -1375,8 +1388,8 @@ class TimeLineYearViewService extends TimelineBaseViewService {
         // will return the header rows slots
         const slots = [];
         const { start, end } = this.getRange(tasks);
-        const years = this.getYears(start, end);
-        const months = this.getMonths(start, end);
+        const years = this.getYears(start, end, this.options.timelineHeadersDateFormat?.groupHeaderDateFormat);
+        const months = this.getMonths(start, end, false, this.options.timelineHeadersDateFormat?.columnHeaderDateFormat);
         slots.push(years, months);
         return slots;
     }
@@ -3893,10 +3906,13 @@ class ViewBase {
             this.optionChangesService.notifyColumnChanges();
             this.dependencyDomService.notifyChanges();
         }
+        if (anyChanged(['timelineHeadersDateFormat'], changes)) {
+            this.optionChangesService.notifyDateFormatChanges();
+        }
     }
 }
 ViewBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewBase, deps: [{ token: OptionChangesService }, { token: DependencyDomService }], target: i0.ɵɵFactoryTarget.Directive });
-ViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ViewBase, selector: "kendo-gantt-view-base", inputs: { slotWidth: "slotWidth" }, usesOnChanges: true, ngImport: i0 });
+ViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ViewBase, selector: "kendo-gantt-view-base", inputs: { slotWidth: "slotWidth", timelineHeadersDateFormat: "timelineHeadersDateFormat" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewBase, decorators: [{
             type: Directive,
             args: [{
@@ -3905,6 +3921,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: OptionChangesService }, { type: DependencyDomService }]; }, propDecorators: { slotWidth: [{
                 type: Input
+            }], timelineHeadersDateFormat: [{
+                type: Input
             }] } });
 
 /**
@@ -5307,6 +5325,9 @@ class GanttComponent {
         this.optionChangesSubscriptions.add(this.optionChangesService.viewChanges.subscribe(() => {
             this.loadTimelineData();
         }));
+        this.optionChangesSubscriptions.add(this.optionChangesService.dateFormatChanges.subscribe(() => {
+            this.loadTimelineData();
+        }));
         this.optionChangesSubscriptions.add(this.optionChangesService.columnChanges.subscribe(() => {
             this.treeList.columns.notifyOnChanges();
         }));

package/models/models.d.ts

@@ -35,6 +35,7 @@ export { EditEventDependencies } from './events/task-edit-event.interface';
 export { DependencyAddEvent } from './events/dependency-add-event.interface';
 export { DragScrollSettings } from '../scrolling/drag-scroll-settings';
 export { TaskDeleteEvent } from './events/task-delete-event.interface';
+export { TimelineHeaderDateFormat } from './timeline-header-date-format';
 export { ColumnLockedChangeEvent } from './events/column-locked-change-event.interface';
 export { ColumnReorderEvent } from './events/column-reorder-event.interface';
 export { ColumnResizeEvent } from './events/column-resize-event.interface';

package/models/timeline-header-date-format.d.ts

@@ -0,0 +1,18 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { DateFormatOptions } from "@progress/kendo-intl";
+/**
+ * Represents the options for formatting the Group Headers and Column Headers in each individual Timeline Header.
+ */
+export interface TimelineHeaderDateFormat {
+    /**
+     * Specifies the date format for the group header in the Timeline Header.
+     */
+    groupHeaderDateFormat?: string | DateFormatOptions;
+    /**
+     * Specifies the date format for the column header in the Timeline Header.
+     */
+    columnHeaderDateFormat?: string | DateFormatOptions;
+}

package/models/timeline-options.interface.d.ts

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Day } from "@progress/kendo-date-math";
 import { TimelineViewType } from "./timeline-view";
+import { TimelineHeaderDateFormat } from "./timeline-header-date-format";
 /**
  * @hidden
  *
@@ -38,4 +39,8 @@ export interface TimelineOptions {
      * The end of the work week (index based).
      */
     workWeekEnd?: Day;
+    /**
+     * The options for formatting the Group Headers and Column Headers in each individual Timeline Header.
+     */
+    timelineHeadersDateFormat?: TimelineHeaderDateFormat;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-gantt",
-  "version": "13.2.0-develop.2",
+  "version": "13.2.0-develop.4",
   "description": "Kendo UI Angular Gantt",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -24,22 +24,22 @@
     "@angular/platform-browser": "13 - 16",
     "@progress/kendo-data-query": "^1.5.5",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "13.2.0-develop.2",
-    "@progress/kendo-angular-common": "13.2.0-develop.2",
-    "@progress/kendo-angular-dialog": "13.2.0-develop.2",
-    "@progress/kendo-angular-dropdowns": "13.2.0-develop.2",
-    "@progress/kendo-angular-grid": "13.2.0-develop.2",
-    "@progress/kendo-angular-icons": "13.2.0-develop.2",
-    "@progress/kendo-angular-intl": "13.2.0-develop.2",
-    "@progress/kendo-angular-l10n": "13.2.0-develop.2",
-    "@progress/kendo-angular-layout": "13.2.0-develop.2",
-    "@progress/kendo-angular-popup": "13.2.0-develop.2",
-    "@progress/kendo-angular-treelist": "13.2.0-develop.2",
+    "@progress/kendo-angular-buttons": "13.2.0-develop.4",
+    "@progress/kendo-angular-common": "13.2.0-develop.4",
+    "@progress/kendo-angular-dialog": "13.2.0-develop.4",
+    "@progress/kendo-angular-dropdowns": "13.2.0-develop.4",
+    "@progress/kendo-angular-grid": "13.2.0-develop.4",
+    "@progress/kendo-angular-icons": "13.2.0-develop.4",
+    "@progress/kendo-angular-intl": "13.2.0-develop.4",
+    "@progress/kendo-angular-l10n": "13.2.0-develop.4",
+    "@progress/kendo-angular-layout": "13.2.0-develop.4",
+    "@progress/kendo-angular-popup": "13.2.0-develop.4",
+    "@progress/kendo-angular-treelist": "13.2.0-develop.4",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "13.2.0-develop.2",
+    "@progress/kendo-angular-schematics": "13.2.0-develop.4",
     "@progress/kendo-common": "^0.2.1",
     "@progress/kendo-date-math": "^1.5.2",
     "@progress/kendo-draggable": "^3.0.0"

package/schematics/ngAdd/index.js

@@ -7,20 +7,20 @@ function default_1(options) {
         // See https://github.com/telerik/kendo-schematics/issues/28
         peerDependencies: {
             // peer deps of the treelist
-            '@progress/kendo-angular-dateinputs': '13.2.0-develop.2',
-            '@progress/kendo-angular-dropdowns': '13.2.0-develop.2',
-            '@progress/kendo-angular-excel-export': '13.2.0-develop.2',
-            '@progress/kendo-angular-inputs': '13.2.0-develop.2',
-            '@progress/kendo-angular-l10n': '13.2.0-develop.2',
-            '@progress/kendo-angular-label': '13.2.0-develop.2',
-            '@progress/kendo-angular-pdf-export': '13.2.0-develop.2',
-            '@progress/kendo-angular-popup': '13.2.0-develop.2',
-            '@progress/kendo-angular-utils': '13.2.0-develop.2',
+            '@progress/kendo-angular-dateinputs': '13.2.0-develop.4',
+            '@progress/kendo-angular-dropdowns': '13.2.0-develop.4',
+            '@progress/kendo-angular-excel-export': '13.2.0-develop.4',
+            '@progress/kendo-angular-inputs': '13.2.0-develop.4',
+            '@progress/kendo-angular-l10n': '13.2.0-develop.4',
+            '@progress/kendo-angular-label': '13.2.0-develop.4',
+            '@progress/kendo-angular-pdf-export': '13.2.0-develop.4',
+            '@progress/kendo-angular-popup': '13.2.0-develop.4',
+            '@progress/kendo-angular-utils': '13.2.0-develop.4',
             '@progress/kendo-drawing': '^1.0.0',
             // peer dep of the dropdowns
-            '@progress/kendo-angular-treeview': '13.2.0-develop.2',
+            '@progress/kendo-angular-treeview': '13.2.0-develop.4',
             // peer dep of the layout
-            '@progress/kendo-angular-progressbar': '13.2.0-develop.2',
+            '@progress/kendo-angular-progressbar': '13.2.0-develop.4',
             // peer dep of the icons
             '@progress/kendo-svg-icons': '^1.0.0'
         } });

package/timeline/timeline-base-view.service.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { IntlService } from '@progress/kendo-angular-intl';
+import { DateFormatOptions, IntlService } from '@progress/kendo-angular-intl';
 import { MappingService } from '../common/mapping.service';
 import { TimelineOptions } from '../models/timeline-options.interface';
 import { DateRange } from '../models/date-range.interface';
@@ -19,6 +19,10 @@ export declare const HOUR_FORMAT = "HH:mm aa";
  * @hidden
  */
 export declare const MONTH_FORMAT = "MMM";
+/**
+ * @hidden
+ */
+export declare const YEAR_FORMAT = "yyyy";
 /**
  * @hidden
  */
@@ -65,15 +69,15 @@ export declare abstract class TimelineBaseViewService {
      * @param end - The tasks' range end date
      * @returns {Array<Object>} - A collection containing the hour slots
      */
-    protected getHours(start: any, end: any): Array<Slot>;
+    protected getHours(start: any, end: any, customDateFormat?: string | DateFormatOptions): Array<Slot>;
     /**
      *
      * @param start - The tasks' range start date
      * @param end - The tasks' range end date
      * @returns {Array<Object>} - A collection containing the day slots
      */
-    protected getDays(start: any, end: any): Array<Slot>;
-    protected getWeeks(start: any, end: any): Array<Slot>;
-    protected getMonths(start: any, end: any, isMainViewType?: boolean): Array<Slot>;
-    protected getYears(start: any, end: any): Array<Slot>;
+    protected getDays(start: any, end: any, customDateFormat?: string | DateFormatOptions): Array<Slot>;
+    protected getWeeks(start: any, end: any, customDateFormat?: string | DateFormatOptions): Array<Slot>;
+    protected getMonths(start: any, end: any, isMainViewType?: boolean, customDateFormat?: string | DateFormatOptions): Array<Slot>;
+    protected getYears(start: any, end: any, customDateFormat?: any): Array<Slot>;
 }

package/timeline/view-base.d.ts

@@ -6,6 +6,7 @@ import { OnChanges, SimpleChanges } from '@angular/core';
 import { DependencyDomService } from '../dependencies/dependency-dom.service';
 import { TimelineViewType } from '../models/timeline-view';
 import { OptionChangesService } from '../common/option-changes.service';
+import { TimelineHeaderDateFormat } from '../models/timeline-header-date-format';
 import * as i0 from "@angular/core";
 /**
  * The base class for the column components of the Gantt.
@@ -19,6 +20,10 @@ export declare abstract class ViewBase implements OnChanges {
      * @default 100
      */
     slotWidth: number;
+    /**
+     * Sets the date format for the Grouped and Column headers.
+     */
+    timelineHeadersDateFormat: TimelineHeaderDateFormat;
     /**
      * The type for the view (`day`, `week`, `month` or `year`).
      */
@@ -30,5 +35,5 @@ export declare abstract class ViewBase implements OnChanges {
     constructor(optionChangesService: OptionChangesService, dependencyDomService: DependencyDomService);
     ngOnChanges(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ViewBase, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ViewBase, "kendo-gantt-view-base", never, { "slotWidth": "slotWidth"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ViewBase, "kendo-gantt-view-base", never, { "slotWidth": "slotWidth"; "timelineHeadersDateFormat": "timelineHeadersDateFormat"; }, {}, never>;
 }