Search results

Select a Sequence of Dates in Calendar in JavaScript Calendar control

14 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
app.ts
index.html
styles.css
Copied to clipboard
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;
}
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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></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>
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;
}