Multi select in EJ2 TypeScript Calendar control
26 Apr 20232 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.
import { Calendar } from '@syncfusion/ej2-calendars';
/*Initialize the calender component*/
let calendar: Calendar = new Calendar({
isMultiSelection: true,
values: [new Date('1/1/2020'), new Date('1/15/2020'), new Date('1/3/2020'), new Date('1/25/2020')]
});
calendar.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Calendar control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<!--style reference from the Calendar component-->
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-calendars/styles/material.css" rel="stylesheet" />
<!--style reference from app-->
<link href="styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<!--element which is going to render the Calendar-->
<div id='element'></div>
</div>
</body>
</html>