feat(i18n): support 简体中文, 繁體中文, English, 日本語, Deutsch, Русский язык #499

#491 (#500)
worktile · Jan 16, 2025 · 028a49c · 028a49c
1 parent 950220e
commit 028a49c
Show file tree

Hide file tree

Showing 35 changed files with 780 additions and 329 deletions.
diff --git a/.docgenirc.js b/.docgenirc.js
@@ -6,8 +6,8 @@ module.exports = {
     logoUrl: '/assets/imgs/logo.png',
     repoUrl: 'https://github.com/worktile/ngx-gantt',
     locales: [
-        { key: 'en-us', name: 'English' },
-        { key: 'zh-cn', name: '中文' }
+        { key: 'zh-cn', name: '中文' },
+        { key: 'en-us', name: 'English' }
     ],
     defaultLocale: 'zh-cn',
     navs: [

diff --git a/docs/en-us/guides/basic/date.md b/docs/en-us/guides/basic/date.md
@@ -23,32 +23,3 @@ new GanttDate(1617275597).format("yyyy年MM月");
 ```
 
 For more information, please refer to [GanttDate](https://github.com/worktile/ngx-gantt/blob/master/packages/gantt/src/utils/date.ts)
-
-## Set time zone
-
-Set the time zone through [global configuration](/guides/configuration/global), the configuration method is as follows:
-
-```javascript
-import { GANTT_GLOBAL_CONFIG } from 'ngx-gantt';
-import { fr } from 'date-fns/locale';
-
-@NgModule({
-...
-providers: [
-{
-provide: GANTT_GLOBAL_CONFIG,
-useValue: {
-dateOptions: {
-locale: fr
-weekStartsOn: 1
-}
-}
-},
-...
-]
-...
-})
-export class AppModule {
-
-}
-```
diff --git a/docs/en-us/guides/basic/language.md b/docs/en-us/guides/basic/language.md
diff --git a/docs/en-us/guides/configuration/global.md b/docs/en-us/guides/configuration/global.md
@@ -9,25 +9,25 @@ title: Global Config
 import { GANTT_GLOBAL_CONFIG } from 'ngx-gantt';
 
 @NgModule({
-...
-providers: [
-{
-provide: GANTT_GLOBAL_CONFIG,
-useValue: {
-dateFormat: {
-...
-},
-linkOptions: {
-...
-},
-styleOptions: {
-...
-},
-}
-},
-...
-]
-...
+  ...
+  providers: [
+    {
+      provide: GANTT_GLOBAL_CONFIG,
+      useValue: {
+        dateFormat: {
+          ...
+        },
+        linkOptions: {
+          ...
+        },
+        styleOptions: {
+          ...
+        },
+      }
+    },
+    ...
+  ]
+  ...
 })
 export class AppModule {
 
@@ -39,17 +39,8 @@ export class AppModule {
 
 ```javascript
 export interface GanttGlobalConfig {
-  // dateFormat can be used to set the internationalization of the view, the format format is consistent with the date-fns format rule
-  dateFormat?: {
-    week?: string, // week w
-    month?: string, // month M
-    quarter?: string, // QQQ
-    year?: string, // year yyyy
-    yearMonth?: string, // yyyy年MM月
-    yearQuarter?: string // yyyy年QQQ
-  };
+  locale: GanttI18nLocale; // i18n locale  zh-hans, zh-hant ,en-us, de-de, ja-jp, ru-ru
   dateOptions: {
-    locale?: Locale, // time zone import { fr } from 'date-fns/locale';
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 // set the week start value, the default is 1
   };
   linkOptions: {
@@ -62,12 +53,23 @@ export interface GanttGlobalConfig {
     lineHeight?: number, // custom line height
     barHeight?: number // custom Bar height
   };
+
+  /** @deprecated dateFormat is deprecated, please configure through i18n. http://gantt.ngnice.com/guides/configuration/i18n */
+  dateFormat?: {
+    week?: string, // week w
+    month?: string, // month M
+    quarter?: string, // QQQ
+    year?: string, // year yyyy
+    yearMonth?: string, // yyyy年MM月
+    yearQuarter?: string // yyyy年QQQ
+  };
 }
 ```
 
-| Name         | Type               | Description                                                       |
-| ------------ | ------------------ | ----------------------------------------------------------------- |
-| dateFormat   | `GanttDateFormat`  | Date format                                                       |
-| dateOptions  | `GanttDateOptions` | Date configuration, can be used to configure the global time zone |
-| linkOptions  | `GanttLinkOptions` | Relationship configuration                                        |
-| styleOptions | `GanttStyles`      | Style configuration                                               |
+| Name                     | Type                                                     | Description                |
+| ------------------------ | -------------------------------------------------------- | -------------------------- |
+| locale                   | `zh-hans`, `zh-hant` ,`en-us`, `de-de`, `ja-jp`, `ru-ru` | global locale              |
+| dateOptions              | `GanttDateOptions`                                       | Date configuration         |
+| linkOptions              | `GanttLinkOptions`                                       | Relationship configuration |
+| styleOptions             | `GanttStyles`                                            | Style configuration        |
+| dateFormat `@deprecated` | `GanttDateFormat`                                        | Date format                |
diff --git a/docs/en-us/guides/configuration/i18n.md b/docs/en-us/guides/configuration/i18n.md
@@ -0,0 +1,83 @@
+---
+category: config
+title: I18n
+---
+
+`ngx-gantt` has 6 built-in languages, namely Simplified 简体中文（zh-hans）,繁體中文（zh-hant）,English（en-us）,日本語（ja-jp）,Deutsch（de-de）,Русский язык（ru-ru）. It also supports custom languages.
+
+### Using Built-in Languages
+
+```javascript
+import { GANTT_GLOBAL_CONFIG } from 'ngx-gantt';
+
+@NgModule({
+  ...
+  providers: [
+    {
+      provide: GANTT_GLOBAL_CONFIG,
+      useValue: {
+          locale: GanttI18nLocale.enUs,
+      }
+    },
+    ...
+  ]
+  ...
+})
+export class AppModule {
+
+}
+
+
+```
+
+### Configuring Custom Languages
+
+The built-in languages support override configuration. Just specify the ID of the language that needs to be overridden for the configuration content. If the specified ID doesn't exist, a new language will be created.
+
+The dateFormats formats follow the [date-fns](https://date-fns.org) format and support a variety of formats.
+
+```javascript
+import { GANTT_GLOBAL_CONFIG } from 'ngx-gantt';
+
+@NgModule({
+  ...
+  providers: [
+    {
+            provide: GANTT_I18N_LOCALE_TOKEN,
+            useValue: {
+                id: 'ko-kr',
+                dateLocale: ko, // Specify the date-fns format locale.If not provided, the default is the en-us locale.
+                views: {
+                    [GanttViewType.hour]: {
+                        label: '매시간',
+                        dateFormats: {
+                            primary: 'M월 d일',
+                            secondary: 'HH:mm'
+                        }
+                    },
+                    [GanttViewType.day]: {
+                        label: '매일',
+                        dateFormats: {
+                            primary: 'yyyy년 M월 d일',
+                            secondary: 'd'
+                        }
+                    },
+                    ...
+                }
+            },
+            multi: true
+        },
+        {
+            provide: GANTT_GLOBAL_CONFIG,
+            useValue: {
+                locale: 'ko-kr'
+            }
+        }
+  ]
+  ...
+})
+export class AppModule {
+
+}
+
+```
diff --git a/docs/zh-cn/guides/basic/date.md b/docs/zh-cn/guides/basic/date.md
@@ -24,32 +24,3 @@ order: 25
 ```
 
 更多请参考 [GanttDate](https://github.com/worktile/ngx-gantt/blob/master/packages/gantt/src/utils/date.ts)
-
-## 设置时区
-
-通过[全局配置](/guides/configuration/global) 设置时区，配置方式如下：
-
-```javascript
-import { GANTT_GLOBAL_CONFIG } from 'ngx-gantt';
-import { fr } from 'date-fns/locale';
-
-@NgModule({
-  ...
-  providers: [
-    {
-      provide: GANTT_GLOBAL_CONFIG,
-      useValue: {
-        dateOptions: {
-             locale: fr
-             weekStartsOn: 1
-        }
-      }
-    },
-    ...
-  ]
-  ...
-})
-export class AppModule {
-
-}
-```
diff --git a/docs/zh-cn/guides/basic/language.md b/docs/zh-cn/guides/basic/language.md