---
title: "Angular Calendar Localization Example | Mobiscroll"
component: "Calendar"
framework: "Angular"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/angular/calendar/localization"
---

# Localization - Angular Calendar demo

Localize a Angular date picker across 37 languages — configure regional date/time formats, RTL layout, and button labels, with manual overrides.

- [Live demo](https://demo.mobiscroll.com/angular/calendar/localization)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/datepicker/calendar/localization)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/calendar/localization.md), [jQuery](https://demo.mobiscroll.com/jquery/calendar/localization.md), [React](https://demo.mobiscroll.com/react/calendar/localization.md), [Vue](https://demo.mobiscroll.com/vue/calendar/localization.md)

## Description

All components are fully localized. In case of the date picker this covers date and time format, button copy, rtl and more. You can see how each example shows up by clicking on the small flag icon or checking the examples below.

**All settings can be manually overridden** [See what options the localization impacts →](https://mobiscroll.com/docs/angular/datepicker/api#localization)

## What this demo shows

- Shows date picker examples for selecting a single date.
- **Locale selector** The left side of the calendar shows a "Set localization to" label with a dropdown. That opens a list of available locales that updates the date picker calendar localization.
- **Localization behavior** The localized setup affects date and time formatting, button labels, RTL layout support, and other built-in UI text and behaviors.
- **Header navigation** The month and year label in the top left opens a month and year picker. The blue previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header displays abbreviated day names from Sunday through Saturday, with the dates arranged in a grid below it.
- **Month navigation** The month can be changed by clicking and dragging the calendar left or right.
- **Day cell states** Hovering a day highlights the day number with a gray background. Selecting a day highlights the day number with a blue background. The current date is highlighted by default and remains blue when the user selects another date.
- **Adjacent months** Dates from the previous and next months appear with a muted style. Selecting one navigates the calendar to the corresponding month.

## Best for

- **Multi-language date picker UIs** Apps that need the same date picker experience in multiple languages and regional formats.
- **Region-specific experiences** Products that need localized date formats, time formats, and translated interface copy without rebuilding the date picker UI.

## Tutorial

### Set localization to

`English`

```html
<mbsc-datepicker
    [locale]="localeEn">
</mbsc-datepicker>
```

With "Arabic":

```html
<mbsc-datepicker
    [locale]="localeAr">
</mbsc-datepicker>
```

With "Bulgarian":

```html
<mbsc-datepicker
    [locale]="localeBg">
</mbsc-datepicker>
```

With "Català":

```html
<mbsc-datepicker
    [locale]="localeCa">
</mbsc-datepicker>
```

With "Cestina":

```html
<mbsc-datepicker
    [locale]="localeCs">
</mbsc-datepicker>
```

With "Chinese":

```html
<mbsc-datepicker
    [locale]="localeZh">
</mbsc-datepicker>
```

With "Croatian":

```html
<mbsc-datepicker
    [locale]="localeHr">
</mbsc-datepicker>
```

With "Dansk":

```html
<mbsc-datepicker
    [locale]="localeDa">
</mbsc-datepicker>
```

With "Deutsch":

```html
<mbsc-datepicker
    [locale]="localeDe">
</mbsc-datepicker>
```

With "English (UK)":

```html
<mbsc-datepicker
    [locale]="localeEnGB">
</mbsc-datepicker>
```

With "Español":

```html
<mbsc-datepicker
    [locale]="localeEs">
</mbsc-datepicker>
```

With "Français":

```html
<mbsc-datepicker
    [locale]="localeFr">
</mbsc-datepicker>
```

With "Greek":

```html
<mbsc-datepicker
    [locale]="localeEl">
</mbsc-datepicker>
```

With "Hindi":

```html
<mbsc-datepicker
    [locale]="localeHi">
</mbsc-datepicker>
```

With "Italiano":

```html
<mbsc-datepicker
    [locale]="localeIt">
</mbsc-datepicker>
```

With "Japanese":

```html
<mbsc-datepicker
    [locale]="localeJa">
</mbsc-datepicker>
```

With "Korean":

```html
<mbsc-datepicker
    [locale]="localeKo">
</mbsc-datepicker>
```

With "Lietuvių":

```html
<mbsc-datepicker
    [locale]="localeLt">
</mbsc-datepicker>
```

With "Magyar":

```html
<mbsc-datepicker
    [locale]="localeHu">
</mbsc-datepicker>
```

With "Nederlands":

```html
<mbsc-datepicker
    [locale]="localeNl">
</mbsc-datepicker>
```

With "Norsk":

```html
<mbsc-datepicker
    [locale]="localeNo">
</mbsc-datepicker>
```

With "Polski":

```html
<mbsc-datepicker
    [locale]="localePl">
</mbsc-datepicker>
```

With "Português Europeu":

```html
<mbsc-datepicker
    [locale]="localePtPT">
</mbsc-datepicker>
```

With "Pt. Brasileiro":

```html
<mbsc-datepicker
    [locale]="localePtBR">
</mbsc-datepicker>
```

With "Română":

```html
<mbsc-datepicker
    [locale]="localeRo">
</mbsc-datepicker>
```

With "Serbian":

```html
<mbsc-datepicker
    [locale]="localeSr">
</mbsc-datepicker>
```

With "Slovencina":

```html
<mbsc-datepicker
    [locale]="localeSk">
</mbsc-datepicker>
```

With "Suomi":

```html
<mbsc-datepicker
    [locale]="localeFi">
</mbsc-datepicker>
```

With "Svenska":

```html
<mbsc-datepicker
    [locale]="localeSv">
</mbsc-datepicker>
```

With "Thai":

```html
<mbsc-datepicker
    [locale]="localeTh">
</mbsc-datepicker>
```

With "Türkçe":

```html
<mbsc-datepicker
    [locale]="localeTr">
</mbsc-datepicker>
```

With "Ukrainian":

```html
<mbsc-datepicker
    [locale]="localeUa">
</mbsc-datepicker>
```

With "Vietnamese":

```html
<mbsc-datepicker
    [locale]="localeVi">
</mbsc-datepicker>
```

With "Русский":

```html
<mbsc-datepicker
    [locale]="localeRu">
</mbsc-datepicker>
```

With "Русский (UA)":

```html
<mbsc-datepicker
    [locale]="localeRuUA">
</mbsc-datepicker>
```

With "עברית":

```html
<mbsc-datepicker
    [locale]="localeHe">
</mbsc-datepicker>
```

With "فارسی":

```html
<mbsc-datepicker
    [locale]="localeFa">
</mbsc-datepicker>
```

```ts
import { localeEn } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeEn = localeEn;
}
```

With "Arabic":

```ts
import { localeAr } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeAr = localeAr;
}
```

With "Bulgarian":

```ts
import { localeBg } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeBg = localeBg;
}
```

With "Català":

```ts
import { localeCa } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeCa = localeCa;
}
```

With "Cestina":

```ts
import { localeCs } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeCs = localeCs;
}
```

With "Chinese":

```ts
import { localeZh } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeZh = localeZh;
}
```

With "Croatian":

```ts
import { localeHr } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeHr = localeHr;
}
```

With "Dansk":

```ts
import { localeDa } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeDa = localeDa;
}
```

With "Deutsch":

```ts
import { localeDe } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeDe = localeDe;
}
```

With "English (UK)":

```ts
import { localeEnGB } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeEnGB = localeEnGB;
}
```

With "Español":

```ts
import { localeEs } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeEs = localeEs;
}
```

With "Français":

```ts
import { localeFr } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeFr = localeFr;
}
```

With "Greek":

```ts
import { localeEl } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeEl = localeEl;
}
```

With "Hindi":

```ts
import { localeHi } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeHi = localeHi;
}
```

With "Italiano":

```ts
import { localeIt } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeIt = localeIt;
}
```

With "Japanese":

```ts
import { localeJa } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeJa = localeJa;
}
```

With "Korean":

```ts
import { localeKo } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeKo = localeKo;
}
```

With "Lietuvių":

```ts
import { localeLt } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeLt = localeLt;
}
```

With "Magyar":

```ts
import { localeHu } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeHu = localeHu;
}
```

With "Nederlands":

```ts
import { localeNl } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeNl = localeNl;
}
```

With "Norsk":

```ts
import { localeNo } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeNo = localeNo;
}
```

With "Polski":

```ts
import { localePl } from '@mobiscroll/angular';
                                     
class myComponent {
    public localePl = localePl;
}
```

With "Português Europeu":

```ts
import { localePtPT } from '@mobiscroll/angular';
                                     
class myComponent {
    public localePtPT = localePtPT;
}
```

With "Pt. Brasileiro":

```ts
import { localePtBR } from '@mobiscroll/angular';
                                     
class myComponent {
    public localePtBR = localePtBR;
}
```

With "Română":

```ts
import { localeRo } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeRo = localeRo;
}
```

With "Serbian":

```ts
import { localeSr } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeSr = localeSr;
}
```

With "Slovencina":

```ts
import { localeSk } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeSk = localeSk;
}
```

With "Suomi":

```ts
import { localeFi } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeFi = localeFi;
}
```

With "Svenska":

```ts
import { localeSv } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeSv = localeSv;
}
```

With "Thai":

```ts
import { localeTh } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeTh = localeTh;
}
```

With "Türkçe":

```ts
import { localeTr } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeTr = localeTr;
}
```

With "Ukrainian":

```ts
import { localeUa } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeUa = localeUa;
}
```

With "Vietnamese":

```ts
import { localeVi } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeVi = localeVi;
}
```

With "Русский":

```ts
import { localeRu } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeRu = localeRu;
}
```

With "Русский (UA)":

```ts
import { localeRuUA } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeRuUA = localeRuUA;
}
```

With "עברית":

```ts
import { localeHe } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeHe = localeHe;
}
```

With "فارسی":

```ts
import { localeFa } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeFa = localeFa;
}
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/angular/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/angular/datepicker/api#opt-controls) - option
- [`display`](https://mobiscroll.com/docs/angular/datepicker/api#opt-display) - option
- [`locale`](https://mobiscroll.com/docs/angular/datepicker/api#localization-locale) - option

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { localeEs, MbscModule, setOptions } from '@mobiscroll/angular';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {
  myLocale = localeEs; // Sets the language of the component
}
```

### Template

```html
<mbsc-datepicker [controls]="['calendar']" display="inline" [locale]="myLocale"></mbsc-datepicker>
```

## Implementation notes

- Use `controls: ['calendar']` and `display: 'inline'`, initialized with `locale: 'en'`. `locale` can be updated at runtime via `setOptions({ locale: mobiscroll.locale[code] })` to live-switch the picker's localization.
- React/Angular/Vue import the desired locale as a named export from `@mobiscroll/react`/`@mobiscroll/angular`/`@mobiscroll/vue` (e.g. `localeEs`) and pass it to the `locale` prop/binding. JS/jQuery reference locales off the `mobiscroll` namespace instead (e.g. `mobiscroll.localeEs`) and set it via the `locale` option.
- `locale` also accepts a plain locale code string (e.g. `'en'`) in place of the imported locale object - used for the picker's initial state before a locale is selected from the dropdown.
- `locale` drives month/day names, first-day-of-week, button copy, and date/time formatting conventions together; pair it with `calendarSystem` only when also switching to a non-Gregorian calendar (see the Gregorian/Jalali/Hijri demo).

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-angular.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config angular
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation

## Related demos

- Previous: [Gregorian, Jalali & Hijri](https://demo.mobiscroll.com/angular/calendar/gregorian-jalali-hijri.md) - Use the Angular calendar date picker with Gregorian, Jalali (Persian), and Hijri (Arabic) calendar system support for regional date selection.
- Next: [Right-to-Left](https://demo.mobiscroll.com/angular/calendar/rtl-right-to-left.md) - Use the Angular calendar date picker with RTL support — enable right-to-left layout or inherit it from locale settings for Arabic, Hebrew, or Farsi.