How to customize the day header in React Calendar

31 Aug 20267 minutes to read

You can change the format of the day name displayed in the header using the dayHeaderFormat property. By default, the format is Short, which renders the abbreviated weekday name appropriate to the active locale.

API

Property Type Default Description
dayHeaderFormat DayHeaderFormat (Short | Narrow | Abbreviated | Wide) Short Controls how weekday names are displayed in the Calendar header.

The following formats are supported.

Name Description
Short Displays the locale-specific short format of the day name (for example, Su) in the day header.
Narrow Displays a single character of the day name (for example, S) in the day header.
Abbreviated Displays the abbreviated day name (for example, Sun) in the day header.
Wide Displays the full day name (for example, Sunday) in the day header.

The following example demonstrates how to set Wide as the dayHeaderFormat.

// import the calendarcomponent
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    calendarObj;
    floatLabelObj;
    floatData;
    fields;
    value = 'Short';
    constructor(props) {
        super(props);
        this.floatData = [
            { Id: 'Short', Label: 'Short' },
            { Id: 'Narrow', Label: 'Narrow' },
            { Id: 'Abbreviated', Label: 'Abbreviated' },
            { Id: 'Wide', Label: 'Wide' }
        ];
        this.fields = { text: 'Label', value: 'Id' };
    }
    formatHandler(args) {
        this.calendarObj.dayHeaderFormat = args.value;
    }
    render() {
        return (<div id="container">
            <div id="calendar">
                <CalendarComponent ref={(calendar) => this.calendarObj = calendar} dayHeaderFormat="Short"/>
            </div>
            <div id="format">
                <label class="custom-input-label">Header Format Types</label>
                <DropDownListComponent id="select" value={this.value} dataSource={this.floatData} ref={(dropdownlist) => { this.floatLabelObj = dropdownlist; }} fields={this.fields} change={this.formatHandler.bind(this)} placeholder="Select float type"/>
            </div>
         </div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the calendarcomponent
import { CalendarComponent} from '@syncfusion/ej2-react-calendars';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
    public calendarObj: CalendarComponent;
    public floatLabelObj: DropDownListComponent;
    private floatData: { [key: string]: Object }[];
    private fields: object;
    private value: string = 'Short';
    constructor(props: {}) {
    super(props);
    this.floatData = [
      { Id: 'Short', Label: 'Short' },
      { Id: 'Narrow', Label: 'Narrow' },
      { Id: 'Abbreviated', Label: 'Abbreviated' },
      { Id: 'Wide', Label: 'Wide' }
    ];
    this.fields = { text: 'Label', value: 'Id' };
}
    private formatHandler(args: any): void {
        this.calendarObj.dayHeaderFormat = args.value;
}
    public render(): JSX.Element {
        return (
        <div id="container">
            <div id="calendar">
                <CalendarComponent ref={(calendar) => this.calendarObj = calendar} dayHeaderFormat="Short" />
            </div>
            <div id="format">
                <label class="custom-input-label">Header Format Types</label>
                <DropDownListComponent id="select" value = {this.value}  dataSource={this.floatData} ref={(dropdownlist) => { this.floatLabelObj = dropdownlist }} fields={this.fields} change={this.formatHandler.bind(this)} placeholder="Select float type" />
            </div>
         </div>
        );
    }
};
ReactDOM.render(<App />, document.getElementById('element'));