How to change language in a gantt chart

[Sebastian]

Hi,I would like to know how to change the language for the gantt chart component, so that I change the text that is already in English by default.

Thanks in advance.

[Gurunathan A]

Hi Sebastin, 

 

We can translate the Gantt default text by using localization support, this can be done by calling setCulture method with required culture name and locale text value. Please find the code example below. 

 

 

import { L10n, setCulture } from '@syncfusion/ej2-base'; 

setCulture('es'); 

L10n.load({ 

  'es': { 

    'gantt': { 

      "id": "CARNÉ DE IDENTIDAD", 

      "name": "Nombre", 

      "startDate": "Fecha de inicio", 

      "endDate": "Fecha final", 

      "duration": "Duración", 

      "progress": "Progreso", 

      "dependency": "Dependencia", 

    }, 

  } 

});     

 

Please find the below documentation and sample link. 

Document - https://ej2.syncfusion.com/react/documentation/common/localization/#loading-translations 

Sample - https://stackblitz.com/edit/react-ugerva?file=index.js 

 

We have also logged a UG documentation to provide details about the default locale text. It will be refreshed in our live URL at the mid of October 2019. 

 

You can find the default locale text for various culture for Gantt in below link.  

Link –https://github.com/syncfusion/ej2-locale/tree/master/src 

  

  

Please let us know if any further queries.  

 

Regards, 

Gurunathan  

[Sebastian]

Thank you very much it has helped me a little, but with this solution I have not been able to change the days and months, they still come out in English.

[Gurunathan A]

Hi Sebastin, 

 

In our previous update we have not included localized text for all the key words in sample, we have updated the sample with all key words, and we have also formatted the number and date objects using loadCldr method. Please find the below code example. 

 

 

  import { L10n, setCulture, loadCldr } from '@syncfusion/ej2-base'; 

  import * as cagregorian from "./ca-gregorian.json"; 

  import * as numbers from "./numbers.json"; 

  loadCldr(cagregorian, numbers); 

  setCulture('es'); 

  L10n.load({ 

      'es': { 

          'gantt': { 

              //... 

              "days": "días", 

           }, 

       } 

   }); 

 

Please find the updated sample link and UG documentation link below. 

Sample - https://stackblitz.com/edit/react-ptckpw?file=index.js 

UG - https://ej2.syncfusion.com/react/documentation/common/internationalization/#cldr-data-dependencies 

Gantt Keywords - https://github.com/syncfusion/ej2-locale/blob/master/src/es.json 

 

Regards, 

Gurunathan