Localization is not working in schedule component.
Hi ThreeGo,
We suspect that the locale is not properly prepared. Therefore, we have created a sample in Vue Schedule using the 'ko' locale. The attached code snippet and the following example demonstrate the solution. Please give it a try, and feel free to reach out if you need further assistance.
We require the below files to localize the Schedule.
- ca-gregorian.json
- numbers.json
- timeZoneNames.json
- numberingSystems.json
Example:
1. You can get the above files by Installing the CLDR-Data package by using the below command.
>> npm install cldr-data –save
Once the installation is completed you can find the files required to localize the Schedule for each culture from the directory as shown below.
You can get ca-gregorian.json, numbers.json, and timeZoneNames.json files from the directory as shown below.
You can get the numberingSystems.json file from the directory as shown below. This file is common for all cultures.
"2. Import the required CLDR data files (ca-gregorian.json, numberingSystems.json, numbers.json, and timeZoneNames.json) and load them using the loadCldr method. You can find the culture files in our shared sample, as shown in the below snippet. These files are copied from the CLDR-Data package installed in step 1."
[app.vue]
|
|
[locale. Json]
3. Load the locale words as shown below using the load method of L10n. You can find the localized word for the different cultures from the below repository.
ej2-local: https://github.com/syncfusion/ej2-locale
The attached code snippet and the following example demonstrate the solution.
Please give it a try, and feel free to reach out if you need further
assistance.
Sample: schedule-locale-ko-sample
(forked) - StackBlitz
Regards,
Ashok
I followed the example you sent and it still doesn't work.
To verify that the cldr data is loaded, I did the following:
<ejs-schedule @actionBegin="actionBegin">
import { cldrData } from '@syncfusion/ej2-base';
const actionBegin = () => {
console.log(cldrData);
}
It was confirmed to be loaded properly.
However, in the method where the error occurs, the cldr data is not loaded.
<schedule.js>
import { EventHandler, Browser, Internationalization, getDefaultDateObject, cldrData, L10n } from '@syncfusion/ej2-base';
Schedule.prototype.getDayNames = function (type) {
var culShortNames = [];
var cldrObj;
var nameSpace = '';
if (isNullOrUndefined(this.locale) || this.locale === 'en' || this.locale === 'en-US') {
nameSpace = 'days.stand-alone.';
cldrObj = (getValue(nameSpace + type, getDefaultDateObject(this.getCalendarMode())));
}
else {
nameSpace = 'main.' + '' + this.locale + '.dates.calendars.' + this.getCalendarMode() + '.days.format.' + type;
cldrObj = (getValue(nameSpace, cldrData));
}
for (var _i = 0, _a = Object.keys(cldrObj); _i < _a.length; _i++) {
var obj = _a[_i];
culShortNames.push(getValue(obj, cldrObj));
}
return culShortNames;
};
Even though the getDayNames method occurs later than actionBegin, there is no data in cldrData.
I really don't know the cause. Do you have any guesses?
