[JS ES5] Translate inner Calendar to portuguese (Brazil)

[Lucas]

Hi, I want to translate the calendar inside the component Query Builder using date column. 

I tried using the JSON contained in this repository (https://github.com/syncfusion/ej2-locale) using this code:

ej.base.setCulture('ar-AE');
var ajax = new ej.base.Ajax('/src/pt.json', 'GET', true);
ajax.onSuccess = function (value) {
        //Assigning locale text value for Essential JS 2 components
        ej.base.L10n.load(value);
    };
ajax.send();

When I select the date column I got an error:

I want to translate the entire calendar component and change date format to dd/MM/yyyy (pt-BR). If is necessary to translate this can you help me how to use the CLDR (pt-BR) using JS ES5 to syncfusion components?

Thank you.

[Saranya Dhayalan]

Hi Lucas, 

 

Thank you for contacting Syncfusion support 

 

We have checked your reported issue and suspect that cldr-data is not loaded in your application. So, we achieved the cldr-data using XMLHttpRequest in your application. We have created a XMLHttpRequest and get the required culture in cldr-data as response and pass that file stream into the loader method. In this sample pt-Br culture mentioned as pt.  

We have created a sample for loading ‘cldr-data’ and please refer the below code snippet and sample link, 

 

Please find the below steps to use cldr-data, 

 

1. Host the ‘cldr-data’ file in IIS to get the file using XMLHttpRequest. 

2. Use loadCldr to load the ‘cldr-data’ file as like below 

 

JS 

  

loadCultureFiles('pt'); 

ej.base.setCulture('pt'); 

function loadCultureFiles(name) { 

var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json']; 

var loader = ej.base.loadCldr; 

var loadCulture = function (prop) { 

var request = new XMLHttpRequest(); 

request.responseType = "json"; 

request.open("GET", "https://localhost:44371/cldr-data/main/pt/" + files[prop], true); 

request.onload = function () { 

if (this.readyState == 4 && this.status == 200) { 

loader(request.response); 

} 

}; 

request.send(); 

}; 

for (var prop = 0; prop < files.length; prop++) { 

loadCulture(prop); 

} 

} 

  

  

Sample Link: https://www.syncfusion.com/downloads/support/forum/148465/ze/WebApplication-26084076 

  

Please get back to us with more information if we misunderstood your requirement. 

  

Regards, 

Saranya D 

[Rodrigo]

Tried to apply this, and worked great in Firefox.

But, in Chrome, the timeline day view won't work, timeline week and month works.

The message from util.js is:

Uncaught Format options or type given must be invalid

Error: Format options or type given must be invalid

[Lucas]

Thank you, worked perfectly!

[Sangeetha Priya Murugan]

 

Hi Rodrigo, 

 

Thank you for your update. 

 

We have checked your reported issue with our previously updated sample and the Date picker working properly in our end without throwing an error. For your convenience, we have prepared the video demonstration of this issue in chrome browser. Please find the link below. 

 

Video Link: https://www.syncfusion.com/downloads/support/forum/148465/ze/QBVIDEO-2132711778 

 

Before that we would like to let you know the following details. 

 

1. Please share the details, if you have apply any formats for date values. 

2. Provide your Essential studio product version and chrome browser version related details. 

3. If you have done any customization in sample level, please share details regarding this. 

4. If possible please replicate your issue in the previously provided sample and send back to us. 

 

Could you please check the above video and get back to us with the above requested information, based on that we will check and provide you a better solution quickly. 

 

Regards, 

Sangeetha M 

[Sangeetha Priya Murugan]

Hi Lucas, 

 

Thanks for your update. 

 

We are happy to hear that your issue has been resolved. Kindly get back to us if you need any further assistance. 

 

Regards, 

Sangeetha Priya M