Salesforce : Change Presetmanagers dateformat based on locale.

[rakshith.snps]

Hi, I am trying to change the preset managers date format based on salesforce locale setting.
currently, I'm only trying to do it for US, UK and Japan.

The time axis formats are successfully changing for japan and us but uk i get time axis error.

Sample code.

export const localeDateFormat = {
  'ja-JP': {
    dateFormat: 'YYYY/MM/DD',
    bottomDateFormat: 'MM/DD (ddd)',
  },
  'en-US': {
    dateFormat: 'MM/DD/YYYY',
    bottomDateFormat: 'MM/DD (ddd)',
  },
  'en-GB' : {
    dateFormat : 'DD/MM/YYYY',
    bottomDateFormat : 'MM/DD (ddd)'
  }
};

// inside the rendered call back in of lwc component.
// LOCALE is users locale in salesforce.

const currentLocaleName = bryntum.gantt.LocaleHelper.localeName;
const currentLocale = bryntum.gantt.LocaleHelper.locales[currentLocaleName];
const dateLocale = this._getDateFormat(LOCALE);
const mergedLocale = bryntum.gantt.LocaleHelper.mergeLocales(currentLocale, dateLocale);
bryntum.gantt.LocaleManager.applyLocale(LOCALE, mergedLocale);
bryntum.schedulerpro.LocaleManager.applyLocale(LOCALE, mergedLocale);
          

 _getDateFormat(locale) {
    const currentLocaleDateFormat = localeDateFormat[locale];

return {
    DateHelper: {
        formats: {
            L: (date) => {
                return bryntum.gantt.DateHelper.format(date, currentLocaleDateFormat.dateFormat);
            },
            ll: (date) => {
                return bryntum.gantt.DateHelper.format(date, currentLocaleDateFormat.dateFormat);
            },
        },
    },
    PresetManager: {
        secondAndMinute: {
            displayDateFormat: 'll LTS',
        },
        minuteAndHour: {
            topDateFormat: 'hA',
            displayDateFormat: 'll LST',
        },
        hourAndDay: {
            topDateFormat: currentLocaleDateFormat.bottomDateFormat,
            middleDateFormat: 'LST',
            displayDateFormat: 'll LST',
        },
        weekAndDay: {
            topDateFormat: currentLocaleDateFormat.dateFormat,
            bottomDateFormat: currentLocaleDateFormat.bottomDateFormat,
            displayDateFormat: 'll LST',
        },
        dayAndWeek: {
            topDateFormat: currentLocaleDateFormat.dateFormat,
            displayDateFormat: 'll LST',
        },
        weekAndDayLetter: {
            topDateFormat: currentLocaleDateFormat.dateFormat,
        },
    },
};
}

This is the error i get when i change the locale to United Kingdom

err.png (82.98 KiB) Viewed 327 times

do you have an idea why this might be happening ?

[alex.l]

Hi,

What exactly did you do to have that error? Step by step. Did you load en-GB locale? Are you sure it has all required lines of locale? How did you change initial locale to GB if you did? Are you sure the code of locale is correct and it didn't get undefined as localeDateFormat instead of correct config?

[rakshith.snps]

Hi Alex,

I will provide the latest code in our rendered callback which loads the EnGB locale file.
I am trying to extract datehelper and presetmanager of the bryntum locale which matches with salesforce users locale.
then I am creating a new locale by merging the extracted date locale and current bryntum locale and apply it.

renderedCallback() {
    if (this.bryntumInitialized) {
      return;
    }
    Promise.all([
      loadScript(this, SCHEDULERPRO + '/schedulerpro.lwc.module.min.js'),
      loadStyle(this, SCHEDULERPRO + '/schedulerpro.material.min.css'),
      //loadStyle(this, SCHEDULERPRO + '/schedulerpro.classic-dark.min.css'),
      loadScript(this, GANTT + '/gantt.lwc.module.js'),
      loadScript(this, SCHEDULERPRO + '/locales/schedulerpro.locale.EnGb.js'),
      loadScript(this, SCHEDULERPRO + '/locales/schedulerpro.locale.Ja.js'),
      loadStyle(this, GANTT + '/gantt.material.min.css'),
      //loadStyle(this, GANTT + '/gantt.classic-dark.min.css'),
      loadScript(this, chart + '/chart.umd.min.js'),
    ])
      .then(() => {
        this.bryntumInitialized = true;
        if (LANGUAGE === 'ja') {
          const locale = bryntum.schedulerpro.LocaleHelper.mergeLocales(
            JAPANESE.JAPANESE_CORE,
            JAPANESE.JAPANESE_GRID,
            JAPANESE.JAPANESE_GANTT,
            JAPANESE.JAPANESE_SCHEDULER,
            JAPANESE.JAPANESE_SCHEDULERPRO,
          );
          bryntum.gantt.LocaleManager.registerLocale('Ja', {
            desc: 'Japanese',
            locale: locale,
          });
          bryntum.gantt.LocaleManager.applyLocale('Ja');

      bryntum.schedulerpro.LocaleManager.registerLocale('Ja', {
        desc: 'Japanese',
        locale: locale,
      });
      bryntum.schedulerpro.LocaleManager.applyLocale('Ja');
    }

    const bryntumSalesForceLocaleMap = {
      'en-US' : 'En',
      'en-GB' : 'EnGb',
      'ja-JP' : 'Ja'
    }

    const locale = bryntum.gantt.LocaleHelper.locales[bryntumSalesForceLocaleMap[LOCALE]];
    const dateLocale = {
      DateHelper : locale.DateHelper,
      PresetManager : locale.PresetManager
    }

    const currentLocaleName = bryntum.gantt.LocaleHelper.localeName;
    const currentLocale = bryntum.gantt.LocaleHelper.locales[currentLocaleName];
    const mergedLocale = bryntum.gantt.LocaleHelper.mergeLocales(currentLocale, dateLocale);
    bryntum.gantt.LocaleManager.applyLocale(bryntumSalesForceLocaleMap[LOCALE], mergedLocale);
    bryntum.schedulerpro.LocaleManager.applyLocale(bryntumSalesForceLocaleMap[LOCALE], mergedLocale);

    const ChartJsLineChart = ChartJsLineChartMixin(bryntum.schedulerpro.Widget, window.Chart);
    ChartJsLineChart.initClass();
    const DomHelperOverride = DomHelperOverrideMixin(bryntum.gantt.DomHelper, bryntum.gantt.Rectangle);
    bryntum.gantt.Override.apply(DomHelperOverride);
    this.loadData();
  })
  .catch((e) => {
    console.log(e);
  });
  }

[alex.l]

Hi,

I believe you need to check locales itself. Possibly, locale you applied does not have all required properties. Please compare objects. Simply test it without overwrite, if it worked, it definitely problem of config you used.