How to customize the day header in Angular Calendar

25 Sep 20264 minutes to read

You can customize the format of the day names displayed in the Angular Calendar header using the dayHeaderFormat property. The default value is Short.

The dayHeaderFormat property supports the following values:

Name	Description
Short	Displays the short form of the day name, such as Su.
Narrow	Displays a single-character day name, such as S.
Abbreviated	Displays the abbreviated day name, such as Sun.
Wide	Displays the full day name, such as Sunday.

app.ts

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




import { Component, ViewChild } from '@angular/core';
import { CalendarComponent } from '@syncfusion/ej2-angular-calendars';
import { DropDownListComponent,ChangeEventArgs } from '@syncfusion/ej2-angular-dropdowns';

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


standalone: true,
    selector: 'app-root',
    styleUrls: ['./style.css'],
    template: `
        <div id="container">
            <div id="calendar">
                <ejs-calendar #default dayHeaderFormat='Short'></ejs-calendar>
            </div>
            <div id="format">
                <label class="custom-input-label">Header Format Types</label>
                <ejs-dropdownlist id="dayformat" #select [dataSource]='formatData' [(value)]='value' [fields]='fields' [placeholder]='waterMark' (change)='formatHandler($event)'></ejs-dropdownlist>
            </div>
        </div>
        `
})

export class AppComponent {
    @ViewChild('default')
    public calendarObj?: CalendarComponent;
    @ViewChild('select')
    public dayHeaderFormat?: DropDownListComponent;
     // define the JSON of data
    public formatData: Object[] = [
        { Id: 'Short', Label: 'Short' },
        { Id: 'Narrow', Label: 'Narrow' },
        { Id: 'Abbreviated', Label: 'Abbreviated' },
        { Id: 'Wide', Label: 'Wide' },
    ];
    public fields: Object = { text: 'Label',value: 'Id' };
    public waterMark: string = 'Select format type';
    public value: string ='Short';
    public formatHandler(args: ChangeEventArgs): void {
        (this.calendarObj as CalendarComponent ).dayHeaderFormat = args.value as any;
    }
}

main.ts

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