New to Kendo UI for Angular? Start a free 30-day trial

Changing the First Week Day in the Calendar or DatePicker

Environment

ProductProgress® 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.
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;
    }
}
  1. Provide the custom service implementation as IntlService in the parent or application module.
@NgModule({
    providers: [
        {
            provide: IntlService,
            useClass: MyIntlService
        }
    ],
    // ...
})
export class AppModule { }

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

Example
View Source
Change Theme:

See Also

In this article

Not finding the help you need?