New to Kendo UI for Angular? Start a free 30-day trial
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
- Create a custom service which inherits the
CldrIntlService
and override itsfirstDay
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;
}
}
- 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: