Search results

Customize Day Header in Angular DateRangePicker component

14 Apr 2021 / 2 minutes to read

You can change the format of the day that to be displayed in header using dayHeaderFormat property. By default, the format is Short.

You can find the possible formats on below.

Name Description
Short Sets the short format of day name (like Su ) in day header.
Narrow Sets the single character of day name (like S ) in day header.
Abbreviated Sets the min format of day name (like Sun ) in day header.
Wide Sets the long format of day name (like Sunday ) in day header.
Copied to clipboard
import { Component, ViewChild } from '@angular/core';
import { DateRangePickerComponent } from '@syncfusion/ej2-angular-calendars';
import { DropDownListComponent,ChangeEventArgs } from '@syncfusion/ej2-angular-dropdowns';

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

export class AppComponent {
    public daterangepickerObj: DateRangePickerComponent;
    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.daterangepickerObj.dayHeaderFormat = args.value;

Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DateRangePickerModule } from '@syncfusion/ej2-angular-calendars';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { AppComponent } from './app.component';

 * Module
    imports: [
    declarations: [AppComponent],
    bootstrap: [AppComponent]
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';