worktile / ngx-gantt

A modern and powerful gantt chart component for Angular
http://gantt.ngnice.com
MIT License
242 stars 68 forks source link

How to change language #242

Open Evercosta opened 2 years ago

walkerkay commented 2 years ago

You can configure dateFormat to implement language change

// example :

import { GANTT_GLOBAL_CONFIG } from 'ngx-gantt';

@NgModule({
  providers: [
    {
      provide: GANTT_GLOBAL_CONFIG,
      useValue: {
        dateFormat: {
             yearQuarter: `QQQ 'of' yyyy`,
             month: 'LLLL',
             yearMonth: `LLLL yyyy'(week' w ')'`
        }
      }
    }
  ]
})
export class AppModule {

}

Format rules: https://date-fns.org/v2.28.0/docs/format

Evercosta commented 2 years ago

@walkerkay Tank you, last question: How changing locale globally?

walkerkay commented 2 years ago

@walkerkay Tank you, last question: How changing locale globally?

Time zone ? ngx-gantt data uses timestamp. If you need to show the time, you need to use some pipes to achieve it after obtaining the time in the data.

romildojpaiter commented 2 years ago

Hello @walkerkay.

Congrats for this project, I liked so much. Could you tell me, how can I set the locale to ptBR in date-fns, to project-wide.

I'm already used GanttViewOptions, dateFormat, but I need put my project as portuguese.

Is this possible?

image

hnguyen48206 commented 2 years ago

I also can not find anywhere to configure the locale of displayed time and the properties of GanttViewOptions do not have the one named dateformat either.

image

DyegoPimentel commented 2 years ago

How can I translate this: image

Theodode commented 1 year ago

I have the same issue. It seems the GanttDate class doesn't provide any entry points to set date-fns locale option (https://date-fns.org/v2.0.0-alpha.26/docs/Locale). So my week numbering is not ISO, some year have not the right number of weeks. It is possible now to set default Locale in date-fns (https://date-fns.org/v2.29.0/docs/setDefaultOptions) but only since the version 2.29:

// Set global locale: import { setDefaultOptions } from 'date-fns'; import { fr } from 'date-fns/locale'; setDefaultOptions({ locale: fr });

Update date-fns to 2.29 is probably the esiest way to solve this issue without touching anything.

walkerkay commented 1 year ago

I have the same issue. It seems the GanttDate class doesn't provide any entry points to set date-fns locale option (https://date-fns.org/v2.0.0-alpha.26/docs/Locale). So my week numbering is not ISO, some year have not the right number of weeks. It is possible now to set default Locale in date-fns (https://date-fns.org/v2.29.0/docs/setDefaultOptions) but only since the version 2.29:

// Set global locale: import { setDefaultOptions } from 'date-fns'; import { fr } from 'date-fns/locale'; setDefaultOptions({ locale: fr });

Update date-fns to 2.29 is probably the esiest way to solve this issue without touching anything.

Yes, the date format uses date-fns, so you need to import date-fns to set the time zone.

vladsklov commented 1 month ago

I have the same issue, want to translate month to en. Angular v17 image image

akabikas commented 1 month ago

I have the same issue, want to translate month to en. Angular v17 image image

Have you found any solutions yet?

vladsklov commented 3 weeks ago

I have the same issue, want to translate month to en. Angular v17 image image

Have you found any solutions yet?

only this

translateCalendarToEng(): void { let svgHTML = this.el.nativeElement.children[0].children[0].children[0].children[1].children[0].children[1].innerHTML;

for (const [chineseMonth, englishMonth] of Object.entries(CHINES_MONTH_MAP)) {
  const regex = new RegExp(chineseMonth, 'g');
  svgHTML = svgHTML.replace(regex, `${englishMonth}/`);
}

// Remove the "日" character
svgHTML = svgHTML.replace(/日/g, '');

// Replace "没有数据" with "No data"
svgHTML = svgHTML.replace(/没有数据/g, 'No data');
this.el.nativeElement.children[0].children[0].children[0].children[1].children[0].children[1].innerHTML = svgHTML;

// eslint-disable-next-line max-len
this.el.nativeElement.children[0].children[0].children[1].children[0].children[0].children[0].children[0].children[0].children[0].children[1].innerText =
  'No Data';

}