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
window.onload = function() { var zoomLevels = ["month", "year", "decade", "century"], holydays = [[1,0], [4,6], [25,11]], useCellTemplate = ko.observable(false), cellTemplate = ko.computed(function() { if (useCellTemplate()) return getCellTemplate; else return "cell"; }), viewModel = { now: new Date(), zoomLevels: zoomLevels, currentValue: ko.observable(new Date()), calendarDisabled: ko.observable(false), isMondayFirst: ko.observable(false), useMinDate: ko.observable(false), useMaxDate: ko.observable(false), zoomLevel: ko.observable(zoomLevels[0]), cellTemplate: cellTemplate, useCellTemplate: useCellTemplate }; 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>"; } ko.applyBindings(viewModel, document.getElementById("calendar-demo")); };
<!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> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/17.1.5/css/dx.win10.white.css" /> <script src="https://cdn3.devexpress.com/jslib/17.1.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 class="widget-container"> <div id="calendar-container" data-bind="dxCalendar: { value: currentValue, min: useMinDate() ? (new Date(now.getTime() - 1000*60*60*24*3)) : undefined, max: useMaxDate() ? (new Date(now.getTime() + 1000*60*60*24*3)) : undefined, disabled: calendarDisabled, cellTemplate: cellTemplate, firstDayOfWeek: isMondayFirst() ? 1 : 0, zoomLevel: zoomLevel }"></div> </div> <div class="options"> <div class="caption">Options</div> <div class="option"> <div data-bind="dxCheckBox: { value: useMinDate, text: 'Specified min value', }"></div> </div> <div class="option"> <div data-bind="dxCheckBox: { value: useMaxDate, text: 'Specified max value', }"></div> </div> <div class="option"> <div data-bind="dxCheckBox: { text: 'Monday as the first day of a week', value: isMondayFirst }"></div> </div> <div class="option"> <div data-bind="dxCheckBox: { text: 'Use the Custom Cell Template', value: useCellTemplate }"></div> </div> <div class="option"> <div data-bind="dxCheckBox: { text: 'Disabled', value: calendarDisabled }"></div> </div> <div class="option"> <span>Zoom level</span> <div id="zoom-level" data-bind="dxSelectBox: { dataSource: zoomLevels, value: zoomLevel }"></div> </div> <div class="option"> <span>Selected date</span> <div id="selected-date" data-bind="dxDateBox: { value: currentValue, width: '100%' }"></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: #f5f5f5; position: absolute; right: 0; top: 0; bottom: 0; width: 260px; } .caption { font-weight: 500; font-size: 18px; } .option { margin-top: 10px; }