Multi Selection in React Calendar

4 Sep 20264 minutes to read

The React Calendar provides options for single or multiple date selection using the isMultiSelection and values properties. By default, isMultiSelection is false, and the React Calendar enters single-selection mode where the value property holds the selected date.

API Type Default Description
isMultiSelection Boolean false Enables multi-selection in the React Calendar.
values Date[] null Gets or sets the collection of selected dates when multi-selection is enabled.

When isMultiSelection is false, the values property is ignored and the React Calendar uses the value property instead. The values collection always reflects the actual selection state.

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

[Class-component]

// 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
    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]

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