How to skip months in React Calendar

4 Sep 20265 minutes to read

The following example demonstrates how to skip a month in the React Calendar when the user clicks the previous or next icon. The sample uses the navigated event together with the NavigateTo method to advance the React Calendar by two months at a time instead of one.

API

Member Signature / Type Description
navigated EventEmitter<NavigatedEventArgs> Triggered after the Calendar navigates to a different view or month. The event argument exposes date and view properties.
NavigateTo (date: Date, view?: CalendarView) => void Navigates the React Calendar to the specified date, and optionally switches the view (Month, Year, or Decade).

The following example demonstrates the implementation.

// 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 {
    calendarInstance;
    // skips a month while cliking previous and next icon in month view.
    onNavigate(args) {
        let date = 0;
        if (args.event.currentTarget.classList.contains('e-next')) {
            // increment the month while clicking the next icon
            date = args.date.setMonth(args.date.getMonth() + 1);
        }
        if (args.event.currentTarget.classList.contains('e-prev')) {
            // decrement the month while clicking the previous icon
            date = args.date.setMonth(args.date.getMonth() - 1);
        }
        if (args.view === 'month') {
            this.calendarInstance.navigateTo('Month', new Date(date));
        }
    }
    render() {
        return (<CalendarComponent navigated={this.onNavigate = this.onNavigate.bind(this)} ref={(scope) => { this.calendarInstance = scope; }}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
// import the calendarcomponent
import { Calendar, CalendarComponent, NavigatedEventArgs } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {
    public calendarInstance: Calendar;
    // skips a month while cliking previous and next icon in month view.
    public onNavigate(args: NavigatedEventArgs){
        let date: number = 0;
        if (((args.event as KeyboardEvent | MouseEvent | Event).currentTarget as HTMLElement).classList.contains('e-next')) {
            // increment the month while clicking the next icon
            date = (args.date as Date).setMonth((args.date as Date).getMonth() + 1);
        }
        if (((args.event as KeyboardEvent | MouseEvent | Event).currentTarget as HTMLElement).classList.contains('e-prev')) {
            // decrement the month while clicking the previous icon
            date = (args.date as Date).setMonth((args.date as Date).getMonth() - 1);
        }
        if (args.view === 'month') {
            this.calendarInstance.navigateTo('Month', new Date(date));
        }
    }

    public render() {
        return (
            <CalendarComponent navigated={this.onNavigate = this.onNavigate.bind(this)} ref={(scope) => {(this.calendarInstance as Calendar | null) = scope}} />
        );
     }
 }
ReactDOM.render(<App />, document.getElementById('element'));