Multi select in React Calendar component

21 Feb 20264 minutes to read

The Calendar provides options for single or multiple date selection using the isMultiSelection and values properties. By default, isMultiSelection is disabled.

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]

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

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

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

index.jsx

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

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