Multi Selection in EJ2 JavaScript Calendar

04 Sep 20263 minutes to read

Calendar provides an option to select single or multiple dates by using the isMultiSelection and values properties. By default, the isMultiSelection property is in a 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 the isMultiSelection and values properties in the Calendar control.

/*Initialize the calender component*/
    var calendar = new ej.calendars.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/35.1.37/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/35.1.37/ej2-calendars/styles/material.css" rel="stylesheet">
    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/35.1.37/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <!--element which is going to render the Calendar-->
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

See Also