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
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { var now = new Date(); $scope.zoomLevels = ["month", "year", "decade", "century"]; $scope.currentValue = new Date(); $scope.calendarDisabled = false; $scope.isMondayFirst = 0; $scope.minDateValue = undefined; $scope.maxDateValue = undefined; $scope.zoomLevel = $scope.zoomLevels[0]; $scope.cellTemplate = "cell"; $scope.setMinDate = function(e) { if(e.value) { $scope.minDateValue = new Date(now.getTime() - 1000*60*60*24*3); } else { $scope.minDateValue = undefined; } }; $scope.setMaxDate = function(e) { if(e.value) { $scope.maxDateValue = new Date(now.getTime() + 1000*60*60*24*3); } else { $scope.maxDateValue = undefined; } }; $scope.setFirstDay = function(e) { if(e.value) { $scope.firstDay = 1; } else { $scope.firstDay = 0; } }; $scope.useCellTemplate = function(e) { if(e.value) { $scope.cellTemplate = getCellTemplate; } else { $scope.cellTemplate = "cell"; } }; 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.6/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/16.2.6/css/dx.win10.white.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/16.2.6/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" ng-app="DemoApp" ng-controller="DemoController"> <div id="calendar-demo"> <div id="example"> <div id="calendar-container" dx-calendar="{ bindingOptions: { min: 'minDateValue', max: 'maxDateValue', firstDayOfWeek: 'firstDay', disabled: 'calendarDisabled', value: 'currentValue', zoomLevel: 'zoomLevel', cellTemplate: 'cellTemplate' } }"></div> </div> <div class="options"> <div class="option" dx-check-box="{ text: 'Specified min value', value: false, onValueChanged: setMinDate }"></div> <div class="option" dx-check-box="{ text: 'Specified max value', value: false, onValueChanged: setMaxDate }"></div> <div class="option" dx-check-box="{ text: 'Monday as the first day of a week', value: false, onValueChanged: setFirstDay }"></div> <div class="option" dx-check-box="{ text: 'Use the Custom Cell Template', value: false, onValueChanged: useCellTemplate }"></div> <div class="option" dx-check-box="{ text: 'Disabled', bindingOptions: { value: 'calendarDisabled' } }"></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" dx-select-box="{ dataSource: zoomLevels, bindingOptions: { value: 'zoomLevel' } }"></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" dx-date-box="{ bindingOptions: { value: 'currentValue' } }"></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; }