Premium support for our pure JavaScript UI components


Post by sudhanshu.jain »

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
          }}
        />
        

Post by pmiklashevich »

Please follow this guide: https://www.bryntum.com/docs/scheduler/#Scheduler/guides/customization/localization.md#create-a-custom-locale
You need to localize all properties provided for Core, Grid, and Scheduler classes. Please copy Scheduler/examples/localization/locales/custom.locale.De.js and provide translation for all properties.

We have a ticket to describe all properties: https://github.com/bryntum/support/issues/86

Pavlo Miklashevych
Sr. Frontend Developer


Post by sudhanshu.jain »

Hi,

I had gone through the documentation for localization and able to add new locale. I am able to localize all the properties. But my question is: i have a combo widget in tbar, able to localize the lable is there any way to localize the text in the items of the combo widget?

Here is the combo widget and the localization added for it:

{
                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}'
                }]
              }
              
Combo: {
      weekText: 'Semana',
      monthText: 'Mes',
      dayText: 'Día',
    },

Image

Attachments
Screenshot 2021-05-17 at 2.40.15 PM.png
Screenshot 2021-05-17 at 2.40.15 PM.png (87.53 KiB) Viewed 979 times

Post by pmiklashevich »

There is a bug, ticket here: https://github.com/bryntum/support/issues/2886
Please use https://www.bryntum.com/docs/scheduler/#Core/widget/Combo#function-L function to localize the text manually. Call it from Combo instance in https://www.bryntum.com/docs/scheduler/#Core/widget/Combo#config-displayValueRenderer and https://www.bryntum.com/docs/scheduler/#Core/widget/Combo#config-listItemTpl

new Scheduler({
    tbar : [
        {
            type  : 'combo',
            label : 'L{testLabel}',
            displayValueRenderer(record, combo) {
                // `this` - Combo
                return record ? this.L(record.text) : '';
            },
            listItemTpl({ text }) {
                // `this` - List
                // `this.owner` - Combo
                return this.owner.L(text);
            },
            items : [{
                value : 'monthAndYear',
                text  : 'L{monthText}'
            },
            {
                value : 'weekAndDay',
                text  : 'L{weekText}'
            },
            {
                value : 'dayAndWeek',
                text  : 'L{dayText}'
            }]
        }
    ],

To update the displayed selected value, you can add a hook to locale event:

// Add listener to update content when locale changes
LocaleManager.on({
    locale() {
    	// hack to update displayed selected value
        const value = scheduler.widgetMap.myCombo.value;
        scheduler.widgetMap.myCombo.value = null;
        scheduler.widgetMap.myCombo.value = value;
    }
});

const scheduler = new Scheduler({
    tbar : [
        {
            type  : 'combo',
            ref   : 'myCombo',

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply