Multi Selection in React Calendar component

29 Nov 2022 / 2 minutes to read

Calendar provides an option to select single or multiple dates by using isMultiSelection and values properties. By default, isMultiSelection property will be in disabled state.

API	Type	Description
`isMultiSelection`	Boolean	Enables the multi selection option in the Calendar control
`values`	Date[]	Gets or sets the date range values in multi selection option

The following example demonstrates the functionality of isMultiSelection property and values properties in the Calendar control.

[Class-component]

Source

Preview

index.jsx

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 {
    constructor() {
        super(...arguments);
        //initialize the values
        this.values = [new Date('1/1/2020'), new Date('1/15/2020'), new Date('1/3/2020'), new Date('1/25/2020')];
    }
    render() {
        return <CalendarComponent id="calendar" isMultiSelection={true} values={this.values}/>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));

// 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<{}, {}> {

//initialize the values
private values: Date[] = [new Date('1/1/2020'), new Date('1/15/2020'), new Date('1/3/2020'), new Date('1/25/2020')];


public render() {
    return <CalendarComponent id="calendar" isMultiSelection={true} values={this.values}  />
    }
};
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

Source

Preview

index.jsx

index.tsx

import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    //initialize the values
    const values = [new Date('1/1/2020'), new Date('1/15/2020'), new Date('1/3/2020'), new Date('1/25/2020')];
    return <CalendarComponent id="calendar" isMultiSelection={true} values={values}/>;
}
;
ReactDOM.render(<App />, document.getElementById('element'));

import { CalendarComponent} from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {

//initialize the values
const values: Date[] = [new Date('1/1/2020'), new Date('1/15/2020'), new Date('1/3/2020'), new Date('1/25/2020')];

return <CalendarComponent id="calendar" isMultiSelection={true} values={values}  />

};
ReactDOM.render(<App />, document.getElementById('element'));