Skip to content

Commit 028a49c

Browse files
authored
feat(i18n): support 简体中文, 繁體中文, English, 日本語, Deutsch, Русский язык #499 #491 (#500)
1 parent 950220e commit 028a49c

File tree

35 files changed

+780
-329
lines changed

35 files changed

+780
-329
lines changed

.docgenirc.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ module.exports = {
66
logoUrl: '/assets/imgs/logo.png',
77
repoUrl: 'https://github.com/worktile/ngx-gantt',
88
locales: [
9-
{ key: 'en-us', name: 'English' },
10-
{ key: 'zh-cn', name: '中文' }
9+
{ key: 'zh-cn', name: '中文' },
10+
{ key: 'en-us', name: 'English' }
1111
],
1212
defaultLocale: 'zh-cn',
1313
navs: [

docs/en-us/guides/basic/date.md

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -23,32 +23,3 @@ new GanttDate(1617275597).format("yyyy年MM月");
2323
```
2424

2525
For more information, please refer to [GanttDate](https://github.com/worktile/ngx-gantt/blob/master/packages/gantt/src/utils/date.ts)
26-
27-
## Set time zone
28-
29-
Set the time zone through [global configuration](/guides/configuration/global), the configuration method is as follows:
30-
31-
```javascript
32-
import { GANTT_GLOBAL_CONFIG } from 'ngx-gantt';
33-
import { fr } from 'date-fns/locale';
34-
35-
@NgModule({
36-
...
37-
providers: [
38-
{
39-
provide: GANTT_GLOBAL_CONFIG,
40-
useValue: {
41-
dateOptions: {
42-
locale: fr
43-
weekStartsOn: 1
44-
}
45-
}
46-
},
47-
...
48-
]
49-
...
50-
})
51-
export class AppModule {
52-
53-
}
54-
```

docs/en-us/guides/basic/language.md

Lines changed: 0 additions & 58 deletions
This file was deleted.

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

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,25 @@ title: Global Config
99
import { GANTT_GLOBAL_CONFIG } from 'ngx-gantt';
1010

1111
@NgModule({
12-
...
13-
providers: [
14-
{
15-
provide: GANTT_GLOBAL_CONFIG,
16-
useValue: {
17-
dateFormat: {
18-
...
19-
},
20-
linkOptions: {
21-
...
22-
},
23-
styleOptions: {
24-
...
25-
},
26-
}
27-
},
28-
...
29-
]
30-
...
12+
...
13+
providers: [
14+
{
15+
provide: GANTT_GLOBAL_CONFIG,
16+
useValue: {
17+
dateFormat: {
18+
...
19+
},
20+
linkOptions: {
21+
...
22+
},
23+
styleOptions: {
24+
...
25+
},
26+
}
27+
},
28+
...
29+
]
30+
...
3131
})
3232
export class AppModule {
3333

@@ -39,17 +39,8 @@ export class AppModule {
3939

4040
```javascript
4141
export interface GanttGlobalConfig {
42-
// dateFormat can be used to set the internationalization of the view, the format format is consistent with the date-fns format rule
43-
dateFormat?: {
44-
week?: string, // week w
45-
month?: string, // month M
46-
quarter?: string, // QQQ
47-
year?: string, // year yyyy
48-
yearMonth?: string, // yyyy年MM月
49-
yearQuarter?: string // yyyy年QQQ
50-
};
42+
locale: GanttI18nLocale; // i18n locale zh-hans, zh-hant ,en-us, de-de, ja-jp, ru-ru
5143
dateOptions: {
52-
locale?: Locale, // time zone import { fr } from 'date-fns/locale';
5344
weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 // set the week start value, the default is 1
5445
};
5546
linkOptions: {
@@ -62,12 +53,23 @@ export interface GanttGlobalConfig {
6253
lineHeight?: number, // custom line height
6354
barHeight?: number // custom Bar height
6455
};
56+
57+
/** @deprecated dateFormat is deprecated, please configure through i18n. http://gantt.ngnice.com/guides/configuration/i18n */
58+
dateFormat?: {
59+
week?: string, // week w
60+
month?: string, // month M
61+
quarter?: string, // QQQ
62+
year?: string, // year yyyy
63+
yearMonth?: string, // yyyy年MM月
64+
yearQuarter?: string // yyyy年QQQ
65+
};
6566
}
6667
```
6768

68-
| Name | Type | Description |
69-
| ------------ | ------------------ | ----------------------------------------------------------------- |
70-
| dateFormat | `GanttDateFormat` | Date format |
71-
| dateOptions | `GanttDateOptions` | Date configuration, can be used to configure the global time zone |
72-
| linkOptions | `GanttLinkOptions` | Relationship configuration |
73-
| styleOptions | `GanttStyles` | Style configuration |
69+
| Name | Type | Description |
70+
| ------------------------ | -------------------------------------------------------- | -------------------------- |
71+
| locale | `zh-hans`, `zh-hant` ,`en-us`, `de-de`, `ja-jp`, `ru-ru` | global locale |
72+
| dateOptions | `GanttDateOptions` | Date configuration |
73+
| linkOptions | `GanttLinkOptions` | Relationship configuration |
74+
| styleOptions | `GanttStyles` | Style configuration |
75+
| dateFormat `@deprecated` | `GanttDateFormat` | Date format |
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
---
2+
category: config
3+
title: I18n
4+
---
5+
6+
`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.
7+
8+
### Using Built-in Languages
9+
10+
```javascript
11+
import { GANTT_GLOBAL_CONFIG } from 'ngx-gantt';
12+
13+
@NgModule({
14+
...
15+
providers: [
16+
{
17+
provide: GANTT_GLOBAL_CONFIG,
18+
useValue: {
19+
locale: GanttI18nLocale.enUs,
20+
}
21+
},
22+
...
23+
]
24+
...
25+
})
26+
export class AppModule {
27+
28+
}
29+
30+
31+
```
32+
33+
### Configuring Custom Languages
34+
35+
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.
36+
37+
The dateFormats formats follow the [date-fns](https://date-fns.org) format and support a variety of formats.
38+
39+
```javascript
40+
import { GANTT_GLOBAL_CONFIG } from 'ngx-gantt';
41+
42+
@NgModule({
43+
...
44+
providers: [
45+
{
46+
provide: GANTT_I18N_LOCALE_TOKEN,
47+
useValue: {
48+
id: 'ko-kr',
49+
dateLocale: ko, // Specify the date-fns format locale.If not provided, the default is the en-us locale.
50+
views: {
51+
[GanttViewType.hour]: {
52+
label: '매시간',
53+
dateFormats: {
54+
primary: 'M월 d일',
55+
secondary: 'HH:mm'
56+
}
57+
},
58+
[GanttViewType.day]: {
59+
label: '매일',
60+
dateFormats: {
61+
primary: 'yyyy년 M월 d일',
62+
secondary: 'd'
63+
}
64+
},
65+
...
66+
}
67+
},
68+
multi: true
69+
},
70+
{
71+
provide: GANTT_GLOBAL_CONFIG,
72+
useValue: {
73+
locale: 'ko-kr'
74+
}
75+
}
76+
]
77+
...
78+
})
79+
export class AppModule {
80+
81+
}
82+
83+
```

docs/zh-cn/guides/basic/date.md

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -24,32 +24,3 @@ order: 25
2424
```
2525

2626
更多请参考 [GanttDate](https://github.com/worktile/ngx-gantt/blob/master/packages/gantt/src/utils/date.ts)
27-
28-
## 设置时区
29-
30-
通过[全局配置](/guides/configuration/global) 设置时区,配置方式如下:
31-
32-
```javascript
33-
import { GANTT_GLOBAL_CONFIG } from 'ngx-gantt';
34-
import { fr } from 'date-fns/locale';
35-
36-
@NgModule({
37-
...
38-
providers: [
39-
{
40-
provide: GANTT_GLOBAL_CONFIG,
41-
useValue: {
42-
dateOptions: {
43-
locale: fr
44-
weekStartsOn: 1
45-
}
46-
}
47-
},
48-
...
49-
]
50-
...
51-
})
52-
export class AppModule {
53-
54-
}
55-
```

docs/zh-cn/guides/basic/language.md

Lines changed: 0 additions & 59 deletions
This file was deleted.

0 commit comments

Comments
 (0)