Select a sequence of dates in Calendar

19 Dec 20224 minutes to read

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

<ejs-calendar id="calendar" change="onChange" isMultiSelection="true"></ejs-calendar>

<div class='e-btn-group e-vertical'>
    <ejs-button id="workweek" content="Work Week"></ejs-button>
    <ejs-button id="week" content="Week"></ejs-button>
</div>
<script>
    
    function onChange(args) {
        var calendar = document.getElementById('calendar').ej2_instances[0];
        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;
    }

    document.addEventListener('DOMContentLoaded', function () {
        var calendar = document.getElementById('calendar').ej2_instances[0];

        /*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');
        })
    });
</script>
<style>
    .btncontainer {
        display: inline-block;
        float: right;
        margin-left: 85px;
        margin-top: 120px;
    }
    .e-btn-group.e-vertical{
        margin-top: 25px;
    }
</style>

NOTE

View Sample in GitHub.