Your search did not match any results.
Calendar

Overview

Documentation
The Calendar is a widget that displays a calendar and allows an end user to select the required date within a specified date range.
Copy to Codepen
Apply
Reset
$(function(){ var zoomLevels = ["month", "year", "decade", "century"], date = new Date().getTime(); var calendar = $("#calendar-container").dxCalendar({ value: new Date(), disabled: false, firstDayOfWeek: 0, zoomLevel: zoomLevels[0], onValueChanged: function(data) { selectedDate.option("value", data.value); }, onOptionChanged: function(data) { if(data.name == "zoomLevel") { zoomLevel.option("value", data.value); } } }).dxCalendar("instance"); $("#min-date").dxCheckBox({ text: "Specified min value", onValueChanged: function(data) { if(data.value) { calendar.option("min", new Date(date - 1000*60*60*24*3)); } else { calendar.option("min", undefined); } } }); $("#max-date").dxCheckBox({ text: "Specified max value", onValueChanged: function(data) { if(data.value) { calendar.option("max", new Date(date + 1000*60*60*24*3)); } else { calendar.option("max", undefined); } } }); $("#first-day").dxCheckBox({ text: "Monday as the first day of a week", onValueChanged: function(data) { if(data.value) { calendar.option("firstDayOfWeek", 1); } else { calendar.option("firstDayOfWeek", 0); } } }); $("#disabled").dxCheckBox({ text: "Disabled", onValueChanged: function(data) { calendar.option("disabled", data.value); } }); $("#custom-cell").dxCheckBox({ text: "Use the Custom Cell Template", value: false, onValueChanged: function(data) { calendar.option("cellTemplate", data.value ? getCellTemplate : "cell"); } }); var zoomLevel = $("#zoom-level").dxSelectBox({ dataSource: zoomLevels, value: zoomLevels[0], onValueChanged: function(data) { calendar.option("zoomLevel", data.value); } }).dxSelectBox("instance"); var selectedDate = $("#selected-date").dxDateBox({ value: new Date(), onValueChanged: function(data) { calendar.option("value", data.value); } }).dxDateBox("instance"); var holydays = [[1,0], [4,6], [25,11]]; function getCellTemplate(data) { var dayNumber = data.date.getDay(), cssClass = ""; if(dayNumber === 0 || dayNumber === 6) cssClass = "weekend"; $.each(holydays, function(_, item) { if(data.date.getDate() === item[0] && data.date.getMonth() === item[1]) { cssClass = "holyday"; return false; } }); 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="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.win10.white.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.5/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 id="example"> <div id="calendar-container"></div> </div> <div class="options"> <div class="option" id="min-date"></div> <div class="option" id="max-date"></div> <div class="option" id="first-day"></div> <div class="option" id="custom-cell"></div> <div class="option" id="disabled"></div> </div> <div class="dx-fieldset bottom-option"> <div class="dx-field"> <div class="dx-field-label">Zoom level:</div> <div class="dx-field-value"> <div id="zoom-level"></div> </div> </div> </div> <div class="dx-fieldset bottom-option"> <div class="dx-field"> <div class="dx-field-label">Selected date:</div> <div class="dx-field-value"> <div id="selected-date"></div> </div> </div> </div> </div> </div> </body> </html>
#example { display: inline-block; margin-bottom: 10px; width: 100%; max-width: 385px; } #calendar-container { margin: auto; } .options { display: inline-block; vertical-align: top; margin-left: 10px; } .options > .option { display: block; margin-bottom: 5px; } .bottom-option { margin-top: 8px; margin-bottom: 8px; } .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; }