Search results

Show Other Months in React Calendar component

24 May 2022 / 1 minute to read

The following example demonstrates how to show dates in other months.

The below styles show the Calendar’s other month dates to visibility from its hidden state.

Copied to clipboard
.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;
}
Source
Preview
index.jsx
index.tsx
Copied to clipboard
// 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'));
Copied to clipboard
// 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'));