Hi,
We are trying to localize the scheduler. Added custom localization for spanish language and registered the custom locale as follows:
const browserLocale = 'es-mx';
const localeLanguage = 'Spanish';
LocaleManager.registerLocale('CustomLocale', {
desc: localeLanguage,
locale: {
localeName: 'CustomLocale',
localeDesc: localeLanguage,
Widget: {
todayText: 'Hoy',
weekText: 'Semana',
monthText: 'Mes',
dayText: 'Día',
searchPlaceholder: 'Buscar...'
},
Column:{
resource: 'Recurso'
},
Scheduler: {
noRows: 'No hay coincidencias'
},
DateHelper: {
locale: browserLocale
},
EventDrag: {
noDropPastDate: 'No se puede mover'
},
}
});
LocaleManager.applyLocale('CustomLocale');
Able to localize column and other texts in scheduler. In header toolbar used combo widget, the localization is not being applied here. Can you specify the key used to localize combo in tbar.
Also while drag and drop need to localize the error message in tooltip what is the key for this localization?
Is it mentioned anywhere in the documentation the key names used for different segments of localization?
Here is the react component for scheduler
<BryntumScheduler
ref = {scheduler}
autoHeight = {true}
zoomOnMouseWheel={false}
zoomOnTimeAxisDoubleClick={false}
viewPreset = {getViewPreset(timelineView)}
tbar = {
[
{
type: 'combo',
value: 'monthAndYear',
editable: false,
cls: 'select-view',
listCls: 'list-items',
listeners: { change: viewPresetHandler },
items: [{
value: 'monthAndYear',
text: 'L{monthText}'
},
{
value: 'weekAndDay',
text: 'L{weekText}'
},
{
value: 'dayAndWeek',
text: 'L{dayText}'
}]
},
{
type: 'dateField',
editable: false,
cls: 'date-field',
onChange ({ value, userAction }) {
if(hasSchedulerInstance() && userAction) {
limitMonthRange(value);
getSchedulerInstance().scrollToDate(value, {
block: getViewPosition()
});
checkForDataFetch();
}
},
listeners: {
trigger: onDatePickerLoad
},
ref: 'selectDate'
},
{
type: 'button',
text: 'L{todayText}',
onClick () {
const today = DateHelper.clearTime(new Date());
if(hasSchedulerInstance()) {
limitMonthRange(today);
getSchedulerInstance().scrollToDate(today, {
block: getViewPosition()
});
checkForDataFetch();
}
},
cls: 'btn-today'
},
{
type: 'button',
icon: 'b-fa-angle-left',
cls: 'btn-prev',
onClick () {
if(hasSchedulerInstance()) {
getSchedulerInstance().shiftPrevious();
checkForDataFetch(true);
}
}
},
{
type: 'button',
icon: 'b-fa-angle-right',
cls: 'btn-next',
onClick () {
if(hasSchedulerInstance()) {
getSchedulerInstance().shiftNext();
checkForDataFetch(true);
}
}
},
'->',
{
type: 'textfield',
ref: 'filterByName',
placeholder: 'L{searchPlaceholder}',
cls: 'input-search',
clearable: true,
keyStrokeChangeDelay: 100,
triggers: {
filter: {
align: 'start',
cls: 'b-fa b-fa-search'
}
},
listeners: { change: searchHandler }
}
]
}
resources = {data.resources}
timeRanges={data.timeRanges}
resourceTimeRangesFeature={true}
resourceTimeRangeStore={resourceTimeRangeStore}
startDate = {startDate}
visibleDate = {new Date()}
columns = {getColumnsList(getLodash(jsonDef, 'columns', []))}
filterBarFeature = {true} // to enable search on columns
listeners = {{
async beforeEventDropFinalize ({ context }) {
// update the task with the dropped dates and resource id
const task = {
...context.eventRecords[FIRST_INDEX].data,
startDate: context.startDate,
endDate: context.endDate,
resourceId: context.newResource.id
};
// check again if the date is less than today
if(moment().isBefore(task.startDate, 'second')) {
// show progress bar
showLoader();
const response = await submitTaskDetails(task);
if(response === null) {
setShowAlert(true);
setErrorMessage(ErrorMessageForUpdateWorkflow);
} else {
refreshScheduler();
}
if(props.dragCompleted) {
props?.dragCompleted(task);
}
// hide progress bar
hideLoader();
}
}
}}
events = {data.events}
eventStyle = {'colored'}
eventLayout = {'stack'}
eventBodyTemplate = {(data) => getEventTemplate(data)}
eventRenderer = {(eventRecord) => eventRenderer(eventRecord)}
// disable contextmenu on right click of events
eventMenuFeature = {false}
eventEditFeature = {{
disabled: true // disable event edit popup on double click of events
}}
eventDragCreateFeature = {{
disabled: true // disable event creation on drag
}}
eventDragFeature = {{
disabled: !jsonDef?.dragAllow,
validatorFn ({ startDate }) {
if(moment().isAfter(startDate, 'second')) {
return {
valid: false,
message: 'L{noDropPastDate}' // ErrorMessageForPastDate
};
}
return {
valid: true
};
}
}}
eventResizeFeature = {{
disabled: true
}}
stripeFeature={true}
timeRangesFeature = {{
showCurrentTimeLine: true,
showHeaderElements: true,
enableResizing: true
}}
/>