Changing the First Week Day in the Calendar or DatePicker

Environment

Product

Progress® Kendo UI for Angular Calendar

Description

How can I change the first day of the week in the Kendo Calendar or DatePicker?

Solution

1. Create a custom service which inherits the CldrIntlService and override its firstDay member.

typescript

import { Inject, Injectable, LOCALE_ID } from '@angular/core';
import { CldrIntlService } from '@progress/kendo-angular-intl';

@Injectable()
export class MyIntlService extends CldrIntlService {
    constructor(@Inject(LOCALE_ID) localeId: string) {
        super(localeId);
    }

    public firstDay(): number {
        return 1;
    }
}

2. Provide the custom service implementation as IntlService in the parent or application module.

typescript

@NgModule({
    providers: [
        {
            provide: IntlService,
            useClass: MyIntlService
        }
    ],
    // ...
})
export class AppModule { }

The following example shows the full implementation of the demonstrated approach.

Change Theme

Theme

Loading ...

See Also

• Customizing the Default Service