Internationalization of p-calendar (primeNg + i18next)

user_13331446 0
Viewed 9241

I am using the internationalization-framework called i18next. One of my components is a p-calendar but I don't know how to internationalize it with this framework. Does anyone know how I can internationalize this component with i18next? If someone knows another solution without using i18next, I can also use.

  • Angular version: 8.2
  • PrimeNG version: 8.1.1
i18next primeng angular typescript calendar
1 Answers

UPDATE for PrimeNG version >= 11

Use the i18N API for newer versions of PrimeNG.

Create a translation file such as "en.json".

{
"primeng": {
    "dayNames": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    "dayNamesShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    "dayNamesMin": ["Su","Mo","Tu","We","Th","Fr","Sa"],
    "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"],
    "today": "Today",
    "weekHeader": "Wk"
}

And include the file in your app.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {

    constructor(private config: PrimeNGConfig, private translateService: TranslateService) {}

    ngOnInit() {
        this.translateService.setDefaultLang('en');
    }

    translate(lang: string) {
        this.translateService.use(lang);
        this.translateService.get('primeng').subscribe(res => this.config.setTranslation(res));
    }
}

Check out the official documentation.

OLD (PrimeNG version < 11)

For the PrimeNG calendar you can add localization over the locale property.

HTML:

<p-calendar [(ngModel)]="dateValue" [locale]="en"></p-calendar>

TS

ngOnInit() {
    this.en = {
        firstDayOfWeek: 0,
        dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
        dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
        dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
        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" ],
        today: 'Today',
        clear: 'Clear',
        dateFormat: 'mm/dd/yy',
        weekHeader: 'Wk'
    };
}

Check out the official documentation.

user_87126090
Related