How to change the language of the Schedule component to Vietnamese?
Hi Nam
Nguyen,
You can update the higher node version like (18.X.X) or (20.X.X). Also, you can globalize the Schedule with the other culture by following the steps.
UG: https://ej2.syncfusion.com/react/documentation/schedule/localization
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. Now use the loadCultureFiles method to load the culture-specific CLDR JSON data using Ajax as shown in the below code snippet.
[index.js]
|
import { extend, loadCldr, L10n, Internationalization } from "@syncfusion/ej2-base"; import * as numberingSystems from "./culture-files/numberingSystems.json"; import * as gregorian from "./culture-files/ca-gregorian.json"; import * as numbers from "./culture-files/numbers.json"; import * as timeZoneNames from "./culture-files/timeZoneNames.json";
loadCldr(numberingSystems, gregorian, numbers, timeZoneNames); |
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
[index.js]
|
loadCldr(numberingSystems, gregorian, numbers, timeZoneNames);
L10n.load({ vi: { "schedule": { "day": "ngày", "week": "Tuần", "workWeek": "Tuần làm việc", "month": "tháng", "year": "Năm", "agenda": "Chương trình nghị sự", "weekAgenda": "Chương trình nghị sự tuần", "workWeekAgenda": "Chương trình làm việc trong tuần", "monthAgenda": "Chương trình nghị sự tháng", "today": "Hôm nay", "noEvents": "Không có sự kiện", "emptyContainer": "Không có sự kiện theo lịch trình vào ngày này.", "allDay": "Cả ngày", "start": "Khởi đầu", "end": "Kết thúc", "more": "hơn", "close": "Đóng", "cancel": "Hủy bỏ", "noTitle": "(Không tiêu đề)", "delete": "Xóa bỏ", "deleteEvent": "Sự kiện này", "deleteMultipleEvent": "Xóa nhiều sự kiện", "selectedItems": "Các mục được chọn", "deleteSeries": "Toàn bộ loạt", "edit": "Biên tập", "editSeries": "Toàn bộ loạt", "editEvent": "Sự kiện này", "createEvent": "Tạo nên", "subject": "Môn học", "addTitle": "Thêm tiêu đề", "moreDetails": "Thêm chi tiết", "moreEvents": "Thêm sự kiện", "save": "Tiết kiệm", "editContent": "Bạn muốn thay đổi cuộc hẹn trong chuỗi như thế nào?", "deleteContent": "Bạn có chắc chắn muốn xóa sự kiện này?", "deleteMultipleContent": "Bạn có chắc chắn muốn xóa các sự kiện đã chọn?", "newEvent": "Sự kiện mới", "title": "Tiêu đề", "location": "Vị trí", "description": "Sự miêu tả", "timezone": "Múi giờ", "startTimezone": "Bắt đầu múi giờ", "endTimezone": "Múi giờ kết thúc", "repeat": "Nói lại", "saveButton": "Tiết kiệm", "cancelButton": "Hủy bỏ", "deleteButton": "Xóa bỏ", "recurrence": "Sự tái xuất", "wrongPattern": "Mẫu tái phát không hợp lệ.", "seriesChangeAlert": "Bạn có muốn hủy các thay đổi được thực hiện cho các phiên bản cụ thể của chuỗi này và khớp lại với toàn bộ chuỗi không?", "createError": "Thời gian của sự kiện phải ngắn hơn tần suất xảy ra. Rút ngắn thời lượng hoặc thay đổi mẫu lặp lại trong trình chỉnh sửa sự kiện lặp lại.", "sameDayAlert": "Hai lần xuất hiện của cùng một sự kiện không thể xảy ra trong cùng một ngày.", "occurenceAlert": "Không thể lên lịch lại lần xuất hiện của cuộc hẹn định kỳ nếu cuộc hẹn đó bỏ qua lần xuất hiện sau của cùng một cuộc hẹn.", "editRecurrence": "Chỉnh sửa tái phát", "repeats": "Lặp lại", "alert": "Thông báo", "startEndError": "Ngày kết thúc được chọn xảy ra trước ngày bắt đầu.", "invalidDateError": "Giá trị ngày nhập không hợp lệ.", "blockAlert": "Sự kiện không thể được lên lịch trong phạm vi thời gian bị chặn.", "ok": "Đồng ý", "of": "của", "yes": "Đúng", "no": "Không", "occurrence": "Tần suất xảy ra", "series": "Loạt", "previous": "Trước", "next": "Kế tiếp", "timelineDay": "Ngày giờ", "timelineWeek": "Tuần thời gian", "timelineWorkWeek": "Tuần làm việc", "timelineMonth": "Mốc thời gian", "timelineYear": "Mốc thời gian", "editFollowingEvent": "Sự kiện sau", "deleteTitle": "Xóa sự kiện", "editTitle": "Chỉnh sửa sự kiện", "beginFrom": "Bắt đầu từ", "endAt": "Kết thúc tại", "expandAllDaySection": "Mở rộng phần cả ngày", "collapseAllDaySection": "Thu gọn-cả ngày-phần", "searchTimezone": "Múi giờ tìm kiếm", "noRecords": "Không có dữ liệu được tìm thấy" }, "recurrenceeditor": { "none": "không ai", "daily": "hằng ngày", "weekly": "Hàng tuần", "monthly": "Hàng tháng", "month": "tháng", "yearly": "Hàng năm", "never": "Không bao giờ", "until": "Cho đến khi", "count": "Đếm", "first": "Đầu tiên", "second": "Thứ hai", "third": "Ngày thứ ba", "fourth": "Thứ tư", "last": "Cuối cùng", "repeat": "Nói lại", "repeatEvery": "Lặp lại mỗi", "on": "Lặp lại trên", "end": "Kết thúc", "onDay": "ngày", "days": "Ngày", "weeks": "Tuần", "months": "Tháng)", "years": "Năm", "every": "mỗi", "summaryTimes": "thời gian", "summaryOn": "trên", "summaryUntil": "cho đến khi", "summaryRepeat": "Lặp lại", "summaryDay": "ngày", "summaryWeek": "tuần", "summaryMonth": "tháng)", "summaryYear": "năm", "monthWeek": "Tháng tuần", "monthPosition": "Vị trí tháng", "monthExpander": "Mở rộng tháng", "yearExpander": "Mở rộng năm", "repeatInterval": "Khoảng lặp lại" }, "calendar": { "today": "Hôm nay" } } }); |
4. Set the locale property to the Schedule.
[index.js]
|
<ScheduleComponent height='650px' ref={scheduleObj} selectedDate={scheduleData} eventSettings={{ dataSource: data }} locale="vi"> <ViewsDirective> <ViewDirective option='Day'/> <ViewDirective option='Week'/> <ViewDirective option='WorkWeek'/> <ViewDirective option='Month'/> <ViewDirective option='Agenda'/> </ViewsDirective> <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]}/> </ScheduleComponent> |
Sample link: https://stackblitz.com/edit/vietnamese-culture-94vvchxn?file=index.js
Output Screenshot:
Don't hesitate to get in touch if you require further help or more information.
Regards,
Vijay
