Change the first day of week in Angular Calendar component

27 Apr 20241 minute to read

The Calendar provides an option to change the first day of the week by using the firstDayOfWeek property.
Day of the week starts from 0(Sunday) to 6(Saturday).

By default, the first day of week will be based on culture.

The following example demonstrates the Calendar with Tuesday as first day of the week.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CalendarModule } from '@syncfusion/ej2-angular-calendars'




import { Component } from '@angular/core';

@Component({
imports: [
        
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
    ],


standalone: true,
    selector: 'app-root',
    template: `
        <!-- Sets the firstDayOfWeek -->
        <ejs-calendar [value]='dateValue' [firstDayOfWeek]='startWeek'></ejs-calendar>
        `
})

export class AppComponent {
    public dateValue: Date = new Date();
    public startWeek: number = 2;
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));