How to change the first day of week in React Calendar

4 Sep 20262 minutes to read

The React Calendar provides an option to change the first day of the week using the firstDayOfWeek property. Days of the week are numbered 0 through 6.

Value Day
0 Sunday
1 Monday
2 Tuesday
3 Wednesday
4 Thursday
5 Friday
6 Saturday

By default, the first day of the week is culture-specific (for example, Sunday for en-US and Monday for most European cultures). Use the locale property to switch cultures, or override the default by setting firstDayOfWeek explicitly.

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

// import the calendarcomponent
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    weekstart = 2;
    render() {
        return <CalendarComponent id="calendar" firstDayOfWeek={this.weekstart}/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));
// import the calendarcomponent
import { CalendarComponent} from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {

    private weekstart:number = 2;

    public render() {
        return <CalendarComponent id="calendar" firstDayOfWeek={this.weekstart} />
    }
};
ReactDOM.render(<App />, document.getElementById('element'));