How to show other months in React Calendar

31 Aug 20262 minutes to read

By default, leading or trailing days that belong to the previous or next month are visually hidden inside the Calendar grid. The following example demonstrates how to make those other-month dates visible (and pointer-interactive) by overriding their default styles.

The styles below force other-month rows and day cells to display and accept user input.

.e-calendar .e-content tr.e-month-hide,
.e-calendar .e-content td.e-other-month>span.e-day {
    display: block;
}

.e-calendar .e-content td.e-month-hide,
.e-calendar .e-content td.e-other-month {
    pointer-events: auto;
    touch-action: auto;
}

Make sure these rules are loaded after the Calendar’s default theme styles so that the higher specificity of your overrides takes effect. You can place them in a global stylesheet imported in index.tsx/index.jsx, or in a local CSS module.

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"/>;
    }
}
;
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" />
    }
};
ReactDOM.render(<App />, document.getElementById('element'));