Internationalization of p-calendar (primeNg + i18next)

Question

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

riorudo · Accepted Answer · 2021-02-11T07:47:56.377

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.

Yes, I know, but I want to internationalize my application with i18next or maybe another method. Would you know how to do that? — Alba, Jul 13 '20 at 11:34
Sorry, I don't know i18next. My answer refers to an alternative solution. — riorudo, Jul 13 '20 at 12:04
Umm okey. And if I want to set another language with your method, how would I do it? Thank you very much. — Alba, Jul 13 '20 at 12:08
Somewhere in a central location I would define an object for the calendar with different languages like `lang = { en: {first day of the week: ... }, it: {first day of week: ...} }`.Not sure, but I think it should be possible to get the current language from your i18next tool. Then you could do something like this: `` — riorudo, Jul 13 '20 at 14:00
Do you have an example of where this works with another language, other than English? (In angular 11) — PMO1948, May 30 '21 at 12:16
The above solution works for me. But I need to call the translate method inside ngOninit and pass the JSON file name. For English ```this.translate("en");``` And for Bengali use this. ```this.translate("bn")```; — istiyak ahamed Milon, Oct 23 '22 at 09:00

Internationalization of p-calendar (primeNg + i18next)

1 Answers1

UPDATE for PrimeNG version >= 11

OLD (PrimeNG version < 11)