Select a sequence of dates in calendar in EJ2 JavaScript Calendar control

26 Apr 20235 minutes to read

The following example demonstrates how to select the week dates of chosen date in the Calendar using values property, when multiSelection property is enabled. Methods of Moment.js is used in this sample for calculating the start and end of week from the selected date.

index.js
index.html
/*Initialize the calender component*/
    var calendar = new ej.calendars.Calendar({
        isMultiSelection: true,
        change: onChange
    });
    calendar.appendTo('#calendar');
   /*selected current week dates when click the button*/
document.getElementById('workweek').addEventListener('click', function () {
    if (calendar.element.classList.contains('week')) {
        calendar.element.classList.remove('week');
    }
    calendar.element.classList.add('workweek');
});
/*selected current week dates when click the button*/
document.getElementById('week').addEventListener('click', function () {
    if (calendar.element.classList.contains('workweek')) {
        calendar.element.classList.remove('workweek');
    }
    calendar.element.classList.add('week');
});
function onChange(args) {
	  var startOfWeek = moment(calendar.value).startOf('week');
        var endOfWeek = moment(calendar.value).endOf('week');
    if (calendar.element.classList.contains('workweek')) {
        getWeekArray(startOfWeek.day(1), endOfWeek.day(5));
    }
    else if (calendar.element.classList.contains("week")) {
        getWeekArray(startOfWeek, endOfWeek);
    }
}
function getWeekArray(startOfWeek, endOfWeek) {
    var days = [];
    var day = startOfWeek;
    while (day <= endOfWeek) {
        days.push(day.toDate());
        day = day.clone().add(1, 'd');
    }
    calendar.values = days;
}
<!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">
    <!--style reference from app-->
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <!--style reference from the Calendar component-->
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet">    
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <!--Element which is going to render-->
        <div class="content-wrapper" style="height:357px ;display: inline-block;">
            <div id="calendar" style="display: inline-block;"></div>
                <div class="btncontainer e-btn-group e-vertical">
                    <button class="e-btn" id="week">Week</button>
                    <button class="e-btn" id="workweek">Work Week</button>
                </div>
        </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>