RadCalendar Localization

RadCalendar uses the default locale of the operating system it is run on. If you want to explicitly change the locale of the component, you can do so by using the locale property. The locale property accepts string values representing language tags as per the BCP-27 standard.

Defining Locales on RadCalendar

The following snippet demonstrates how a locale can be set in the Vue instance:

export default {
  name: 'Localization',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <GridLayout
      orientation="vertical" rows="*, auto">
      <RadCalendar ref="calendar" :locale="locale"></RadCalendar>
      <StackLayout orientation="horizontal" row="1" class="m-10">
        <Button text="de-DE" @tap="changeLocale('de-DE')"></Button>
        <Button text="bg-BG" @tap="changeLocale('bg-BG')"></Button>
        <Button text="en-UK" @tap="changeLocale('en-UK')"></Button>
        <Button text="fr-FR" @tap="changeLocale('fr-FR')"></Button>
      </StackLayout>
    </GridLayout>
  </Page>
  `,
  data () {
    return {
      locale: 'en-EN',
      title: description
    };
  },
  methods: {
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    },
    changeLocale(locale: String) {
      this.locale = locale;
    },
  }
};

The following two screenshots demonstrate how RadCalendar looks like when a ru-RU is defined as a locale: