@progress/kendo-angular-gantt 13.2.0-develop.1 → 13.2.0-develop.3

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, Component, HostBinding, Input, InjectionToken, EventEmitter, Directive, ViewChild, forwardRef, Inject, ViewContainerRef, Output, Optional, QueryList, SkipSelf, Host, ContentChildren, ContentChild, HostListener, isDevMode, NgModule } from '@angular/core';
+import { Injectable, Component, HostBinding, Input, InjectionToken, EventEmitter, Inject, LOCALE_ID, Directive, ViewChild, forwardRef, ViewContainerRef, Output, Optional, QueryList, SkipSelf, Host, ContentChildren, ContentChild, HostListener, isDevMode, NgModule } from '@angular/core';
 import * as i11 from '@progress/kendo-angular-treelist';
 import { ColumnBase, ColumnComponent, ColumnGroupComponent, SpanColumnComponent, DataBoundTreeComponent, ExpandableTreeComponent, TreeListComponent, FlatBindingDirective, HierarchyBindingDirective, ExpandableDirective, TreeListModule } from '@progress/kendo-angular-treelist';
 import { cloneDate, addWeeks, firstDayInWeek, addDays, lastDayOfMonth, getDate, firstDayOfMonth, addMonths, lastMonthOfYear, MS_PER_HOUR, MS_PER_DAY, isEqual } from '@progress/kendo-date-math';
@@ -16,6 +16,8 @@ import { getter, touchEnabled } from '@progress/kendo-common';
 import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@progress/kendo-angular-intl';
+import { IntlService, IntlModule } from '@progress/kendo-angular-intl';
+import { __decorate, __param, __metadata } from 'tslib';
 import { orderBy } from '@progress/kendo-data-query';
 import { xIcon, plusIcon, minusIcon, saveIcon, cancelOutlineIcon, trashIcon } from '@progress/kendo-svg-icons';
 import * as i7 from '@progress/kendo-angular-icons';
@@ -50,8 +52,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-gantt',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1688396905,
-    version: '13.2.0-develop.1',
+    publishDate: 1688546776,
+    version: '13.2.0-develop.3',
     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'
 };
 
@@ -966,6 +968,7 @@ class OptionChangesService {
     constructor() {
         this.viewChanges = new EventEmitter();
         this.columnChanges = new EventEmitter();
+        this.dateFormatChanges = new EventEmitter();
     }
     notifyColumnChanges() {
         this.columnChanges.emit();
@@ -973,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 });
@@ -995,10 +1001,15 @@ const MONTH_FORMAT = 'MMM';
 /**
  * @hidden
  */
-class TimelineBaseViewService {
-    constructor(intlService, mapper) {
+const YEAR_FORMAT = 'yyyy';
+/**
+ * @hidden
+ */
+let TimelineBaseViewService = class TimelineBaseViewService {
+    constructor(intlService, mapper, localeId) {
         this.intlService = intlService;
         this.mapper = mapper;
+        this.localeId = localeId;
         this._viewStart = 0;
     }
     get viewStart() {
@@ -1031,13 +1042,14 @@ 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);
@@ -1047,7 +1059,7 @@ class TimelineBaseViewService {
                 start: startDate,
                 end: slotEnd,
                 isWorking: isWorkSlot,
-                text: this.intlService.formatDate(startDate, HOUR_FORMAT),
+                text: this.intlService.formatDate(startDate, hoursFormat, this.localeId),
                 span: 1,
                 slotWidth: this.options.slotWidth
             });
@@ -1061,9 +1073,10 @@ 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)
@@ -1075,7 +1088,7 @@ class TimelineBaseViewService {
                 start: startDay,
                 end: slotEnd,
                 isWorking: isWorking,
-                text: this.intlService.formatDate(startDay, DAY_FORMAT),
+                text: this.intlService.formatDate(startDay, dayFormat, this.localeId),
                 span: 1,
                 slotWidth: this.options.slotWidth
             });
@@ -1083,18 +1096,19 @@ 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);
-            const lastDay = this.intlService.formatDate(slotEnd, DAY_FORMAT);
+            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,
@@ -1108,9 +1122,10 @@ 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);
@@ -1119,7 +1134,7 @@ 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);
+            const shortText = this.intlService.formatDate(monthStart, monthFormat, this.localeId);
             if (span > 0) {
                 slots.push({
                     start: isMainViewType ? daySlots[0].start : weekSlots[0].start,
@@ -1133,10 +1148,11 @@ 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;
@@ -1147,7 +1163,7 @@ 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
                 });
             }
@@ -1155,14 +1171,20 @@ class TimelineBaseViewService {
         }
         return slots;
     }
-}
+};
+TimelineBaseViewService = __decorate([
+    __param(2, Inject(LOCALE_ID)),
+    __metadata("design:paramtypes", [IntlService,
+        MappingService, String])
+], TimelineBaseViewService);
 
 /**
  * @hidden
  */
 class TimelineDayViewService extends TimelineBaseViewService {
-    constructor(intlService, mapper) {
-        super(intlService, mapper);
+    constructor(intlService, mapper, localeId) {
+        super(intlService, mapper, localeId);
+        this.localeId = localeId;
     }
     /**
      * Gets a date an hour before the first task start with minutes, seconds, milliseconds cleared.
@@ -1196,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);
         }
@@ -1208,18 +1230,22 @@ class TimelineDayViewService extends TimelineBaseViewService {
         return slots;
     }
 }
-TimelineDayViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineDayViewService, deps: [{ token: i1.IntlService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
+TimelineDayViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineDayViewService, deps: [{ token: i1.IntlService }, { token: MappingService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
 TimelineDayViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineDayViewService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineDayViewService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: MappingService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: MappingService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }]; } });
 
 /**
  * @hidden
  */
 class TimelineMonthViewService extends TimelineBaseViewService {
-    constructor(intlService, mapper) {
-        super(intlService, mapper);
+    constructor(intlService, mapper, localeId) {
+        super(intlService, mapper, localeId);
+        this.localeId = localeId;
     }
     /**
      * Gets a week before the first week in which a task starts.
@@ -1257,24 +1283,28 @@ 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;
     }
 }
-TimelineMonthViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineMonthViewService, deps: [{ token: i1.IntlService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
+TimelineMonthViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineMonthViewService, deps: [{ token: i1.IntlService }, { token: MappingService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
 TimelineMonthViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineMonthViewService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineMonthViewService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: MappingService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: MappingService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }]; } });
 
 /**
  * @hidden
  */
 class TimelineWeekViewService extends TimelineBaseViewService {
-    constructor(intlService, mapper) {
-        super(intlService, mapper);
+    constructor(intlService, mapper, localeId) {
+        super(intlService, mapper, localeId);
+        this.localeId = localeId;
     }
     /**
      * Gets a date a day before the first task start with hours, minutes, seconds, milliseconds cleared.
@@ -1308,24 +1338,28 @@ 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;
     }
 }
-TimelineWeekViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineWeekViewService, deps: [{ token: i1.IntlService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
+TimelineWeekViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineWeekViewService, deps: [{ token: i1.IntlService }, { token: MappingService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
 TimelineWeekViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineWeekViewService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimelineWeekViewService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: MappingService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: MappingService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }]; } });
 
 /**
  * @hidden
  */
 class TimeLineYearViewService extends TimelineBaseViewService {
-    constructor(intlService, mapper) {
-        super(intlService, mapper);
+    constructor(intlService, mapper, localeId) {
+        super(intlService, mapper, localeId);
+        this.localeId = localeId;
     }
     getTableWidth(tasks) {
         const timeSlots = this.getSlots(tasks)[1];
@@ -1354,17 +1388,20 @@ 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;
     }
 }
-TimeLineYearViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimeLineYearViewService, deps: [{ token: i1.IntlService }, { token: MappingService }], target: i0.ɵɵFactoryTarget.Injectable });
+TimeLineYearViewService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimeLineYearViewService, deps: [{ token: i1.IntlService }, { token: MappingService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
 TimeLineYearViewService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimeLineYearViewService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TimeLineYearViewService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: MappingService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.IntlService }, { type: MappingService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }]; } });
 
 /**
  * @hidden
@@ -3869,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: [{
@@ -3881,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
             }] } });
 
 /**
@@ -5283,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();
         }));
@@ -7834,7 +7879,8 @@ const IMPORTED_MODULES = [
     TabStripModule,
     GridModule,
     DropDownsModule,
-    IconsModule
+    IconsModule,
+    IntlModule
 ];
 const DECLARATIONS = [
     GanttComponent,
@@ -7969,7 +8015,8 @@ GanttModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         TabStripModule,
         GridModule,
         DropDownsModule,
-        IconsModule], exports: [GanttComponent,
+        IconsModule,
+        IntlModule], exports: [GanttComponent,
         GanttFlatBindingDirective,
         GanttHierarchyBindingDirective,
         GanttTaskComponent,

package/gantt.module.d.ts

@@ -58,6 +58,7 @@ import * as i52 from "@progress/kendo-angular-popup";
 import * as i53 from "@progress/kendo-angular-grid";
 import * as i54 from "@progress/kendo-angular-dropdowns";
 import * as i55 from "@progress/kendo-angular-icons";
+import * as i56 from "@progress/kendo-angular-intl";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Gantt component.
@@ -91,6 +92,6 @@ import * as i55 from "@progress/kendo-angular-icons";
  */
 export declare class GanttModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<GanttModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<GanttModule, [typeof i1.GanttComponent, typeof i2.GanttFlatBindingDirective, typeof i3.GanttHierarchyBindingDirective, typeof i4.GanttTaskComponent, typeof i5.GanttSummaryTaskComponent, typeof i6.GanttMilestoneTaskComponent, typeof i7.GanttTimelineComponent, typeof i8.GanttTasksTableBodyComponent, typeof i9.GanttHeaderTableBodyComponent, typeof i10.GanttTaskContentTemplateDirective, typeof i11.GanttTaskTemplateDirective, typeof i12.GanttSummaryTaskTemplateDirective, typeof i13.ToolbarTemplateDirective, typeof i14.ToolbarComponent, typeof i15.ViewSelectorComponent, typeof i16.GanttColumnComponent, typeof i17.GanttColumnGroupComponent, typeof i18.GanttSpanColumnComponent, typeof i19.FilterMenuTemplateDirective, typeof i20.FilterCellTemplateDirective, typeof i21.CellTemplateDirective, typeof i22.EditTemplateDirective, typeof i23.ColumnMenuTemplateDirective, typeof i24.HeaderTemplateDirective, typeof i25.FooterTemplateDirective, typeof i26.GanttExpandableDirective, typeof i27.GanttDependencyDirective, typeof i28.DependencyDragCreateDirective, typeof i29.TimelineDayViewComponent, typeof i30.TimelineWeekViewComponent, typeof i31.TimelineMonthViewComponent, typeof i32.TimelineYearViewComponent, typeof i33.SelectableDirective, typeof i34.EditDialogComponent, typeof i35.CustomMessagesComponent, typeof i36.LocalizedMessagesDirective, typeof i37.GanttAddTaskComponent, typeof i38.DragValidationTooltipComponent, typeof i39.TimelineScrollableDirective, typeof i40.DependenciesTableComponent, typeof i41.TaskFieldsComponent], [typeof i42.CommonModule, typeof i43.ReactiveFormsModule, typeof i44.LabelModule, typeof i45.InputsModule, typeof i46.DateInputsModule, typeof i47.ButtonsModule, typeof i48.SplitterModule, typeof i49.TreeListModule, typeof i47.ButtonsModule, typeof i50.DialogModule, typeof i51.EventsModule, typeof i52.PopupModule, typeof i51.DraggableModule, typeof i48.TabStripModule, typeof i53.GridModule, typeof i54.DropDownsModule, typeof i55.IconsModule], [typeof i1.GanttComponent, typeof i2.GanttFlatBindingDirective, typeof i3.GanttHierarchyBindingDirective, typeof i4.GanttTaskComponent, typeof i5.GanttSummaryTaskComponent, typeof i6.GanttMilestoneTaskComponent, typeof i7.GanttTimelineComponent, typeof i8.GanttTasksTableBodyComponent, typeof i9.GanttHeaderTableBodyComponent, typeof i10.GanttTaskContentTemplateDirective, typeof i11.GanttTaskTemplateDirective, typeof i12.GanttSummaryTaskTemplateDirective, typeof i13.ToolbarTemplateDirective, typeof i14.ToolbarComponent, typeof i15.ViewSelectorComponent, typeof i16.GanttColumnComponent, typeof i17.GanttColumnGroupComponent, typeof i18.GanttSpanColumnComponent, typeof i19.FilterMenuTemplateDirective, typeof i20.FilterCellTemplateDirective, typeof i21.CellTemplateDirective, typeof i22.EditTemplateDirective, typeof i23.ColumnMenuTemplateDirective, typeof i24.HeaderTemplateDirective, typeof i25.FooterTemplateDirective, typeof i26.GanttExpandableDirective, typeof i27.GanttDependencyDirective, typeof i28.DependencyDragCreateDirective, typeof i29.TimelineDayViewComponent, typeof i30.TimelineWeekViewComponent, typeof i31.TimelineMonthViewComponent, typeof i32.TimelineYearViewComponent, typeof i33.SelectableDirective, typeof i34.EditDialogComponent, typeof i35.CustomMessagesComponent, typeof i36.LocalizedMessagesDirective, typeof i37.GanttAddTaskComponent, typeof i38.DragValidationTooltipComponent, typeof i39.TimelineScrollableDirective, typeof i40.DependenciesTableComponent, typeof i41.TaskFieldsComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<GanttModule, [typeof i1.GanttComponent, typeof i2.GanttFlatBindingDirective, typeof i3.GanttHierarchyBindingDirective, typeof i4.GanttTaskComponent, typeof i5.GanttSummaryTaskComponent, typeof i6.GanttMilestoneTaskComponent, typeof i7.GanttTimelineComponent, typeof i8.GanttTasksTableBodyComponent, typeof i9.GanttHeaderTableBodyComponent, typeof i10.GanttTaskContentTemplateDirective, typeof i11.GanttTaskTemplateDirective, typeof i12.GanttSummaryTaskTemplateDirective, typeof i13.ToolbarTemplateDirective, typeof i14.ToolbarComponent, typeof i15.ViewSelectorComponent, typeof i16.GanttColumnComponent, typeof i17.GanttColumnGroupComponent, typeof i18.GanttSpanColumnComponent, typeof i19.FilterMenuTemplateDirective, typeof i20.FilterCellTemplateDirective, typeof i21.CellTemplateDirective, typeof i22.EditTemplateDirective, typeof i23.ColumnMenuTemplateDirective, typeof i24.HeaderTemplateDirective, typeof i25.FooterTemplateDirective, typeof i26.GanttExpandableDirective, typeof i27.GanttDependencyDirective, typeof i28.DependencyDragCreateDirective, typeof i29.TimelineDayViewComponent, typeof i30.TimelineWeekViewComponent, typeof i31.TimelineMonthViewComponent, typeof i32.TimelineYearViewComponent, typeof i33.SelectableDirective, typeof i34.EditDialogComponent, typeof i35.CustomMessagesComponent, typeof i36.LocalizedMessagesDirective, typeof i37.GanttAddTaskComponent, typeof i38.DragValidationTooltipComponent, typeof i39.TimelineScrollableDirective, typeof i40.DependenciesTableComponent, typeof i41.TaskFieldsComponent], [typeof i42.CommonModule, typeof i43.ReactiveFormsModule, typeof i44.LabelModule, typeof i45.InputsModule, typeof i46.DateInputsModule, typeof i47.ButtonsModule, typeof i48.SplitterModule, typeof i49.TreeListModule, typeof i47.ButtonsModule, typeof i50.DialogModule, typeof i51.EventsModule, typeof i52.PopupModule, typeof i51.DraggableModule, typeof i48.TabStripModule, typeof i53.GridModule, typeof i54.DropDownsModule, typeof i55.IconsModule, typeof i56.IntlModule], [typeof i1.GanttComponent, typeof i2.GanttFlatBindingDirective, typeof i3.GanttHierarchyBindingDirective, typeof i4.GanttTaskComponent, typeof i5.GanttSummaryTaskComponent, typeof i6.GanttMilestoneTaskComponent, typeof i7.GanttTimelineComponent, typeof i8.GanttTasksTableBodyComponent, typeof i9.GanttHeaderTableBodyComponent, typeof i10.GanttTaskContentTemplateDirective, typeof i11.GanttTaskTemplateDirective, typeof i12.GanttSummaryTaskTemplateDirective, typeof i13.ToolbarTemplateDirective, typeof i14.ToolbarComponent, typeof i15.ViewSelectorComponent, typeof i16.GanttColumnComponent, typeof i17.GanttColumnGroupComponent, typeof i18.GanttSpanColumnComponent, typeof i19.FilterMenuTemplateDirective, typeof i20.FilterCellTemplateDirective, typeof i21.CellTemplateDirective, typeof i22.EditTemplateDirective, typeof i23.ColumnMenuTemplateDirective, typeof i24.HeaderTemplateDirective, typeof i25.FooterTemplateDirective, typeof i26.GanttExpandableDirective, typeof i27.GanttDependencyDirective, typeof i28.DependencyDragCreateDirective, typeof i29.TimelineDayViewComponent, typeof i30.TimelineWeekViewComponent, typeof i31.TimelineMonthViewComponent, typeof i32.TimelineYearViewComponent, typeof i33.SelectableDirective, typeof i34.EditDialogComponent, typeof i35.CustomMessagesComponent, typeof i36.LocalizedMessagesDirective, typeof i37.GanttAddTaskComponent, typeof i38.DragValidationTooltipComponent, typeof i39.TimelineScrollableDirective, typeof i40.DependenciesTableComponent, typeof i41.TaskFieldsComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<GanttModule>;
 }

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.1",
+  "version": "13.2.0-develop.3",
   "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.1",
-    "@progress/kendo-angular-common": "13.2.0-develop.1",
-    "@progress/kendo-angular-dialog": "13.2.0-develop.1",
-    "@progress/kendo-angular-dropdowns": "13.2.0-develop.1",
-    "@progress/kendo-angular-grid": "13.2.0-develop.1",
-    "@progress/kendo-angular-icons": "13.2.0-develop.1",
-    "@progress/kendo-angular-intl": "13.2.0-develop.1",
-    "@progress/kendo-angular-l10n": "13.2.0-develop.1",
-    "@progress/kendo-angular-layout": "13.2.0-develop.1",
-    "@progress/kendo-angular-popup": "13.2.0-develop.1",
-    "@progress/kendo-angular-treelist": "13.2.0-develop.1",
+    "@progress/kendo-angular-buttons": "13.2.0-develop.3",
+    "@progress/kendo-angular-common": "13.2.0-develop.3",
+    "@progress/kendo-angular-dialog": "13.2.0-develop.3",
+    "@progress/kendo-angular-dropdowns": "13.2.0-develop.3",
+    "@progress/kendo-angular-grid": "13.2.0-develop.3",
+    "@progress/kendo-angular-icons": "13.2.0-develop.3",
+    "@progress/kendo-angular-intl": "13.2.0-develop.3",
+    "@progress/kendo-angular-l10n": "13.2.0-develop.3",
+    "@progress/kendo-angular-layout": "13.2.0-develop.3",
+    "@progress/kendo-angular-popup": "13.2.0-develop.3",
+    "@progress/kendo-angular-treelist": "13.2.0-develop.3",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "13.2.0-develop.1",
+    "@progress/kendo-angular-schematics": "13.2.0-develop.3",
     "@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.1',
-            '@progress/kendo-angular-dropdowns': '13.2.0-develop.1',
-            '@progress/kendo-angular-excel-export': '13.2.0-develop.1',
-            '@progress/kendo-angular-inputs': '13.2.0-develop.1',
-            '@progress/kendo-angular-l10n': '13.2.0-develop.1',
-            '@progress/kendo-angular-label': '13.2.0-develop.1',
-            '@progress/kendo-angular-pdf-export': '13.2.0-develop.1',
-            '@progress/kendo-angular-popup': '13.2.0-develop.1',
-            '@progress/kendo-angular-utils': '13.2.0-develop.1',
+            '@progress/kendo-angular-dateinputs': '13.2.0-develop.3',
+            '@progress/kendo-angular-dropdowns': '13.2.0-develop.3',
+            '@progress/kendo-angular-excel-export': '13.2.0-develop.3',
+            '@progress/kendo-angular-inputs': '13.2.0-develop.3',
+            '@progress/kendo-angular-l10n': '13.2.0-develop.3',
+            '@progress/kendo-angular-label': '13.2.0-develop.3',
+            '@progress/kendo-angular-pdf-export': '13.2.0-develop.3',
+            '@progress/kendo-angular-popup': '13.2.0-develop.3',
+            '@progress/kendo-angular-utils': '13.2.0-develop.3',
             '@progress/kendo-drawing': '^1.0.0',
             // peer dep of the dropdowns
-            '@progress/kendo-angular-treeview': '13.2.0-develop.1',
+            '@progress/kendo-angular-treeview': '13.2.0-develop.3',
             // peer dep of the layout
-            '@progress/kendo-angular-progressbar': '13.2.0-develop.1',
+            '@progress/kendo-angular-progressbar': '13.2.0-develop.3',
             // 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,15 +19,20 @@ export declare const HOUR_FORMAT = "HH:mm aa";
  * @hidden
  */
 export declare const MONTH_FORMAT = "MMM";
+/**
+ * @hidden
+ */
+export declare const YEAR_FORMAT = "yyyy";
 /**
  * @hidden
  */
 export declare abstract class TimelineBaseViewService {
     protected intlService: IntlService;
     protected mapper: MappingService;
+    localeId: string;
     options: TimelineOptions;
     private _viewStart;
-    constructor(intlService: IntlService, mapper: MappingService);
+    constructor(intlService: IntlService, mapper: MappingService, localeId: string);
     get viewStart(): number;
     /**
      *
@@ -64,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/timeline-day-view.service.d.ts

@@ -11,7 +11,8 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export declare class TimelineDayViewService extends TimelineBaseViewService {
-    constructor(intlService: IntlService, mapper: MappingService);
+    localeId: string;
+    constructor(intlService: IntlService, mapper: MappingService, localeId: string);
     /**
      * Gets a date an hour before the first task start with minutes, seconds, milliseconds cleared.
      */

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

@@ -11,7 +11,8 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export declare class TimelineMonthViewService extends TimelineBaseViewService {
-    constructor(intlService: IntlService, mapper: MappingService);
+    localeId: string;
+    constructor(intlService: IntlService, mapper: MappingService, localeId: string);
     /**
      * Gets a week before the first week in which a task starts.
      */

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

@@ -11,7 +11,8 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export declare class TimelineWeekViewService extends TimelineBaseViewService {
-    constructor(intlService: IntlService, mapper: MappingService);
+    localeId: string;
+    constructor(intlService: IntlService, mapper: MappingService, localeId: string);
     /**
      * Gets a date a day before the first task start with hours, minutes, seconds, milliseconds cleared.
      */

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

@@ -11,7 +11,8 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export declare class TimeLineYearViewService extends TimelineBaseViewService {
-    constructor(intlService: IntlService, mapper: MappingService);
+    localeId: string;
+    constructor(intlService: IntlService, mapper: MappingService, localeId: string);
     getTableWidth(tasks: any[]): number;
     getStartOffset(rangeStart: Date): Date;
     /**