Overview

The Calendar is a widget that displays a calendar and allows an end user to select the required date within a specified date range.

View Demo Watch Video

The following code adds a simple Calendar to your page.

HTML
JavaScript
<div id="calendarContainer"></div>
$(function() {
    $("#calendarContainer").dxCalendar({
        value: new Date()
    });
});

The Calendar accepts values of the following formats: dates, numeric values specifying the number of milliseconds since January 1, 1970, 00:00:00, and strings that match the following patterns: 'yyyy-MM-dd', 'yyyy-MM-ddTHH:mm:ss', 'yyyy-MM-ddTHH:mm:ssZ', or 'yyyy-MM-ddTHH:mm:ssx'. Note that in code, the format stays the same until a value of a different format is assigned to the value option. For example, numbers remain numbers until you pass a string to the value option.

To specify the date range, use the min and max options.

JavaScript
$(function() {
    $("#calendarContainer").dxCalendar({
        min: new Date(2000, 1, 1),
        max: new Date(2020, 12, 31)
    });
});

To specify which day should be considered the beginning of the week, pass its index (0 - for Sunday, 1 - for Monday, and so on) to the firstDayOfWeek option.

JavaScript
$(function() {
    $("#calendarContainer").dxCalendar({
        firstDayOfWeek: 1
    });
});   
See Also