What is the step by step to translate the entire Scheduler into Spanish? I am using NextJS 13
Hi Juan Sebastian,
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. Import the required CLDR data files and locale words as shown below and load them using loadCldr and load method of L10n. (In the below example we used fr-CH culture files).
You can find the localized word for the different cultures from the below repository.
Sample: https://stackblitz.com/edit/ej2-react-js-schedule-spanish-es-locale?file=index.js
ej2-locale: https://github.com/syncfusion/ej2-locale
[app.js]
|
import { extend, loadCldr, L10n, setCulture } 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);
L10n.load({ es: { "schedule": { "day": "Día", "week": "Semana", "workWeek": "Semana laboral", "month": "Mes", "year": "Año", "agenda": "Agenda", "weekAgenda": "Agenda de la semana", "workWeekAgenda": "Agenda de la semana laboral", "monthAgenda": "Agenda del mes", "today": "Hoy", "noEvents": "No hay eventos", "emptyContainer": "No hay eventos programados para este día.", "allDay": "Todo el dia", "start": "Inicio", "end": "Fin", "more": "más", "close": "Cerrar", "cancel": "Cancelar", "noTitle": "(Sin título)", "delete": "Borrar", "deleteEvent": "Este evento", "deleteMultipleEvent": "Eliminar Varios eventos", "selectedItems": "Elementos seleccionados", "deleteSeries": "Serie completa", "edit": "Editar", "editSeries": "Serie completa", "editEvent": "Este evento", "createEvent": "Crear", "subject": "Asunto", "addTitle": "Añadir título", "moreDetails": "Más detalles", "save": "Guardar", "editContent": "¿Cómo le gustaría cambiar la cita en la serie?", "deleteContent": "¿Está seguro de que desea eliminar este evento?", "deleteMultipleContent": "¿Estás seguro de que deseas eliminar los eventos seleccionados?", "newEvent": "Nuevo evento", "title": "Título", "location": "Ubicación", "description": "Descripción", "timezone": "Zona horaria", "startTimezone": "Iniciar zona horaria", "endTimezone": "Fin de la zona horaria", "repeat": "Repetir", "saveButton": "Guardar", "cancelButton": "Cancelar", "deleteButton": "Eliminar", "recurrence": "Repetición", "wrongPattern": "El patrón de recurrencia no es válido.", "seriesChangeAlert": "¿Desea cancelar los cambios realizados en instancias específicas de esta serie y volver a compararlos con toda la serie?", "createError": "La duración del evento debe ser más corta que la frecuencia con la que ocurre. Acorte la duración o cambie el patrón de periodicidad en el editor de eventos de periodicidad.", "sameDayAlert": "Dos ocurrencias del mismo evento no pueden ocurrir en el mismo día.", "occurenceAlert": "No se puede reprogramar una aparición de la cita periódica si omite una aparición posterior de la misma cita.", "editRecurrence": "Editar periodicidad", "repeats": "Repite", "alert": "Alerta", "startEndError": "La fecha de finalización seleccionada se produce antes de la fecha de inicio.", "invalidDateError": "El valor de la fecha ingresada no es válido.", "blockAlert": "Los eventos no se pueden programar dentro del rango de tiempo bloqueado.", "ok": "De acuerdo", "yes": "si", "no": "No", "occurrence": "Ocurrencia", "series": "Serie", "previous": "Anterior", "next": "próximo", "timelineDay": "Día de la línea de tiempo", "timelineWeek": "Semana de la línea de tiempo", "timelineWorkWeek": "Cronograma Semana Laboral", "timelineMonth": "Mes de la línea de tiempo", "timelineYear": "Cronología Año", "editFollowingEvent": "Siguientes eventos", "deleteTitle": "Eliminar evento", "editTitle": "Editar evento", "beginFrom": "Comenzar desde", "endAt": "Fin en", "expandAllDaySection": "Expandir la sección de todo el día", "collapseAllDaySection": "Contraer sección de todo el día", "searchTimezone": "Zona horaria de búsqueda", "noRecords": "No se encontraron registros" }, "recurrenceeditor": { "none": "Ninguna", "daily": "Diario", "weekly": "Semanal", "monthly": "Mensual", "month": "Mes", "yearly": "Anual", "never": "Nunca", "until": "Hasta", "count": "Contar", "first": "Primero", "second": "Segundo", "third": "Tercero", "fourth": "Cuarto", "last": "Último", "repeat": "Repetir", "repeatEvery": "Repite cada", "on": "Repetir en", "end": "Final", "onDay": "Día", "days": "Día(s)", "weeks": "Semana(s)", "months": "Mes(es)", "years": "Año(s)", "every": "cada", "summaryTimes": "vece(s)", "summaryOn": "en", "summaryUntil": "hasta", "summaryRepeat": "Repite", "summaryDay": "día(s)", "summaryWeek": "semana(s)", "summaryMonth": "mes(es)", "summaryYear": "año(s)", "monthWeek": "Mes Semana", "monthPosition": "Posición del mes", "monthExpander": "Expansor de mes", "yearExpander": "Expansor de año", "repeatInterval": "Intervalo de repetición" }, "calendar": { "today": "Hoy" }, } }); |
3. Finally set up the locale property to the Schedule as shown below.
[app.js]
|
function App() { React.useEffect(() => { return (<div className='schedule-control-section'> <div className='col-lg-12 control-section'> <ScheduleComponent ref={schedule => scheduleObj = schedule} width='100%' height='650px' locale='es' ></ScheduleComponent> </div> </div>); } |
Regards,
Swathi Ravi
