Primeng: p-Calendar doesn't update days' names

[gepird]

There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[ x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
https://plnkr.co/edit/APNi47nuDMHYN3zmTxWD?p=preview

Current behavior
Days' names are not updating, as can be seen on the calendar on the left in plunkr.

Expected behavior
Days' names should update, like months' names do.

Minimal reproduction of the problem with instructions
I guess plunkr is good reproduction.

What is the motivation / use case for changing the behavior?
I want to internationalize calendar for users, which use many languages.

Please tell us about your environment:

• Angular version: 2.0.X
  5.2.5

• PrimeNG version: 2.0.X
  5.2.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web
  Chrome, Firefox, IE 11

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  Typescript

• Node (for AoT issues): node --version =

[cagataycivici]

You need to change the locale object instance instead of setting a property of it, other wise change will not be detected so a new reference of locale object needs to be created;

    changeLocale() {
        this.locale = {
            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'
        };
    }

[rolandtoth]

I believe this is still a bug. I am able to change translations of dayNamesMin using the i18n api (with ngx-translate), along with other translations.

While others work well, day names don't get refreshed. I'm sure there's no problem with my code because navigating to other page of the app and then going back, the day names show the expected translated strings. Logging out values show that translations are OK, but the calendar keeps showing previous values.

private setPrimeNgTranslationsOnChange(): void {
  this.translateService.onLangChange
    .subscribe((event: LangChangeEvent) => {
      const t = event.translations;

      this.primeNGConfig.setTranslation({
        monthNames: t.calendar_monthNames.split("|"),
        dayNamesMin: t.calendar_dayNamesMin.split("|"),
        today: t.calendar_today,
        clear: t.calendar_clear
      });
    });
}

[superholz]

I have the same problem as @rolandtoth only using another library for translation. When I understand correctly the mechanism to implement internationalization in primeng changed by introducing the I18N API. But still, by feeding the translation via PrimeNGConfig into the calender component results in only updating/translating months and not the short day names Mo , Tu, We... Would appreciate a comment on that issue.

[rolandtoth]

@superholz As a workaround I'm calling ngOnInit() on the calendar on language change, not ideal but seems OK here

[superholz]

@rolandtoth Thanks a lot for the hint! Based on it I found a workaround by adding a *ngIf statement to the component and trigger visibility in a timeout like this: this.calenderVisible = false; setTimeout(() => this.calenderVisible = true, 0);
This also triggers to run ngOnInit of the component again. How do you manage to call ngOnInit of a primeNg component directly?

[rolandtoth]

@superholz Simply by using ViewChild:

@ViewChild(Calendar) calendar: Calendar;

// later
this.calendar.ngOnInit();

[AlbaSS18]

Hello, I decided open a new issue to commented this bug and they can fix it.