feat: add time zone support #501

docs/en-us/guides/configuration/global.md

@@ -14,15 +14,12 @@ import { GANTT_GLOBAL_CONFIG } from 'ngx-gantt';
     {
       provide: GANTT_GLOBAL_CONFIG,
       useValue: {
+        locale: 'zh-hans',
         dateFormat: {
-          ...
-        },
-        linkOptions: {
-          ...
-        },
-        styleOptions: {
-          ...
-        },
+           timeZone: 'Asia/Shanghai',
+           weekStartsOn: 1
+        }
+        ...
       }
     },
     ...
@@ -41,6 +38,7 @@ export class AppModule {
 export interface GanttGlobalConfig {
   locale: GanttI18nLocale; // i18n locale  zh-hans, zh-hant ,en-us, de-de, ja-jp, ru-ru
   dateOptions: {
+    timeZone: string, // set custom time zone, default is system's time zone
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 // set the week start value, the default is 1
   };
   linkOptions: {

docs/en-us/guides/configuration/i18n.md

@@ -81,3 +81,31 @@ export class AppModule {
 }
 
 ```
+
+### Configuring TimeZone
+
+`ngx-gantt` defaults to using the system timezone, but users can set a custom timezone through the global configuration `GANTT_GLOBAL_CONFIG` by specifying dateOptions.timeZone.
+
+```javascript
+import { GANTT_GLOBAL_CONFIG } from 'ngx-gantt';
+
+@NgModule({
+  ...
+  providers: [
+    {
+      provide: GANTT_GLOBAL_CONFIG,
+      useValue: {
+          dateOptions: {
+             timeZone: 'Asia/Shanghai'
+          }
+      }
+    },
+    ...
+  ]
+  ...
+})
+export class AppModule {
+
+}
+
+```

docs/zh-cn/guides/configuration/global.md

@@ -15,15 +15,12 @@ import { GANTT_GLOBAL_CONFIG } from 'ngx-gantt';
     {
       provide: GANTT_GLOBAL_CONFIG,
       useValue: {
+        locale: 'zh-hans',
         dateFormat: {
-          ...
-        },
-        linkOptions: {
-          ...
-        },
-        styleOptions: {
-          ...
-        },
+           timeZone: 'Asia/Shanghai',
+           weekStartsOn: 1
+        }
+        ...
       }
     },
     ...
@@ -36,12 +33,13 @@ export class AppModule {
 
 ```
 
-`GANTT_GLOBAL_CONFIG` 格式如下：
+`GANTT_GLOBAL_CONFIG` 参数说明：
 
 ```javascript
 export interface GanttGlobalConfig {
   locale: GanttI18nLocale; // 默认 locale 可选语言：zh-hans, zh-hant ,en-us, de-de, ja-jp, ru-ru
   dateOptions: {
+    timeZone: string, // 设置自定义时区，默认为系统默认时区
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 // 设置 week 起始值，默认为 1
   };
   linkOptions: {

docs/zh-cn/guides/configuration/i18n.md

@@ -81,4 +81,33 @@ export class AppModule {
 
 }
 
+```
+
+### 时区
+
+`ngx-gantt` 默认使用系统时区，使用者可通过全局配置 `GANTT_GLOBAL_CONFIG` 中的 `dateOptions.timeZone` 来设置自定义时区
+
+```javascript
+import { GANTT_GLOBAL_CONFIG } from 'ngx-gantt';
+
+@NgModule({
+  ...
+  providers: [
+    {
+      provide: GANTT_GLOBAL_CONFIG,
+      useValue: {
+          dateOptions: {
+             timeZone: 'Asia/Shanghai'
+          }
+      }
+    },
+    ...
+  ]
+  ...
+})
+export class AppModule {
+
+}
+
+
 ```

example/src/app/app.module.ts

@@ -8,7 +8,7 @@ import { ThyNotifyModule } from 'ngx-tethys/notify';
 import { ThyDatePickerModule } from 'ngx-tethys/date-picker';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { GANTT_GLOBAL_CONFIG, GANTT_I18N_LOCALE_TOKEN, GanttViewType, NgxGanttModule } from 'ngx-gantt';
+import { GANTT_GLOBAL_CONFIG, NgxGanttModule } from 'ngx-gantt';
 import { AppComponent } from './app.component';
 import { AppGanttExampleComponent } from './gantt/gantt.component';
 import { AppRoutingModule } from './app-routing.module';
@@ -25,7 +25,6 @@ import { AppExampleComponentsComponent } from './components/components.component
 import { AppGanttGroupsExampleComponent } from './gantt-groups/gantt-groups.component';
 import { AppGanttCustomViewExampleComponent } from './gantt-custom-view/gantt.component';
 import { AppGanttVirtualScrollExampleComponent } from './gantt-virtual-scroll/gantt.component';
-import { ko } from 'date-fns/locale';
 
 @NgModule({
     declarations: [
@@ -56,7 +55,17 @@ import { ko } from 'date-fns/locale';
         ThyDatePickerModule,
         ...EXAMPLE_MODULES
     ],
-    providers: [...DOCGENI_SITE_PROVIDERS],
+    providers: [
+        ...DOCGENI_SITE_PROVIDERS,
+        {
+            provide: GANTT_GLOBAL_CONFIG,
+            useValue: {
+                dateOptions: {
+                    timeZone: 'America/New_York'
+                }
+            }
+        }
+    ],
     bootstrap: [AppComponent]
 })
 export class AppModule {

example/src/app/gantt/gantt.component.html

@@ -60,12 +60,12 @@
         </ngx-gantt-column>
         <ngx-gantt-column name="开始时间" width="200px">
           <ng-template #cell let-item="item">
-            {{ item.start * 1000 | date : 'yyyy-MM-dd HH:mm' }}
+            {{ item.start * 1000 | dateFormat : 'yyyy-MM-dd HH:mm' }}
           </ng-template>
         </ngx-gantt-column>
         <ngx-gantt-column name="截止时间" width="200px">
           <ng-template #cell let-item="item">
-            {{ item.end * 1000 | date : 'yyyy-MM-dd HH:mm' }}
+            {{ item.end * 1000 | dateFormat : 'yyyy-MM-dd HH:mm' }}
           </ng-template>
         </ngx-gantt-column>
       </ngx-gantt-table>

package.json

@@ -46,7 +46,9 @@
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
-    "date-fns": "^2.14.0",
+    "@date-fns/tz": "^1.2.0",
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
     "html2canvas": "1.0.0-rc.7",
     "rxjs": "^7.5.5",
     "tslib": "^2.3.0",

packages/gantt/src/gantt-upper.ts

@@ -196,7 +196,7 @@ export abstract class GanttUpper implements OnChanges, OnInit, OnDestroy {
         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.viewOptions.dateDisplayFormats = this.configService.getViewsLocale()[this.viewType]?.dateFormats;
         this.view = createViewFactory(this.viewType, viewDate.start, viewDate.end, this.viewOptions);
     }
 

packages/gantt/src/gantt.config.ts

@@ -23,6 +23,7 @@ export interface GanttDateOptions {
      * http://gantt.ngnice.com/guides/configuration/i18n
      */
     locale?: Locale;
+    timeZone?: string;
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 }
 

packages/gantt/src/gantt.module.ts

@@ -18,12 +18,13 @@ import { GanttTableHeaderComponent } from './components/table/header/gantt-table
 import { NgxGanttToolbarComponent } from './components/toolbar/toolbar.component';
 import { NgxGanttComponent } from './gantt.component';
 import { GANTT_GLOBAL_CONFIG, GanttConfigService, GanttGlobalConfig, defaultConfig } from './gantt.config';
-import { IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttRangeItemPipe } from './gantt.pipe';
+import { GanttDateFormatPipe, IsGanttBarItemPipe, IsGanttCustomItemPipe, IsGanttRangeItemPipe } from './gantt.pipe';
 import { NgxGanttRootComponent } from './root.component';
 import { NgxGanttTableColumnComponent } from './table/gantt-column.component';
 import { NgxGanttTableComponent } from './table/gantt-table.component';
 import { GanttScrollbarComponent } from './components/scrollbar/scrollbar.component';
 import { i18nLocaleProvides } from './i18n';
+import { setDefaultTimeZone } from 'ngx-gantt';
 
 @NgModule({
     imports: [
@@ -50,7 +51,8 @@ import { i18nLocaleProvides } from './i18n';
         GanttScrollbarComponent,
         IsGanttRangeItemPipe,
         IsGanttBarItemPipe,
-        IsGanttCustomItemPipe
+        IsGanttCustomItemPipe,
+        GanttDateFormatPipe
     ],
     exports: [
         NgxGanttComponent,
@@ -64,7 +66,8 @@ import { i18nLocaleProvides } from './i18n';
         GanttCalendarHeaderComponent,
         GanttCalendarGridComponent,
         GanttDragBackdropComponent,
-        GanttScrollbarComponent
+        GanttScrollbarComponent,
+        GanttDateFormatPipe
     ],
     providers: [
         CdkVirtualScrollViewport,
@@ -78,9 +81,14 @@ import { i18nLocaleProvides } from './i18n';
 export class NgxGanttModule {
     constructor() {
         const configService = inject(GanttConfigService);
+
         setDefaultOptions({
             locale: configService.getDateLocal(),
             weekStartsOn: configService.config?.dateOptions?.weekStartsOn
         });
+
+        if (configService.config.dateOptions?.timeZone) {
+            setDefaultTimeZone(configService.config.dateOptions.timeZone);
+        }
     }
 }