How to show week number in React Calendar

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