title: prime-ng p-calendar component language switcher
body: <p>I'm new to angular2.
  I'm trying to develop a language switcher for an angular2 application.
  I configured ng2-translate without problem, my language switcher works fine for labels and text.</p>
  
  <p>Now I want to support i18n for a primeng component <a href="http://www.primefaces.org/primeng/#/calendar" rel="nofollow">p-calendar</a>.</p>
  
  <p>As described on the prime-ng documentation:</p>
  
  <p>Localization for different languages and formats is defined by binding the settings object to the locale property. Following is a Spanish calendar.</p>
  
  <pre><code>&lt;p-calendar [(ngModel)]="dateValue" [locale]="es"&gt;&lt;/p-calendar&gt;
  
  
  export class MyModel {
  
      es: any;
  
      ngOnInit() {
          this.es = {
              //date
              closeText: "Cerrar",
              prevText: "&lt;Ant",
              nextText: "Sig&gt;",
              currentText: "Hoy",
              monthNames: [ "enero","febrero","marzo","abril","mayo","junio",
              "julio","agosto","septiembre","octubre","noviembre","diciembre" ],
              monthNamesShort: [ "ene","feb","mar","abr","may","jun",
              "jul","ago","sep","oct","nov","dic" ],
              dayNames: [ "domingo","lunes","martes","miércoles","jueves","viernes","sábado" ],
              dayNamesShort: [ "dom","lun","mar","mié","jue","vie","sáb" ],
              dayNamesMin: [ "D","L","M","X","J","V","S" ],
              weekHeader: "Sm",
              dateFormat: "dd/mm/yy",
              firstDay: 1,
              isRTL: false,
              showMonthAfterYear: false,
              yearSuffix: "" 
  
              //time
              timeOnlyTitle: 'Elegir una hora',
              timeText: 'Hora',
              hourText: 'Horas',
              minuteText: 'Minutos',
              secondText: 'Segundos',
              millisecText: 'Milisegundos',
              microsecText: 'Microsegundos',
              timezoneText: 'Uso horario',
              timeFormat: 'HH:mm',
              timeSuffix: '',
              amNames: ['a.m.', 'AM', 'A'],
              pmNames: ['p.m.', 'PM', 'P'],
          };
      }
  }
  </code></pre>
  
  <p>My question is how to bind a global object like "es" on any component in my app and switch between locals? 
  Below is a snippets of my code:</p>
  
  <p>app.component.ts</p>
  
  <pre><code>import {Component, ElementRef, AfterViewInit, OnInit} from '@angular/core';
  import {TranslateService} from 'ng2-translate/ng2-translate';
  import {environment} from '../environments/environment';
  import {SelectItem} from 'primeng/primeng';
  
  const SUPPORTED_LANGUAGES:Array&lt;SelectItem&gt; = [
    {label: 'English', value: 'en'},
    {label: 'French', value: 'fr'},
  ];
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit, AfterViewInit {
    ngOnInit():void {
      this.calendar_fr = {
        closeText: "Fermer",
        prevText: "Précédent",
        nextText: "Suivant",
        currentText: "Aujourd'hui",
        monthNames: [ "janvier", "février", "mars", "avril", "mai", "juin",
          "juillet", "août", "septembre", "octobre", "novembre", "décembre" ],
        monthNamesShort: [ "janv.", "févr.", "mars", "avr.", "mai", "juin",
          "juil.", "août", "sept.", "oct.", "nov.", "déc." ],
        dayNames: [ "dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi" ],
        dayNamesShort: [ "dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam." ],
        dayNamesMin: [ "D","L","M","M","J","V","S" ],
        weekHeader: "Sem.",
        dateFormat: "dd/mm/yy",
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ""
      };
      this.calendar_en = {
        closeText: "Done",
        prevText: "Prev",
        nextText: "Next",
        currentText: "Today",
        monthNames: [ "January","February","March","April","May","June",
          "July","August","September","October","November","December" ],
        monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun",
          "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
        dayNames: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
        dayNamesShort: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ],
        dayNamesMin: [ "Su","Mo","Tu","We","Th","Fr","Sa" ],
        weekHeader: "Wk",
        dateFormat: "dd/mm/yy",
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: "" };
    }
    public supportedLanguages:SelectItem[] = SUPPORTED_LANGUAGES;
  
    public calendar: any;
    public calendar_fr: any;
    public calendar_en: any;
  
    public lang:string;
  
    constructor(private el:ElementRef, private translate:TranslateService) {
      translate.addLangs(["en", "fr"]);
      translate.setDefaultLang('en');
      let browserLang = translate.getBrowserLang();
      let defaultLanguage = browserLang.match(/en|fr/) ? browserLang : 'en';
      translate.use(defaultLanguage);
      this.calendar = defaultLanguage == 'fr' ? this.calendar_fr : this.calendar_en;
    }
  
  
    changeLanguage() {
      this.translate.use(this.lang);
      this.calendar = this.lang == 'fr' ? this.calendar_fr : this.calendar_en;
    }
  }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>...
  &lt;p-dropdown [options]="supportedLanguages" [(ngModel)]="lang" [autoWidth]="false" (onChange)="changeLanguage()"&gt;&lt;/p-dropdown&gt;
  ...
  </code></pre>
  
  <p>How to use p-calendar with locale="calendar" on all my component and they listen to the language change? </p>
  
  <pre><code>&lt;p-calendar id="calendar" [locale]="calendar"&gt;&lt;/p-calendar&gt;
  </code></pre>
  
  <p>It seems there's an <a href="https://github.com/primefaces/primeng/issues/618" rel="nofollow">issue</a> too on the [locale] binding, Any Idea how to fix this? </p>