Customize the calendar day header in React Calendar component

21 Feb 20267 minutes to read

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

Find the possible formats below.

Name	Description
Short	Displays the 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.

index.jsx

// 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'));

index.tsx

// 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'));