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

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;
        }
    }
  2. 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?