Select a sequence of dates in calendar in EJ2 TypeScript 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.

import { Calendar } from '@syncfusion/ej2-calendars';
import moment from "moment";

/*Initialize the calender component*/
let calendar: Calendar = new 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: ChangedEventArgs) {
    let startOfWeek: any = moment(calendar.value).startOf('week');
    let endOfWeek: any = 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: any, endOfWeek: any): void {
    let days: Date[] = [];
    let day: any = 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/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />    
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/material.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-->
        <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>
</body>

</html>