[REACT] Few localization issues

[SemFA]

Hello,

We've come across a few localization issues. I've attached a sample projectthat sets the locale to Dutch. There you can see some of our issues.

bryntum-example.zip

To run, simply run `yarn install && yarn start`. It will run a simple expressjs server for crudManager and a react app

(225.95 KiB) Downloaded 58 times

Issue 1: Some texts are missing translations, for example, "All day" in the agenda view. You can check the example.

Issue 2: When setting a locale, the time axis doesn't update the locale format until the calendar refreshes, you can do this by simply changing the date.

[alex.l]

Hi SemFA,

Issue 1: Some texts are missing translations, for example, "All day" in the agenda view. You can check the example.

Reproduced, here is a ticket: https://github.com/bryntum/support/issues/4011

Issue 2: When setting a locale, the time axis doesn't update the locale format until the calendar refreshes,

How can I reproduce this? I see it worked in our online example https://bryntum.com/examples/calendar/basic/
And I don't see any button to do it in your app.

[SemFA]

Hi SemFA,

Issue 1: Some texts are missing translations, for example, "All day" in the agenda view. You can check the example.

Reproduced, here is a ticket: https://github.com/bryntum/support/issues/4011

Issue 2: When setting a locale, the time axis doesn't update the locale format until the calendar refreshes,

How can I reproduce this? I see it worked in our online example https://bryntum.com/examples/calendar/basic/
And I don't see any button to do it in your app.

issue 2 only seems to occur when you load the calendar with a certain locale. The online example works because when you change the locale to dutch it's already loaded. If you can set your locale before loading the calendar it should reproduce the problem as it does in my example that I've uploaded.

I've added a GIF that shows the problem.

2022-01-13 10.09.21.gif (638.91 KiB) Viewed 581 times

[alex.l]

I reproduced the issue with runtime locale switch and only using your way to create an App (without Fragment).
Thank you for your report, here is a ticket: https://github.com/bryntum/support/issues/4014

But all works for initial localization, you just need to tune it a bit:

import BryntumGridNl from "@bryntum/grid/locales/grid.locale.Nl";
import BryntumGridRu from "@bryntum/grid/locales/grid.locale.Ru";
import BryntumCalendarNl from "@bryntum/calendar/locales/calendar.locale.Nl";
import BryntumCalendarRu from "@bryntum/calendar/locales/calendar.locale.Ru";

const bryntumLocales = {
    nl_NL: BryntumLocaleHelper.mergeLocales(BryntumGridNl, BryntumCalendarNl),
    ru_RU: BryntumLocaleHelper.mergeLocales(BryntumGridRu, BryntumCalendarRu)
};

LocaleManager.registerLocale('Nl', { locale : bryntumLocales.nl_NL });
LocaleManager.registerLocale('Ru', { locale : bryntumLocales.ru_RU });

LocaleManager.applyLocale('Nl');

class App extends Component {
// ...

Here is a guide https://bryntum.com/docs/calendar/guide/Calendar/customization/localization#locale
We also have React Localization example for Scheduler, you can find it in your SchedulerPro's examples. Calendar uses the same approach.

[SemFA]

I reproduced the issue with runtime locale switch and only using your way to create an App (without Fragment).
Thank you for your report, here is a ticket: https://github.com/bryntum/support/issues/4014

But all works for initial localization, you just need to tune it a bit:

import BryntumGridNl from "@bryntum/grid/locales/grid.locale.Nl";
import BryntumGridRu from "@bryntum/grid/locales/grid.locale.Ru";
import BryntumCalendarNl from "@bryntum/calendar/locales/calendar.locale.Nl";
import BryntumCalendarRu from "@bryntum/calendar/locales/calendar.locale.Ru";

const bryntumLocales = {
    nl_NL: BryntumLocaleHelper.mergeLocales(BryntumGridNl, BryntumCalendarNl),
    ru_RU: BryntumLocaleHelper.mergeLocales(BryntumGridRu, BryntumCalendarRu)
};

LocaleManager.registerLocale('Nl', { locale : bryntumLocales.nl_NL });
LocaleManager.registerLocale('Ru', { locale : bryntumLocales.ru_RU });

LocaleManager.applyLocale('Nl');

class App extends Component {
// ...

Here is a guide https://bryntum.com/docs/calendar/guide/Calendar/customization/localization#locale
We also have React Localization example for Scheduler, you can find it in your SchedulerPro's examples. Calendar uses the same approach.

Thank you, we've incorporated the scheduler-pro method. This seems to work correctly!