Change the First Day of the Week in a DatePicker

Environment

Product

Progress® Kendo UI for Angular DatePicker

Description

How to change the first day of the week in a DatePicker?

Solution

By default, the starting day of the week is determined by the used locale (typically Monday or Sunday). But there are cases when the starting day should not correspond to the locale. To accomplish such customization:

1. Create a service which inherits the built-in CldrIntlService. Define a firstDay method to overwrite the default day set by the service and return the desired day from which the week will start:

   ts

   @Injectable()
   export class FirstDayIntlService extends CldrIntlService {
       public firstDay(): number {
           return 3;
       }
   }

2. In the @NgModule add the created service to the providers section:

   ts

   @NgModule({
       ...
       providers: [
           {
               provide: IntlService,
               useClass: FirstDayIntlService,
           },
       ],
   })

The following example demonstrates how to implement the described approach.

Change Theme

Theme

Loading ...