Localize Date Selector

[Max Melcher]

Hi team, 

I want to localize the date selector but it is not using the angular dates that already provides the localized names.

<ejs-schedule id="scheduler" #scheduleObj

                [dateFormat]="this.isMonthView ? 'MMMM y' : dateFormat">

The MMMM should be localized to Dezember in German. 

Is there a way to dynamically load the locale to support ALL languages or use the Angular date pipes? 

Thanks - and happy holidays,
Max

[Ashokkumar Karuppasamy]

Hi Max Melcher,

We suspect that the locale culture file has not been properly prepared. To address this, we created a sample in Angular Schedule using the 'de' (German) locale. The attached code snippet and the following example demonstrate the solution. Additionally, we have included the UG documentation for the  localization. Please give it a try, and feel free to reach out if you need further assistance.

Sample: https://stackblitz.com/edit/angular-by31ysza-4hig7qwa?file=src%2Fapp.component.ts,index.html

UG: https://ej2.syncfusion.com/angular/documentation/schedule/localization

Load the locale words as shown below using the load method of L10n. You can find the localized word for the different cultures from the below repository.

ej2-local: https://github.com/syncfusion/ej2-locale

Screenshot:


Please don't hesitate to reach out if you have any further questions or concerns.

Regards,

Ashok

[Max Melcher]

Hi Ashok,

We want to support all languages (it’s a SaaS offering).

So we don’t know what language the user has.

Is there a dynamic way?

Thanks,

Max

[Ashokkumar Karuppasamy]

Hi Max Melcher,

To achieve your requirement, load the required culture (L10) based on your needs and assign its value to the Scheduler locale. We have attached a sample below for your reference. Please try the provided solution and let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/angular-by31ysza-ly4jcefa?file=src%2Fapp.component.ts,index.html

  template: `

     <label for="cultures">Culture</label>

    <select id="cultures" (change)="onCultureChange($event)">

    <option value="de">German</option>

    <option value="en-US">English</option>

    </select><ejs-schedule #schedulObj width='100%' height='550px' [locale]='scheduleLocale' [dateFormat]="'MMMM'" [selectedDate]="selectedDate" [eventSettings]="eventSettings" [views]='views'></ejs-schedule>`

})

export class AppComponent {

    public selectedDate: Date = new Date(2018, 1, 15);

    public scheduleLocale: string = 'de';

    public views: Array<string> = ['Day', 'Week', 'WorkWeek', 'Month'];

    public eventSettings: EventSettingsModel = { dataSource: scheduleData };

    public onCultureChange = (culture: any) => {

      this.scheduleLocale = culture.target.value

    };

 }

 

Regards,
Ashok