Your search did not match any results.
Calendar

Calendar

Documentation

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

Backend API
Copy to CodePen
Apply
Reset
$(() => { const zoomLevels = ['month', 'year', 'decade', 'century']; const date = new Date().getTime(); const calendar = $('#calendar-container').dxCalendar({ value: new Date(), disabled: false, firstDayOfWeek: 0, zoomLevel: zoomLevels[0], onValueChanged(data) { selectedDate.option('value', data.value); }, onOptionChanged(data) { if (data.name === 'zoomLevel') { zoomLevel.option('value', data.value); } }, }).dxCalendar('instance'); $('#min-date').dxCheckBox({ text: 'Specified min value', onValueChanged(data) { if (data.value) { calendar.option('min', new Date(date - 1000 * 60 * 60 * 24 * 3)); } else { calendar.option('min', null); } }, }); $('#max-date').dxCheckBox({ text: 'Specified max value', onValueChanged(data) { if (data.value) { calendar.option('max', new Date(date + 1000 * 60 * 60 * 24 * 3)); } else { calendar.option('max', null); } }, }); $('#disable-dates').dxCheckBox({ text: 'Disable weekend', onValueChanged(data) { if (data.value) { calendar.option('disabledDates', (d) => d.view === 'month' && isWeekend(d.date)); } else { calendar.option('disabledDates', null); } }, }); $('#first-day').dxCheckBox({ text: 'Monday as the first day of a week', onValueChanged(data) { if (data.value) { calendar.option('firstDayOfWeek', 1); } else { calendar.option('firstDayOfWeek', 0); } }, }); $('#disabled').dxCheckBox({ text: 'Disabled', onValueChanged(data) { calendar.option('disabled', data.value); }, }); $('#custom-cell').dxCheckBox({ text: 'Use the Custom Cell Template', value: false, onValueChanged(data) { calendar.option('cellTemplate', data.value ? getCellTemplate : 'cell'); }, }); const zoomLevel = $('#zoom-level').dxSelectBox({ dataSource: zoomLevels, value: zoomLevels[0], onValueChanged(data) { calendar.option('zoomLevel', data.value); }, }).dxSelectBox('instance'); const selectedDate = $('#selected-date').dxDateBox({ value: new Date(), width: '100%', onValueChanged(data) { calendar.option('value', data.value); }, }).dxDateBox('instance'); const holydays = [[1, 0], [4, 6], [25, 11]]; function isWeekend(d) { const day = d.getDay(); return day === 0 || day === 6; } function getCellTemplate(data) { let cssClass = ''; if (isWeekend(data.date)) { cssClass = 'weekend'; } $.each(holydays, (_, item) => { if (data.date.getDate() === item[0] && data.date.getMonth() === item[1]) { cssClass = 'holyday'; return false; } return true; }); return `<span class='${cssClass}'>${data.text}</span>`; } });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/21.2.3/js/dx.all.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="calendar-demo"> <div class="widget-container"> <div id="calendar-container"></div> </div> <div class="options"> <div class="caption">Options</div> <div class="option"> <div id="min-date"></div> </div> <div class="option"> <div id="max-date"></div> </div> <div class="option"> <div id="disable-dates"></div> </div> <div class="option"> <div id="first-day"></div> </div> <div class="option"> <div id="custom-cell"></div> </div> <div class="option"> <div id="disabled"></div> </div> <div class="option"> <span>Zoom level</span> <div id="zoom-level"></div> </div> <div class="option"> <span>Selected date</span> <div id="selected-date"></div> </div> </div> </div> </div> </body> </html>
.widget-container { margin-right: 320px; } #calendar-container { margin: auto; } .dx-calendar-cell:not(.dx-calendar-other-month) .weekend, .dx-calendar-cell:not(.dx-calendar-other-month) .holyday { text-shadow: none; font-weight: bold; } .dx-calendar-cell:not(.dx-calendar-other-month) .weekend { color: #3030ff; } .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .weekend { color: #8080ff; } .dx-calendar-cell:not(.dx-calendar-other-month) .holyday { color: #ff3030; } .dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .holyday { color: #ff8080; } .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); position: absolute; right: 0; top: 0; bottom: 0; width: 260px; } .caption { font-weight: 500; font-size: 18px; } .option { margin-top: 10px; }