Search results

Select a Sequence of Dates in Calendar in JavaScript (ES5) Calendar control

08 Apr 2021 / 1 minute 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.

Source
Preview
index.js
index.html
styles.css
Copied to clipboard
/*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;
}
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">    
    <link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.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>
Copied to clipboard
/* Example -styles */

#container {
    visibility: hidden;
    max-width: 480px;
    margin: 0 auto;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

#element {
    display: block;
}

.btncontainer{
    display: inline-block;
    float:right;
    margin-left:85px;
    margin-top: 120px;
}
/* custom -styles */

.e-clear { /* csslint allow: adjoining-classes*/
    margin-right: 81px;
}