[React] Localization format not applies on timeAxis ticks when change locale at runtime

[chuckn0rris]

Forum post

Reproduced on very simple React app :

import "@bryntum/calendar/calendar.classic.css"; 
import React from 'react';

import { LocaleManager } from "@bryntum/calendar/calendar.umd.js";
import { BryntumCalendar } from "@bryntum/calendar-react";
import { Component, createRef } from 'react';
import BryntumCalendarNl from "@bryntum/calendar/locales/calendar.locale.Nl";
import BryntumCalendarRu from "@bryntum/calendar/locales/calendar.locale.Ru";

LocaleManager.registerLocale('Nl', { locale : BryntumCalendarNl });
LocaleManager.registerLocale('Ru', { locale : BryntumCalendarRu });

window.LocaleManager = LocaleManager;
LocaleManager.applyLocale('Nl');

class App extends Component {
  calendar = createRef(null);

  render() {
    const { calendar } = this;

    const calendarConfig = {
      style: "height: 100%",
      ref: calendar,
      weekStartDay: 1
    };

    return (
      <div className="App">
        <BryntumCalendar {...calendarConfig} />
      </div>
    );
  }
}

export default App;

Try in console:

LocaleManager.applyLocale('En')

See that time format hasn't been updated to AM/PM format. Try to refresh the view using month switch buttons or any other way, see that format has been applied.