How to show week number in React Calendar

04 Sep 20262 minutes to read

Enable week numbers in the React Calendar by setting the weekNumber property to true. By default, week numbers are calculated using the ISO-8601 rule, where week 1 is the week containing the first Thursday of the year.

API

Property	Type	Default	Description
weekNumber	Boolean	false	Displays week numbers in a leading column of the React Calendar.
weekRule	WeekRule (FirstDay | FirstFullWeek | FirstFourDayWeek)	FirstFourDayWeek (ISO-8601)	Defines how the first week of the year is determined.

The following example demonstrates the React Calendar with week numbers enabled.

index.jsx

// 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 {
    render() {
        return <CalendarComponent id="calendar" weekNumber={true}/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

// 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<{}, {}> {
    public render() {
        return <CalendarComponent id="calendar" weekNumber={true} />
    }
};
ReactDOM.render(<App />, document.getElementById('element'));