Error when I define a new Locale as pt-BR
When I try to set a "pt-BR" locale (imported from "@syncfusion/ej2-locale/src/pt-BR.json") on my schedule, the component broke.
I'm loading this using the L10n before the component and passing it throw the 'ScheduleComponent'.
Hi Marcosnto,
We suspect that the locale sample is not proper on your
end. Therefore, we have created a sample in React Schedule using the 'pt'
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
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 snip. These files are copied from
the CLDR-Data package installed in step 1.
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
|
const Views = () => { const onCultureChange = (culture) => { setCulture(culture); }; useEffect(() => { updateSampleSection(); }, []); const scheduleObj = useRef(null); const data = extend([], dataSource.zooEventsData, null, true);
const localeData = require('./locale.json');
loadCldr( require('./cldr-data/main/pt/ca-gregorian.json'), require('./cldr-data/main/pt/numbers.json'), require('./cldr-data/main/pt/timeZoneNames.json'), require('./cldr-data/main/pt/numbers.json'), );
L10n.load(localeData);
return ( <div className="schedule-control-section"> <div className="col-lg-9 control-section"> <div className="control-wrapper"> <ScheduleComponent width="100%" height="650px" cssClass='schedule-date-header-template' ref={scheduleObj} selectedDate={new Date(2021, 1, 15)} eventSettings={{ dataSource: data }} locale="pt" > <ViewsDirective> <ViewDirective option="Day" /> <ViewDirective option="Week" /> <ViewDirective option="WorkWeek" /> <ViewDirective option="Month" /> <ViewDirective option="Agenda" /> </ViewsDirective> <Inject services={[Day, Week, WorkWeek, Month, Resize, DragAndDrop, Agenda]} /> </ScheduleComponent> </div> </div> </div> ); }; export default Views;
|
4. Set the locale property to the Schedule
|
return ( <div className="schedule-control-section"> <div className="col-lg-9 control-section"> <div className="control-wrapper"> <ScheduleComponent width="100%" height="650px" cssClass='schedule-date-header-template' ref={scheduleObj} selectedDate={new Date(2021, 1, 15)} eventSettings={{ dataSource: data }} locale="pt" > <ViewsDirective> <ViewDirective option="Day" /> <ViewDirective option="Week" /> <ViewDirective option="WorkWeek" /> <ViewDirective option="Month" /> <ViewDirective option="Agenda" /> </ViewsDirective> <Inject services={[Day, Week, WorkWeek, Month, Resize, DragAndDrop, Agenda]} /> </ScheduleComponent> </div> </div> </div> ); |
Sample: React-Scheduler-Localization
(forked) - StackBlitz
Please don't hesitate to reach out if you have any further questions or concerns.
Regards,
Ashok
