@worktile/gantt 18.0.5 → 18.1.0-next.1

package/fesm2022/worktile-gantt.mjs

@@ -2,13 +2,15 @@ import * as i1 from '@angular/cdk/drag-drop';
 import { CdkDrag, CdkDropList, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i1$1 from '@angular/cdk/scrolling';
 import { CdkScrollable, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
-import { isPlatformServer, NgIf, NgTemplateOutlet, NgFor, NgStyle, NgClass, DOCUMENT, CommonModule } from '@angular/common';
+import { isPlatformServer, NgIf, NgTemplateOutlet, NgStyle, NgFor, NgClass, DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, Directive, Inject, Input, Output, ContentChild, HostBinding, Injectable, signal, PLATFORM_ID, effect, Component, ViewChild, ViewChildren, Pipe, ElementRef, Optional, HostListener, forwardRef, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injectable, Inject, EventEmitter, Directive, Input, Output, ContentChild, HostBinding, signal, PLATFORM_ID, effect, Component, ViewChild, ViewChildren, Pipe, ElementRef, Optional, HostListener, forwardRef, ChangeDetectionStrategy, ContentChildren, NgModule } from '@angular/core';
 import { fromUnixTime, getWeek, getDaysInMonth, differenceInCalendarDays, setDate, addSeconds, addMinutes, addHours, addDays, addWeeks, addMonths, addQuarters, addYears, startOfMinute, startOfHour, startOfDay, startOfWeek, startOfMonth, startOfQuarter, startOfYear, endOfMinute, endOfHour, endOfDay, endOfWeek, endOfMonth, endOfQuarter, endOfYear, getUnixTime, format, isWeekend, isToday, differenceInHours, differenceInMinutes, differenceInDays, differenceInCalendarQuarters, eachMonthOfInterval, eachYearOfInterval, eachWeekOfInterval, eachDayOfInterval, differenceInCalendarYears, eachHourOfInterval, setDefaultOptions } from 'date-fns';
 export { addDays, addHours, addMinutes, addMonths, addQuarters, addSeconds, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarQuarters, differenceInDays, differenceInMinutes, eachDayOfInterval, eachHourOfInterval, eachMonthOfInterval, eachWeekOfInterval, endOfDay, endOfHour, endOfMinute, endOfMonth, endOfQuarter, endOfWeek, endOfYear, format, fromUnixTime, getDaysInMonth, getUnixTime, getWeek, isToday, isWeekend, setDate, startOfDay, startOfHour, startOfMinute, startOfMonth, startOfQuarter, startOfWeek, startOfYear } from 'date-fns';
 import { BehaviorSubject, Subject, from, fromEvent, merge, Observable, EMPTY, interval, animationFrameScheduler, take as take$1, takeUntil as takeUntil$1, combineLatest, startWith as startWith$1, auditTime as auditTime$1, filter } from 'rxjs';
 import { take, takeUntil, skip, map, pairwise, auditTime, startWith, switchMap, debounceTime, finalize } from 'rxjs/operators';
+import { TZDate } from '@date-fns/tz';
+import { de, ru } from 'date-fns/locale';
 import { SelectionModel } from '@angular/cdk/collections';
 import { coerceBooleanProperty, coerceCssPixelValue } from '@angular/cdk/coercion';
 import { __decorate, __param } from 'tslib';
@@ -51,6 +53,13 @@ class GanttTableDragEnterPredicateContext {
 class GanttVirtualScrolledIndexChangeEvent {
 }
 
+let timeZone;
+function setDefaultTimeZone(zone) {
+    timeZone = zone ?? undefined;
+}
+function getDefaultTimeZone() {
+    return timeZone;
+}
 class GanttDate {
     constructor(date) {
         if (date) {
@@ -59,10 +68,10 @@ class GanttDate {
             }
             else if (typeof date === 'string' || typeof date === 'number') {
                 if (date.toString().length < 13) {
-                    this.value = fromUnixTime(+date);
+                    this.value = new TZDate(fromUnixTime(+date), timeZone);
                 }
                 else {
-                    this.value = new Date(date);
+                    this.value = new TZDate(date, timeZone);
                 }
             }
             else {
@@ -71,7 +80,7 @@ class GanttDate {
             }
         }
         else {
-            this.value = new Date();
+            this.value = new TZDate(new Date(), timeZone);
         }
     }
     getYear() {
@@ -348,28 +357,6 @@ var GanttViewType;
     GanttViewType["week"] = "week";
     GanttViewType["hour"] = "hour";
 })(GanttViewType || (GanttViewType = {}));
-const ganttViews = [
-    {
-        name: '日',
-        value: GanttViewType.day
-    },
-    {
-        name: '周',
-        value: GanttViewType.week
-    },
-    {
-        name: '月',
-        value: GanttViewType.month
-    },
-    {
-        name: '季',
-        value: GanttViewType.quarter
-    },
-    {
-        name: '年',
-        value: GanttViewType.year
-    }
-];
 
 class GanttBaselineItemInternal {
     get refs() {
@@ -387,36 +374,11 @@ class GanttBaselineItemInternal {
     }
 }
 
-const defaultConfig = {
-    dateFormat: {
-        hour: 'HH:mm',
-        day: 'M月d日',
-        week: '第w周',
-        month: 'M月',
-        quarter: 'QQQ',
-        year: 'yyyy年',
-        yearMonth: 'yyyy年MM月',
-        yearQuarter: 'yyyy年QQQ'
-    },
-    linkOptions: {
-        dependencyTypes: [GanttLinkType.fs],
-        showArrow: false,
-        lineType: GanttLinkLineType.curve
-    },
-    styleOptions: {
-        headerHeight: 44,
-        lineHeight: 44,
-        barHeight: 22
-    }
-};
-const GANTT_GLOBAL_CONFIG = new InjectionToken('GANTT_GLOBAL_CONFIG');
-
 const primaryDatePointTop = '40%';
 const secondaryDatePointTop = '80%';
 const viewOptions$6 = {
     min: new GanttDate().addYears(-1).startOfYear(),
     max: new GanttDate().addYears(1).endOfYear(),
-    dateFormat: defaultConfig.dateFormat,
     datePrecisionUnit: 'day',
     dragPreviewDateFormat: 'MM-dd'
 };
@@ -429,6 +391,7 @@ class GanttView {
     }
     constructor(start, end, options) {
         this.showTimeline = true;
+        this.dateFormats = {};
         this.options = Object.assign({}, viewOptions$6, options);
         const startDate = start.isCustom
             ? this.viewStartOf(start.date)
@@ -585,12 +548,317 @@ class GanttView {
     }
 }
 
+var GanttI18nLocale;
+(function (GanttI18nLocale) {
+    GanttI18nLocale["zhHans"] = "zh-hans";
+    GanttI18nLocale["zhHant"] = "zh-hant";
+    GanttI18nLocale["enUs"] = "en-us";
+    GanttI18nLocale["deDe"] = "de-de";
+    GanttI18nLocale["jaJp"] = "ja-jp";
+    GanttI18nLocale["ruRu"] = "ru-ru";
+})(GanttI18nLocale || (GanttI18nLocale = {}));
+const GANTT_I18N_LOCALE_TOKEN = new InjectionToken('gantt-i18n-locale');
+
+var zhHans = {
+    id: GanttI18nLocale.zhHans,
+    views: {
+        [GanttViewType.hour]: {
+            label: '小时',
+            dateFormats: {
+                primary: 'M月d日',
+                secondary: 'HH:mm'
+            }
+        },
+        [GanttViewType.day]: {
+            label: '天',
+            dateFormats: {
+                primary: 'yyyy年MM月',
+                secondary: 'd'
+            }
+        },
+        [GanttViewType.week]: {
+            label: '周',
+            dateFormats: {
+                primary: 'yyyy年',
+                secondary: '第w周'
+            }
+        },
+        [GanttViewType.month]: {
+            label: '月',
+            dateFormats: {
+                primary: `yyyy年'Q'Q`,
+                secondary: 'M月'
+            }
+        },
+        [GanttViewType.quarter]: {
+            label: '季',
+            dateFormats: {
+                primary: 'yyyy年',
+                secondary: `yyyy年'Q'Q`
+            }
+        },
+        [GanttViewType.year]: {
+            label: '年',
+            dateFormats: {
+                secondary: 'yyyy年'
+            }
+        }
+    }
+};
+
+var zhHant = {
+    id: GanttI18nLocale.zhHant,
+    views: {
+        [GanttViewType.hour]: {
+            label: '小時',
+            dateFormats: {
+                primary: 'M月d日',
+                secondary: 'HH:mm'
+            }
+        },
+        [GanttViewType.day]: {
+            label: '天',
+            dateFormats: {
+                primary: 'yyyy年MM月',
+                secondary: 'd'
+            }
+        },
+        [GanttViewType.week]: {
+            label: '週',
+            dateFormats: {
+                primary: 'yyyy年',
+                secondary: '第w週'
+            }
+        },
+        [GanttViewType.month]: {
+            label: '月',
+            dateFormats: {
+                primary: `yyyy年'Q'Q`,
+                secondary: 'M月'
+            }
+        },
+        [GanttViewType.quarter]: {
+            label: '季',
+            dateFormats: {
+                primary: 'yyyy年',
+                secondary: `yyyy年'Q'Q`
+            }
+        },
+        [GanttViewType.year]: {
+            label: '年',
+            dateFormats: {
+                secondary: 'yyyy年'
+            }
+        }
+    }
+};
+
+var enUsLocale = {
+    id: GanttI18nLocale.enUs,
+    views: {
+        [GanttViewType.hour]: {
+            label: 'Hourly',
+            dateFormats: {
+                primary: 'MMM d',
+                secondary: 'HH:mm'
+            }
+        },
+        [GanttViewType.day]: {
+            label: 'Daily',
+            dateFormats: {
+                primary: 'MMM yyyy',
+                secondary: 'd'
+            }
+        },
+        [GanttViewType.week]: {
+            label: 'Weekly',
+            dateFormats: {
+                primary: 'yyyy',
+                secondary: 'wo'
+            }
+        },
+        [GanttViewType.month]: {
+            label: 'Monthly',
+            dateFormats: {
+                primary: "yyyy 'Q'Q",
+                secondary: 'MMM'
+            }
+        },
+        [GanttViewType.quarter]: {
+            label: 'Quarterly',
+            dateFormats: {
+                primary: 'yyyy',
+                secondary: "yyyy 'Q'Q"
+            }
+        },
+        [GanttViewType.year]: {
+            label: 'Yearly',
+            dateFormats: {
+                secondary: 'yyyy'
+            }
+        }
+    }
+};
+
+var jaJpLocale = {
+    id: GanttI18nLocale.jaJp,
+    views: {
+        [GanttViewType.hour]: {
+            label: '毎時',
+            dateFormats: {
+                primary: 'M月d日',
+                secondary: 'HH:mm'
+            }
+        },
+        [GanttViewType.day]: {
+            label: '日',
+            dateFormats: {
+                primary: 'yyyy年M月d日',
+                secondary: 'd'
+            }
+        },
+        [GanttViewType.week]: {
+            label: '週',
+            dateFormats: {
+                primary: 'yyyy年',
+                secondary: '第w週'
+            }
+        },
+        [GanttViewType.month]: {
+            label: '月',
+            dateFormats: {
+                primary: `yyyy年M月`,
+                secondary: 'M月'
+            }
+        },
+        [GanttViewType.quarter]: {
+            label: '四半期',
+            dateFormats: {
+                primary: 'yyyy年',
+                secondary: `yyyy年第Q四半期`
+            }
+        },
+        [GanttViewType.year]: {
+            label: '年',
+            dateFormats: {
+                secondary: 'yyyy年'
+            }
+        }
+    }
+};
+
+var deDeLocale = {
+    id: GanttI18nLocale.deDe,
+    dateLocale: de,
+    views: {
+        [GanttViewType.hour]: {
+            label: 'Stündlich',
+            dateFormats: {
+                primary: 'dd. MMM',
+                secondary: 'HH:mm'
+            }
+        },
+        [GanttViewType.day]: {
+            label: 'Täglich',
+            dateFormats: {
+                primary: 'MMM yyyy',
+                secondary: 'd'
+            }
+        },
+        [GanttViewType.week]: {
+            label: 'Wöchentlich',
+            dateFormats: {
+                primary: 'yyyy',
+                secondary: `w. 'Woche'`
+            }
+        },
+        [GanttViewType.month]: {
+            label: 'Monatlich',
+            dateFormats: {
+                primary: 'MMM yyyy',
+                secondary: 'MMM'
+            }
+        },
+        [GanttViewType.quarter]: {
+            label: 'Vierteljährlich',
+            dateFormats: {
+                primary: 'yyyy',
+                secondary: `Q. 'Quartal' yyyy`
+            }
+        },
+        [GanttViewType.year]: {
+            label: 'Jährlich',
+            dateFormats: {
+                secondary: 'yyyy'
+            }
+        }
+    }
+};
+
+var ruRuLocale = {
+    id: GanttI18nLocale.ruRu,
+    dateLocale: ru,
+    views: {
+        [GanttViewType.hour]: {
+            label: 'Ежечасно',
+            dateFormats: {
+                primary: 'd MMM',
+                secondary: 'HH:mm'
+            }
+        },
+        [GanttViewType.day]: {
+            label: 'Ежедневно',
+            dateFormats: {
+                primary: 'MMMM yyyy',
+                secondary: 'd'
+            }
+        },
+        [GanttViewType.week]: {
+            label: 'Еженедельно',
+            dateFormats: {
+                primary: 'yyyy',
+                secondary: 'Неделя w'
+            }
+        },
+        [GanttViewType.month]: {
+            label: 'Ежемесячно',
+            dateFormats: {
+                primary: 'MMMM yyyy',
+                secondary: 'MMM'
+            }
+        },
+        [GanttViewType.quarter]: {
+            label: 'Ежеквартально',
+            dateFormats: {
+                primary: 'yyyy',
+                secondary: 'Квартал Q yyyy'
+            }
+        },
+        [GanttViewType.year]: {
+            label: 'Ежегодно',
+            dateFormats: {
+                secondary: 'yyyy'
+            }
+        }
+    }
+};
+
+const i18nLocaleProvides = [
+    { provide: GANTT_I18N_LOCALE_TOKEN, useValue: zhHans, multi: true },
+    { provide: GANTT_I18N_LOCALE_TOKEN, useValue: zhHant, multi: true },
+    { provide: GANTT_I18N_LOCALE_TOKEN, useValue: enUsLocale, multi: true },
+    { provide: GANTT_I18N_LOCALE_TOKEN, useValue: jaJpLocale, multi: true },
+    { provide: GANTT_I18N_LOCALE_TOKEN, useValue: deDeLocale, multi: true },
+    { provide: GANTT_I18N_LOCALE_TOKEN, useValue: ruRuLocale, multi: true }
+];
+
 const viewOptions$5 = {
     start: new GanttDate().startOfQuarter().addQuarters(-1),
     end: new GanttDate().endOfQuarter().addQuarters(2),
     cellWidth: 280,
     addAmount: 1,
-    addUnit: 'quarter'
+    addUnit: 'quarter',
+    dateDisplayFormats: zhHant.views.month.dateFormats
 };
 class GanttViewMonth extends GanttView {
     constructor(start, end, options) {
@@ -614,7 +882,7 @@ class GanttViewMonth extends GanttView {
         const points = [];
         for (let i = 0; i < quarters; i++) {
             const start = this.start.addQuarters(i);
-            const point = new GanttDatePoint(start, start.format(this.options.dateFormat.yearQuarter), (this.getCellWidth() * 3) / 2 + i * (this.getCellWidth() * 3), primaryDatePointTop);
+            const point = new GanttDatePoint(start, start.format(this.options.dateFormat?.yearQuarter || this.options.dateDisplayFormats.primary), (this.getCellWidth() * 3) / 2 + i * (this.getCellWidth() * 3), primaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -624,7 +892,7 @@ class GanttViewMonth extends GanttView {
         const points = [];
         for (let i = 0; i < months.length; i++) {
             const start = new GanttDate(months[i]);
-            const point = new GanttDatePoint(start, start.format(this.options.dateFormat.month), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
+            const point = new GanttDatePoint(start, start.format(this.options.dateFormat?.month || this.options.dateDisplayFormats.secondary), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -638,7 +906,8 @@ const viewOptions$4 = {
     max: new GanttDate().addYears(2).endOfYear(),
     cellWidth: 500,
     addAmount: 1,
-    addUnit: 'year'
+    addUnit: 'year',
+    dateDisplayFormats: zhHant.views.quarter.dateFormats
 };
 class GanttViewQuarter extends GanttView {
     constructor(start, end, options) {
@@ -662,7 +931,7 @@ class GanttViewQuarter extends GanttView {
         const points = [];
         for (let i = 0; i < years.length; i++) {
             const start = new GanttDate(years[i]);
-            const point = new GanttDatePoint(start, `${start.format(this.options.dateFormat.year)}`, (this.getCellWidth() * 4) / 2 + i * (this.getCellWidth() * 4), primaryDatePointTop);
+            const point = new GanttDatePoint(start, `${start.format(this.options.dateFormat?.year || this.options.dateDisplayFormats.primary)}`, (this.getCellWidth() * 4) / 2 + i * (this.getCellWidth() * 4), primaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -672,7 +941,7 @@ class GanttViewQuarter extends GanttView {
         const points = [];
         for (let i = 0; i <= quarters; i++) {
             const start = this.start.addQuarters(i);
-            const point = new GanttDatePoint(start, start.format(this.options.dateFormat.quarter), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
+            const point = new GanttDatePoint(start, start.format(this.options.dateFormat?.quarter || this.options.dateDisplayFormats.secondary), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -684,7 +953,8 @@ const viewOptions$3 = {
     start: new GanttDate().startOfYear().startOfWeek(),
     end: new GanttDate().endOfYear().endOfWeek(),
     addAmount: 1,
-    addUnit: 'month'
+    addUnit: 'month',
+    dateDisplayFormats: zhHant.views.day.dateFormats
 };
 class GanttViewDay extends GanttView {
     constructor(start, end, options) {
@@ -711,7 +981,7 @@ class GanttViewDay extends GanttView {
         for (let i = 0; i < weeks.length; i++) {
             const weekStart = new GanttDate(weeks[i]);
             const increaseWeek = weekStart.getDaysInMonth() - weekStart.getDate() >= 3 ? 0 : 1;
-            const point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format(this.options.dateFormat.yearMonth), (this.getCellWidth() * 7) / 2 + i * (this.getCellWidth() * 7), primaryDatePointTop);
+            const point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format(this.options.dateFormat?.yearMonth || this.options.dateDisplayFormats.primary), (this.getCellWidth() * 7) / 2 + i * (this.getCellWidth() * 7), primaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -721,7 +991,7 @@ class GanttViewDay extends GanttView {
         const points = [];
         for (let i = 0; i < days.length; i++) {
             const start = new GanttDate(days[i]);
-            const point = new GanttDatePoint(start, start.getDate().toString(), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop, {
+            const point = new GanttDatePoint(start, start.format(this.options.dateDisplayFormats.secondary) || start.getDate().toString(), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop, {
                 isWeekend: start.isWeekend(),
                 isToday: start.isToday()
             });
@@ -736,7 +1006,8 @@ const viewOptions$2 = {
     start: new GanttDate().startOfYear().startOfWeek(),
     end: new GanttDate().endOfYear().endOfWeek(),
     addAmount: 1,
-    addUnit: 'month'
+    addUnit: 'month',
+    dateDisplayFormats: zhHant.views.week.dateFormats
 };
 class GanttViewWeek extends GanttView {
     constructor(start, end, options) {
@@ -761,7 +1032,7 @@ class GanttViewWeek extends GanttView {
         for (let i = 0; i < weeks.length; i++) {
             const weekStart = new GanttDate(weeks[i]);
             const increaseWeek = weekStart.getDaysInMonth() - weekStart.getDate() >= 3 ? 0 : 1;
-            const point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format(this.options.dateFormat.year), this.getCellWidth() / 2 + i * this.getCellWidth(), primaryDatePointTop);
+            const point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format(this.options.dateFormat?.year || this.options.dateDisplayFormats.primary), this.getCellWidth() / 2 + i * this.getCellWidth(), primaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -771,7 +1042,7 @@ class GanttViewWeek extends GanttView {
         const points = [];
         for (let i = 0; i < weeks.length; i++) {
             const start = new GanttDate(weeks[i]);
-            const point = new GanttDatePoint(start, `${start.format(this.options.dateFormat.week)}`, i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
+            const point = new GanttDatePoint(start, `${start.format(this.options.dateFormat?.week || this.options.dateDisplayFormats.secondary)}`, i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -783,7 +1054,8 @@ const viewOptions$1 = {
     start: new GanttDate().addYears(-2).startOfYear(),
     end: new GanttDate().addYears(2).endOfYear(),
     addAmount: 1,
-    addUnit: 'year'
+    addUnit: 'year',
+    dateDisplayFormats: zhHant.views.year.dateFormats
 };
 class GanttViewYear extends GanttView {
     constructor(start, end, options) {
@@ -818,7 +1090,7 @@ class GanttViewYear extends GanttView {
         const pointTop = '60%';
         for (let i = 0; i <= years; i++) {
             const start = this.start.addYears(i);
-            const point = new GanttDatePoint(start, `${start.format(this.options.dateFormat.year)}`, i * this.getCellWidth() + this.getCellWidth() / 2, pointTop);
+            const point = new GanttDatePoint(start, `${start.format(this.options.dateFormat?.year || this.options.dateDisplayFormats.secondary || this.options.dateDisplayFormats.primary)}`, i * this.getCellWidth() + this.getCellWidth() / 2, pointTop);
             points.push(point);
         }
         return points;
@@ -832,6 +1104,7 @@ const viewOptions = {
     datePrecisionUnit: 'minute',
     addAmount: 1,
     addUnit: 'week',
+    dateDisplayFormats: zhHant.views.hour.dateFormats,
     dragPreviewDateFormat: 'HH:mm'
 };
 class GanttViewHour extends GanttView {
@@ -861,7 +1134,7 @@ class GanttViewHour extends GanttView {
         const points = [];
         for (let i = 0; i < days.length; i++) {
             const start = this.start.addDays(i);
-            const point = new GanttDatePoint(start, start.format(this.options.dateFormat.day), (this.getCellWidth() * 24) / 2 + i * (this.getCellWidth() * 24), primaryDatePointTop);
+            const point = new GanttDatePoint(start, start.format(this.options.dateFormat?.day || this.options.dateDisplayFormats.primary), (this.getCellWidth() * 24) / 2 + i * (this.getCellWidth() * 24), primaryDatePointTop);
             points.push(point);
         }
         return points;
@@ -871,7 +1144,7 @@ class GanttViewHour extends GanttView {
         const points = [];
         for (let i = 0; i < hours.length; i++) {
             const start = new GanttDate(hours[i]);
-            const point = new GanttDatePoint(start, start.format(this.options.dateFormat.hour), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop, {
+            const point = new GanttDatePoint(start, start.format(this.options.dateFormat?.hour || this.options.dateDisplayFormats.secondary), i * this.getCellWidth() + this.getCellWidth() / 2, secondaryDatePointTop, {
                 isWeekend: start.isWeekend(),
                 isToday: start.isToday()
             });
@@ -996,12 +1269,73 @@ function keyBy(array, key) {
     return result;
 }
 
+const defaultConfig = {
+    locale: GanttI18nLocale.zhHans,
+    linkOptions: {
+        dependencyTypes: [GanttLinkType.fs],
+        showArrow: false,
+        lineType: GanttLinkLineType.curve
+    },
+    styleOptions: {
+        headerHeight: 44,
+        lineHeight: 44,
+        barHeight: 22
+    },
+    dateOptions: {
+        weekStartsOn: 1
+    }
+};
+const GANTT_GLOBAL_CONFIG = new InjectionToken('GANTT_GLOBAL_CONFIG');
+class GanttConfigService {
+    constructor(globalConfig) {
+        const localeId = globalConfig.locale || defaultConfig.locale;
+        this.config = {
+            locale: localeId,
+            dateFormat: Object.assign({}, defaultConfig.dateFormat, globalConfig.dateFormat),
+            styleOptions: Object.assign({}, defaultConfig.styleOptions, globalConfig.styleOptions),
+            linkOptions: Object.assign({}, defaultConfig.linkOptions, globalConfig.linkOptions),
+            dateOptions: Object.assign({}, defaultConfig.dateOptions, globalConfig.dateOptions)
+        };
+        this.i18nLocales = inject(GANTT_I18N_LOCALE_TOKEN).reduce((result, localeConfig) => {
+            result[localeConfig.id] = localeConfig; // 这里使用 `id` 作为 key
+            return result;
+        }, {
+            ['zh-cn']: zhHans,
+            ['zh-tw']: zhHant
+        });
+        if (this.config.dateOptions?.timeZone) {
+            setDefaultTimeZone(this.config.dateOptions.timeZone);
+        }
+    }
+    setLocale(locale) {
+        this.config.locale = locale;
+    }
+    getLocaleConfig() {
+        return this.i18nLocales[this.config.locale] ?? this.i18nLocales[this.config.locale.toLowerCase()] ?? zhHans;
+    }
+    getViewsLocale() {
+        return this.getLocaleConfig().views;
+    }
+    getDateLocale() {
+        return this.config.dateOptions?.locale ?? this.getLocaleConfig().dateLocale;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttConfigService, deps: [{ token: GANTT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttConfigService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttConfigService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [GANTT_GLOBAL_CONFIG]
+                }] }] });
+
 class GanttUpper {
     set linkOptions(options) {
         this._linkOptions = options;
     }
     get linkOptions() {
-        return Object.assign({}, defaultConfig.linkOptions, this.config.linkOptions, this._linkOptions);
+        return Object.assign({}, this.configService.config.linkOptions, this._linkOptions);
     }
     set selectable(value) {
         this._selectable = coerceBooleanProperty(value);
@@ -1028,7 +1362,8 @@ class GanttUpper {
     get element() {
         return this.elementRef.nativeElement;
     }
-    constructor(elementRef, cdr, ngZone, config) {
+    constructor(elementRef, cdr, ngZone, // @Inject(GANTT_GLOBAL_CONFIG) public config: GanttGlobalConfig
+    config) {
         this.elementRef = elementRef;
         this.cdr = cdr;
         this.ngZone = ngZone;
@@ -1054,6 +1389,7 @@ class GanttUpper {
         this.barClick = new EventEmitter();
         this.viewChange = new EventEmitter();
         this.expandChange = new EventEmitter();
+        this.configService = inject(GanttConfigService);
         this.computeAllRefs = true;
         this.linkDragEnded = new EventEmitter();
         this.items = [];
@@ -1068,8 +1404,10 @@ class GanttUpper {
     }
     createView() {
         const viewDate = this.getViewDate();
-        this.viewOptions.dateFormat = Object.assign({}, defaultConfig.dateFormat, this.config.dateFormat, this.viewOptions.dateFormat);
-        this.viewOptions.styleOptions = Object.assign({}, defaultConfig.styleOptions, this.config.styleOptions, this.viewOptions.styleOptions);
+        this.styles = Object.assign({}, this.configService.config.styleOptions, this.styles);
+        this.viewOptions.dateFormat = Object.assign({}, this.configService.config.dateFormat, this.viewOptions.dateFormat);
+        this.viewOptions.styleOptions = Object.assign({}, this.configService.config.styleOptions, this.viewOptions.styleOptions);
+        this.viewOptions.dateDisplayFormats = this.configService.getViewsLocale()[this.viewType]?.dateFormats;
         this.view = createViewFactory(this.viewType, viewDate.start, viewDate.end, this.viewOptions);
     }
     setupGroups() {
@@ -1138,10 +1476,12 @@ class GanttUpper {
         if (!this.start || !this.end) {
             this.originItems.forEach((item) => {
                 if (item.start && !this.start) {
-                    start = start ? Math.min(start, item.start) : item.start;
+                    const itemStart = item.start instanceof Date ? getUnixTime(item.start) : item.start;
+                    start = start ? Math.min(start, itemStart) : itemStart;
                 }
                 if (item.end && !this.end) {
-                    end = end ? Math.max(end, item.end) : item.end;
+                    const itemEnd = item.start instanceof Date ? getUnixTime(item.start) : item.start;
+                    end = end ? Math.max(end, itemEnd) : itemEnd;
                 }
             });
         }
@@ -1177,7 +1517,6 @@ class GanttUpper {
         this.cdr.detectChanges();
     }
     ngOnInit() {
-        this.styles = Object.assign({}, defaultConfig.styleOptions, this.config.styleOptions, this.styles);
         this.createView();
         this.setupGroups();
         this.setupItems();
@@ -1298,15 +1637,12 @@ class GanttUpper {
     rerenderView() {
         this.changeView(this.viewType);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttUpper, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: GANTT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttUpper, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: GanttUpper, inputs: { originItems: ["items", "originItems"], originGroups: ["groups", "originGroups"], originBaselineItems: ["baselineItems", "originBaselineItems"], viewType: "viewType", start: "start", end: "end", showTodayLine: "showTodayLine", draggable: "draggable", styles: "styles", showToolbar: "showToolbar", toolbarOptions: "toolbarOptions", viewOptions: "viewOptions", linkOptions: "linkOptions", disabledLoadOnScroll: "disabledLoadOnScroll", selectable: "selectable", multiple: "multiple", quickTimeFocus: "quickTimeFocus" }, outputs: { loadOnScroll: "loadOnScroll", dragStarted: "dragStarted", dragMoved: "dragMoved", dragEnded: "dragEnded", barClick: "barClick", viewChange: "viewChange", expandChange: "expandChange" }, host: { properties: { "class.gantt": "this.ganttClass" } }, queries: [{ propertyName: "barTemplate", first: true, predicate: ["bar"], descendants: true, static: true }, { propertyName: "rangeTemplate", first: true, predicate: ["range"], descendants: true, static: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true, static: true }, { propertyName: "baselineTemplate", first: true, predicate: ["baseline"], descendants: true, static: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ["groupHeader"], descendants: true, static: true }, { propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttUpper, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [GANTT_GLOBAL_CONFIG]
-                }] }], propDecorators: { originItems: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined }], propDecorators: { originItems: [{
                 type: Input,
                 args: ['items']
             }], originGroups: [{
@@ -1773,8 +2109,8 @@ class GanttBarDrag {
     createMouseEvents() {
         if (!this.hasMonitorMouseEvent && (!this.dragDisabled || !this.linkDragDisabled)) {
             this.hasMonitorMouseEvent = true;
-            const dropClass = this.ganttUpper.config.linkOptions?.dependencyTypes?.length === 1 &&
-                this.ganttUpper.config.linkOptions?.dependencyTypes[0] === GanttLinkType.fs
+            const dropClass = this.ganttUpper.linkOptions?.dependencyTypes?.length === 1 &&
+                this.ganttUpper.linkOptions?.dependencyTypes[0] === GanttLinkType.fs
                 ? singleDropActiveClass
                 : dropActiveClass;
             fromEvent(this.barElement, 'mouseenter', passiveListenerOptions)
@@ -2501,19 +2837,16 @@ class GanttCalendarGridComponent {
             });
         });
     }
-    trackBy(point, index) {
-        return point.text || index;
-    }
     ngOnDestroy() {
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttCalendarGridComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: GanttCalendarGridComponent, isStandalone: true, selector: "gantt-calendar-grid", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-line\" *ngIf=\"ganttUpper.showTodayLine\"> </span>\n</div>\n\n<svg class=\"gantt-calendar-grid-main\" [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight - 1\">\n  <g>\n    <g *ngIf=\"view.showTimeline\">\n      <line\n        *ngFor=\"let point of view.secondaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.cellWidth\"\n        [attr.x2]=\"(i + 1) * view.cellWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\n    </g>\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GanttCalendarGridComponent, isStandalone: true, selector: "gantt-calendar-grid", host: { properties: { "class": "this.className" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  @if (ganttUpper.showTodayLine) {\n  <span class=\"today-line\"> </span>\n  }\n</div>\n\n<svg class=\"gantt-calendar-grid-main\" [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight - 1\">\n  <g>\n    @if (view.showTimeline) {\n    <g>\n      @for (point of view.secondaryDatePoints; track point.x) {\n      <line\n        [attr.x1]=\"($index + 1) * view.cellWidth\"\n        [attr.x2]=\"($index + 1) * view.cellWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\n      }\n    </g>\n    }\n    <g>\n      @for (point of view.primaryDatePoints; track point.x) {\n      <line\n        [attr.x1]=\"($index + 1) * view.primaryWidth\"\n        [attr.x2]=\"($index + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n      }\n    </g>\n  </g>\n</svg>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttCalendarGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gantt-calendar-grid', standalone: true, imports: [NgIf, NgFor], template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-line\" *ngIf=\"ganttUpper.showTodayLine\"> </span>\n</div>\n\n<svg class=\"gantt-calendar-grid-main\" [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight - 1\">\n  <g>\n    <g *ngIf=\"view.showTimeline\">\n      <line\n        *ngFor=\"let point of view.secondaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.cellWidth\"\n        [attr.x2]=\"(i + 1) * view.cellWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\n    </g>\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n" }]
+            args: [{ selector: 'gantt-calendar-grid', standalone: true, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  @if (ganttUpper.showTodayLine) {\n  <span class=\"today-line\"> </span>\n  }\n</div>\n\n<svg class=\"gantt-calendar-grid-main\" [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight - 1\">\n  <g>\n    @if (view.showTimeline) {\n    <g>\n      @for (point of view.secondaryDatePoints; track point.x) {\n      <line\n        [attr.x1]=\"($index + 1) * view.cellWidth\"\n        [attr.x2]=\"($index + 1) * view.cellWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"secondary-line\"\n      ></line>\n      }\n    </g>\n    }\n    <g>\n      @for (point of view.primaryDatePoints; track point.x) {\n      <line\n        [attr.x1]=\"($index + 1) * view.primaryWidth\"\n        [attr.x2]=\"($index + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"mainHeight\"\n        class=\"primary-line\"\n      ></line>\n      }\n    </g>\n  </g>\n</svg>\n" }]
         }], ctorParameters: () => [{ type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
@@ -2564,15 +2897,12 @@ class GanttCalendarHeaderComponent {
             todayEle.style.display = 'none';
         }
     }
-    trackBy(point, index) {
-        return point.text || index;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttCalendarHeaderComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: GanttCalendarHeaderComponent, isStandalone: true, selector: "gantt-calendar-header", host: { properties: { "class": "this.className", "style.height": "this.height" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n</div>\n<svg [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight\">\n  <g>\n    <text\n      class=\"primary-text\"\n      [ngStyle]=\"point.style\"\n      [class.today]=\"point.additions?.isToday\"\n      [class.weekend]=\"point.additions?.isWeekend\"\n      *ngFor=\"let point of view.primaryDatePoints; trackBy: trackBy\"\n      [attr.x]=\"point.x\"\n      [attr.y]=\"point.y\"\n    >\n      {{ point.text }}\n    </text>\n    <ng-container *ngFor=\"let point of view.secondaryDatePoints; trackBy: trackBy\">\n      <text\n        class=\"secondary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    </ng-container>\n\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"ganttUpper.styles.headerHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n\n    <g>\n      <line\n        [attr.x1]=\"0\"\n        [attr.x2]=\"view.width\"\n        [attr.y1]=\"ganttUpper.styles.headerHeight\"\n        [attr.y2]=\"ganttUpper.styles.headerHeight\"\n        class=\"header-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GanttCalendarHeaderComponent, isStandalone: true, selector: "gantt-calendar-header", host: { properties: { "class": "this.className", "style.height": "this.height" } }, ngImport: i0, template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n</div>\n<svg [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight\">\n  <g>\n    @for (point of view.primaryDatePoints; track point.x) {\n    <text\n      class=\"primary-text\"\n      [ngStyle]=\"point.style\"\n      [class.today]=\"point.additions?.isToday\"\n      [class.weekend]=\"point.additions?.isWeekend\"\n      [attr.x]=\"point.x\"\n      [attr.y]=\"point.y\"\n    >\n      {{ point.text }}\n    </text>\n    } @for (point of view.secondaryDatePoints; track point.x) {\n    <text\n      class=\"secondary-text\"\n      [ngStyle]=\"point.style\"\n      [class.today]=\"point.additions?.isToday\"\n      [class.weekend]=\"point.additions?.isWeekend\"\n      [attr.x]=\"point.x\"\n      [attr.y]=\"point.y\"\n    >\n      {{ point.text }}\n    </text>\n    }\n\n    <g>\n      @for (point of view.primaryDatePoints; track point.x) {\n      <line\n        [attr.x1]=\"($index + 1) * view.primaryWidth\"\n        [attr.x2]=\"($index + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"ganttUpper.styles.headerHeight\"\n        class=\"primary-line\"\n      ></line>\n      }\n    </g>\n\n    <g>\n      <line\n        [attr.x1]=\"0\"\n        [attr.x2]=\"view.width\"\n        [attr.y1]=\"ganttUpper.styles.headerHeight\"\n        [attr.y2]=\"ganttUpper.styles.headerHeight\"\n        class=\"header-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttCalendarHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gantt-calendar-header', standalone: true, imports: [NgFor, NgStyle], template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n</div>\n<svg [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight\">\n  <g>\n    <text\n      class=\"primary-text\"\n      [ngStyle]=\"point.style\"\n      [class.today]=\"point.additions?.isToday\"\n      [class.weekend]=\"point.additions?.isWeekend\"\n      *ngFor=\"let point of view.primaryDatePoints; trackBy: trackBy\"\n      [attr.x]=\"point.x\"\n      [attr.y]=\"point.y\"\n    >\n      {{ point.text }}\n    </text>\n    <ng-container *ngFor=\"let point of view.secondaryDatePoints; trackBy: trackBy\">\n      <text\n        class=\"secondary-text\"\n        [ngStyle]=\"point.style\"\n        [class.today]=\"point.additions?.isToday\"\n        [class.weekend]=\"point.additions?.isWeekend\"\n        [attr.x]=\"point.x\"\n        [attr.y]=\"point.y\"\n      >\n        {{ point.text }}\n      </text>\n    </ng-container>\n\n    <g>\n      <line\n        *ngFor=\"let point of view.primaryDatePoints; let i = index; trackBy: trackBy\"\n        [attr.x1]=\"(i + 1) * view.primaryWidth\"\n        [attr.x2]=\"(i + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"ganttUpper.styles.headerHeight\"\n        class=\"primary-line\"\n      ></line>\n    </g>\n\n    <g>\n      <line\n        [attr.x1]=\"0\"\n        [attr.x2]=\"view.width\"\n        [attr.y1]=\"ganttUpper.styles.headerHeight\"\n        [attr.y2]=\"ganttUpper.styles.headerHeight\"\n        class=\"header-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n" }]
+            args: [{ selector: 'gantt-calendar-header', standalone: true, imports: [NgStyle], template: "<div class=\"gantt-calendar-today-overlay\" [style.width.px]=\"view.width\">\n  <span class=\"today-rect\" [hidden]=\"ganttUpper.viewType !== viewTypes.day\"> </span>\n</div>\n<svg [attr.width]=\"view.width\" [attr.height]=\"ganttUpper.styles.headerHeight\">\n  <g>\n    @for (point of view.primaryDatePoints; track point.x) {\n    <text\n      class=\"primary-text\"\n      [ngStyle]=\"point.style\"\n      [class.today]=\"point.additions?.isToday\"\n      [class.weekend]=\"point.additions?.isWeekend\"\n      [attr.x]=\"point.x\"\n      [attr.y]=\"point.y\"\n    >\n      {{ point.text }}\n    </text>\n    } @for (point of view.secondaryDatePoints; track point.x) {\n    <text\n      class=\"secondary-text\"\n      [ngStyle]=\"point.style\"\n      [class.today]=\"point.additions?.isToday\"\n      [class.weekend]=\"point.additions?.isWeekend\"\n      [attr.x]=\"point.x\"\n      [attr.y]=\"point.y\"\n    >\n      {{ point.text }}\n    </text>\n    }\n\n    <g>\n      @for (point of view.primaryDatePoints; track point.x) {\n      <line\n        [attr.x1]=\"($index + 1) * view.primaryWidth\"\n        [attr.x2]=\"($index + 1) * view.primaryWidth\"\n        [attr.y1]=\"0\"\n        [attr.y2]=\"ganttUpper.styles.headerHeight\"\n        class=\"primary-line\"\n      ></line>\n      }\n    </g>\n\n    <g>\n      <line\n        [attr.x1]=\"0\"\n        [attr.x2]=\"view.width\"\n        [attr.y1]=\"ganttUpper.styles.headerHeight\"\n        [attr.y2]=\"ganttUpper.styles.headerHeight\"\n        class=\"header-line\"\n      ></line>\n    </g>\n  </g>\n</svg>\n" }]
         }], ctorParameters: () => [{ type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
@@ -3163,6 +3493,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     standalone: true
                 }]
         }] });
+class GanttDateFormatPipe {
+    transform(value, format) {
+        return new GanttDate(value).format(format);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttDateFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: GanttDateFormatPipe, isStandalone: true, name: "dateFormat" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GanttDateFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dateFormat',
+                    standalone: true
+                }]
+        }] });
 
 class NgxGanttRangeComponent extends GanttItemUpper {
     constructor(elementRef, ganttUpper) {
@@ -3749,17 +4093,17 @@ class NgxGanttToolbarComponent {
     constructor(ganttUpper) {
         this.ganttUpper = ganttUpper;
         this.ganttItemClass = true;
-        this.ganttViewsMap = keyBy(ganttViews, 'value');
+        this.views = inject(GanttConfigService).getViewsLocale();
     }
     selectView(view) {
         this.ganttUpper.changeView(view);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxGanttToolbarComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: NgxGanttToolbarComponent, isStandalone: true, selector: "ngx-gantt-toolbar,gantt-toolbar", inputs: { template: "template" }, host: { properties: { "class.gantt-toolbar": "this.ganttItemClass", "style.top": "this.top" } }, ngImport: i0, template: "<div class=\"toolbar-container\">\n  <ng-container *ngIf=\"!template\">\n    <div class=\"toolbar-views\" *ngIf=\"this.ganttUpper.toolbarOptions?.viewTypes?.length\">\n      <ng-container *ngFor=\"let view of this.ganttUpper.toolbarOptions?.viewTypes\">\n        <div class=\"toolbar-view\" *ngIf=\"ganttViewsMap[view]\" [class.active]=\"view === this.ganttUpper.viewType\" (click)=\"selectView(view)\">\n          {{ ganttViewsMap[view].name }}\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: NgxGanttToolbarComponent, isStandalone: true, selector: "ngx-gantt-toolbar,gantt-toolbar", inputs: { template: "template" }, host: { properties: { "class.gantt-toolbar": "this.ganttItemClass", "style.top": "this.top" } }, ngImport: i0, template: "<div class=\"toolbar-container\">\n  <ng-container *ngIf=\"!template\">\n    <div class=\"toolbar-views\" *ngIf=\"this.ganttUpper.toolbarOptions?.viewTypes?.length\">\n      <ng-container *ngFor=\"let viewType of this.ganttUpper.toolbarOptions?.viewTypes\">\n        <div\n          class=\"toolbar-view\"\n          *ngIf=\"views[viewType]\"\n          [class.active]=\"viewType === this.ganttUpper.viewType\"\n          (click)=\"selectView(viewType)\"\n        >\n          {{ views[viewType].label }}\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxGanttToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-gantt-toolbar,gantt-toolbar', standalone: true, imports: [NgIf, NgFor, NgTemplateOutlet], template: "<div class=\"toolbar-container\">\n  <ng-container *ngIf=\"!template\">\n    <div class=\"toolbar-views\" *ngIf=\"this.ganttUpper.toolbarOptions?.viewTypes?.length\">\n      <ng-container *ngFor=\"let view of this.ganttUpper.toolbarOptions?.viewTypes\">\n        <div class=\"toolbar-view\" *ngIf=\"ganttViewsMap[view]\" [class.active]=\"view === this.ganttUpper.viewType\" (click)=\"selectView(view)\">\n          {{ ganttViewsMap[view].name }}\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</div>\n" }]
+            args: [{ selector: 'ngx-gantt-toolbar,gantt-toolbar', standalone: true, imports: [NgIf, NgFor, NgTemplateOutlet], template: "<div class=\"toolbar-container\">\n  <ng-container *ngIf=\"!template\">\n    <div class=\"toolbar-views\" *ngIf=\"this.ganttUpper.toolbarOptions?.viewTypes?.length\">\n      <ng-container *ngFor=\"let viewType of this.ganttUpper.toolbarOptions?.viewTypes\">\n        <div\n          class=\"toolbar-view\"\n          *ngIf=\"views[viewType]\"\n          [class.active]=\"viewType === this.ganttUpper.viewType\"\n          (click)=\"selectView(viewType)\"\n        >\n          {{ views[viewType].label }}\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n  <ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n</div>\n" }]
         }], ctorParameters: () => [{ type: GanttUpper, decorators: [{
                     type: Inject,
                     args: [GANTT_UPPER_TOKEN]
@@ -3975,7 +4319,7 @@ class NgxGanttRootComponent {
     }
     scrollToDate(date) {
         let x;
-        if (typeof date === 'number') {
+        if (typeof date === 'number' || date instanceof Date) {
             x = this.view.getXPointByDate(new GanttDate(date));
         }
         else {
@@ -4470,13 +4814,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }] } });
 
 class NgxGanttModule {
-    constructor(ganttGlobalConfig) {
+    constructor() {
+        const configService = inject(GanttConfigService);
         setDefaultOptions({
-            locale: ganttGlobalConfig?.dateOptions?.locale,
-            weekStartsOn: ganttGlobalConfig?.dateOptions?.weekStartsOn || 1
+            locale: configService.getDateLocale(),
+            weekStartsOn: configService.config?.dateOptions?.weekStartsOn
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxGanttModule, deps: [{ token: GANTT_GLOBAL_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxGanttModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: NgxGanttModule, imports: [CommonModule,
             DragDropModule,
             ScrollingModule,
@@ -4500,7 +4845,8 @@ class NgxGanttModule {
             GanttScrollbarComponent,
             IsGanttRangeItemPipe,
             IsGanttBarItemPipe,
-            IsGanttCustomItemPipe], exports: [NgxGanttComponent,
+            IsGanttCustomItemPipe,
+            GanttDateFormatPipe], exports: [NgxGanttComponent,
             NgxGanttTableComponent,
             NgxGanttTableColumnComponent,
             NgxGanttRootComponent,
@@ -4511,13 +4857,15 @@ class NgxGanttModule {
             GanttCalendarHeaderComponent,
             GanttCalendarGridComponent,
             GanttDragBackdropComponent,
-            GanttScrollbarComponent] }); }
+            GanttScrollbarComponent,
+            GanttDateFormatPipe] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgxGanttModule, providers: [
             CdkVirtualScrollViewport,
             {
                 provide: GANTT_GLOBAL_CONFIG,
                 useValue: defaultConfig
-            }
+            },
+            ...i18nLocaleProvides
         ], imports: [CommonModule,
             DragDropModule,
             ScrollingModule,
@@ -4550,7 +4898,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         GanttScrollbarComponent,
                         IsGanttRangeItemPipe,
                         IsGanttBarItemPipe,
-                        IsGanttCustomItemPipe
+                        IsGanttCustomItemPipe,
+                        GanttDateFormatPipe
                     ],
                     exports: [
                         NgxGanttComponent,
@@ -4564,22 +4913,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         GanttCalendarHeaderComponent,
                         GanttCalendarGridComponent,
                         GanttDragBackdropComponent,
-                        GanttScrollbarComponent
+                        GanttScrollbarComponent,
+                        GanttDateFormatPipe
                     ],
                     providers: [
                         CdkVirtualScrollViewport,
                         {
                             provide: GANTT_GLOBAL_CONFIG,
                             useValue: defaultConfig
-                        }
+                        },
+                        ...i18nLocaleProvides
                     ]
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [GANTT_GLOBAL_CONFIG]
-                }] }] });
+        }], ctorParameters: () => [] });
 
 /*
  * Public API Surface of gantt
@@ -4589,5 +4935,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GANTT_GLOBAL_CONFIG, GANTT_UPPER_TOKEN, GanttBarClickEvent, GanttBaselineItemInternal, GanttCalendarGridComponent, GanttCalendarHeaderComponent, GanttDate, GanttDatePoint, GanttDragBackdropComponent, GanttDragEvent, GanttGroupInternal, GanttItemInternal, GanttItemType, GanttItemUpper, GanttLineClickEvent, GanttLinkDragEvent, GanttLinkLineType, GanttLinkType, GanttLoadOnScrollEvent, GanttLoaderComponent, GanttPrintService, GanttScrollbarComponent, GanttSelectedEvent, GanttTableDragDroppedEvent, GanttTableDragEndedEvent, GanttTableDragEnterPredicateContext, GanttTableDragStartedEvent, GanttTableEvent, GanttTableItemClickEvent, GanttUpper, GanttView, GanttViewType, GanttVirtualScrolledIndexChangeEvent, IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttRangeItemPipe, LinkColors, NgxGanttBarComponent, NgxGanttBaselineComponent, NgxGanttComponent, NgxGanttModule, NgxGanttRangeComponent, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, NgxGanttToolbarComponent, defaultConfig, ganttViews, primaryDatePointTop, registerView, secondaryDatePointTop };
+export { GANTT_GLOBAL_CONFIG, GANTT_I18N_LOCALE_TOKEN, GANTT_UPPER_TOKEN, GanttBarClickEvent, GanttBaselineItemInternal, GanttCalendarGridComponent, GanttCalendarHeaderComponent, GanttConfigService, GanttDate, GanttDateFormatPipe, GanttDatePoint, GanttDragBackdropComponent, GanttDragEvent, GanttGroupInternal, GanttI18nLocale, GanttItemInternal, GanttItemType, GanttItemUpper, GanttLineClickEvent, GanttLinkDragEvent, GanttLinkLineType, GanttLinkType, GanttLoadOnScrollEvent, GanttLoaderComponent, GanttPrintService, GanttScrollbarComponent, GanttSelectedEvent, GanttTableDragDroppedEvent, GanttTableDragEndedEvent, GanttTableDragEnterPredicateContext, GanttTableDragStartedEvent, GanttTableEvent, GanttTableItemClickEvent, GanttUpper, GanttView, GanttViewType, GanttVirtualScrolledIndexChangeEvent, IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttRangeItemPipe, LinkColors, NgxGanttBarComponent, NgxGanttBaselineComponent, NgxGanttComponent, NgxGanttModule, NgxGanttRangeComponent, NgxGanttRootComponent, NgxGanttTableColumnComponent, NgxGanttTableComponent, NgxGanttToolbarComponent, deDeLocale, defaultConfig, enUsLocale, getDefaultTimeZone, jaJpLocale, primaryDatePointTop, registerView, ruRuLocale, secondaryDatePointTop, setDefaultTimeZone, zhHans as zhHansLocale, zhHant as zhHantLocale };
 //# sourceMappingURL=worktile-gantt.mjs.map