kendo-calendar, internationalization

[Jyothi]

Hi,

We have a requirement, where we are using supporting internationalization for only date, numbers and currency. We do not want the calendar months to be displayed in local language. For example, when we set the LOCALE_ID, useValue: 'pt-PT', we don't want the calendar months to be displayed in Portugues. We want it to be SU, MO etc. Is this achievable?

 

Regards,

Jyothi

[Jyothi]

BTW I was able to change the Year and Month by using the templates. But still need a way to show the days of the week in English.

 <kendo-calendar type="infinite" >

     <ng-template kendoCalendarHeaderTitleTemplate let-title>
      {{getEngYear(title)}}
    </ng-template>

     <ng-template kendoCalendarNavigationItemTemplate let-title let-date="date" let-view="activeView">
          {{view === 'month' && date.getMonth() ? getEngMonth(date, view) : title}}
   </ng-template>

     </kendo-calendar>

 

In the component file, translate the year or month based on the function call and return the value.

Here is the visual

    

[Martin]

Hi Jyothi,

To keep the month names in English while applying any locale, the developer needs to modify the data of that locale.

For more details on how to overwrite the locale data please check the following article:

https://www.telerik.com/kendo-angular-ui/components/globalization/internationalization/loading-data/#toc-modifying-the-locale-data

In this case:

app.module.ts

import '@progress/kendo-angular-intl/locales/pt/calendar';
const ptData: Locale = localeData('pt');

console.log(ptData.calendar.months)

Regards,
Martin
Progress Telerik

[Jyothi]

Hi Martin,

I am looking for keeping the days of the week in English. As you can see I was able to get the months in English 'December'. 

How do I change the day of the weeks to 'SUN', MON etc.

 

Regards,

Jyothi

[Martin]

Hi Jyothi,

The days' names can be changed in the same way as the months:

import '@progress/kendo-angular-intl/locales/pt/calendar';
const ptData: Locale = localeData('pt');
const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const months = [
  'January',
  'February',
...
];

ptData.calendar.months.format.wide = months;
ptData.calendar.days.format.short = days;

Here is an example:

https://stackblitz.com/edit/angular-hoxfau?file=src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.ts

 

[Jyothi]

Hi Martin,

 

I followed the steps and it should work. But I cannot get to compile it. Get the following error. We are using Angular 16. Anything different?

Here is the code.

 

[Jyothi]

Hi Martin,

I see another example in sandbox facing the same issue about the object being undefined.

I was able to overcome this issue by changing the compiler options in my test project to false. But I cannot turn off the strict option in real project. How can we overcome this issue? 

 

[Martin]

Hi Jyothi,

This is a TypeScript-related error. Please check the following StackOverflow thread:

https://stackoverflow.com/questions/54884488/how-can-i-solve-the-error-ts2532-object-is-possibly-undefined

Alternatively set the ptDate type to Locale | any:

const ptData: Locale | any = localeData("pt");