const DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', ($scope) => {
const now = new Date();
$scope.zoomLevels = ['month', 'year', 'decade', 'century'];
$scope.weekDays = [
{ id: 0, text: 'Sunday' },
{ id: 1, text: 'Monday' },
{ id: 2, text: 'Tuesday' },
{ id: 3, text: 'Wednesday' },
{ id: 4, text: 'Thursday' },
{ id: 5, text: 'Friday' },
{ id: 6, text: 'Saturday' },
];
$scope.weekNumberRules = ['auto', 'firstDay', 'firstFourDays', 'fullWeek'];
$scope.currentValue = new Date();
$scope.firstDayOfWeek = 0;
$scope.showWeekNumbers = false;
$scope.weekNumberRule = $scope.weekNumberRules[0];
$scope.disabled = false;
$scope.minDateValue = null;
$scope.maxDateValue = null;
$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 = null;
}
};
$scope.setMaxDate = function (e) {
if (e.value) {
$scope.maxDateValue = new Date(now.getTime() + 1000 * 60 * 60 * 24 * 3);
} else {
$scope.maxDateValue = null;
}
};
$scope.disableWeekend = function (e) {
if (e.value) {
$scope.disabledDates = function (data) {
return data.view === 'month' && isWeekend(data.date);
};
} else {
$scope.disabledDates = null;
}
};
$scope.useCellTemplate = function (e) {
if (e.value) {
$scope.cellTemplate = getCellTemplate;
} else {
$scope.cellTemplate = 'cell';
}
};
const holidays = [[1, 0], [4, 6], [25, 11]];
function isWeekend(date) {
const day = date.getDay();
return day === 0 || day === 6;
}
function getCellTemplate(data) {
let cssClass = '';
if (data.view === 'month') {
if (isWeekend(data.date)) { cssClass = 'weekend'; }
$.each(holidays, (_, item) => {
if (data.date.getDate() === item[0] && data.date.getMonth() === item[1]) {
cssClass = 'holiday';
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/22.2.3/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/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/22.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" ng-app="DemoApp" ng-controller="DemoController">
<div class="calendar-container">
<div
dx-calendar="{
bindingOptions: {
min: 'minDateValue',
max: 'maxDateValue',
disabledDates: 'disabledDates',
firstDayOfWeek: 'firstDayOfWeek',
showWeekNumbers: 'showWeekNumbers',
weekNumberRule: 'weekNumberRule',
disabled: 'disabled',
value: 'currentValue',
zoomLevel: 'zoomLevel',
cellTemplate: 'cellTemplate'
}
}"
></div>
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<div
dx-check-box="{
text: 'Set minimum date',
value: false,
onValueChanged: setMinDate
}"
></div>
</div>
<div class="option">
<div
dx-check-box="{
text: 'Set maximum date',
value: false,
onValueChanged: setMaxDate
}"
></div>
</div>
<div class="option">
<div
dx-check-box="{
text: 'Disable weekends',
value: false,
onValueChanged: disableWeekend
}"
></div>
</div>
<div class="option">
<div
dx-check-box="{
text: 'Show week numbers',
bindingOptions: {
value: 'showWeekNumbers'
}
}"
></div>
</div>
<div class="option">
<div
dx-check-box="{
text: 'Use custom cell template',
value: false,
onValueChanged: useCellTemplate
}"
></div>
</div>
<div class="option">
<div
dx-check-box="{
text: 'Disabled',
bindingOptions: {
value: 'Disable the calendar'
}
}"
></div>
</div>
<div class="option">
<span>First day of week</span>
<div
dx-select-box="{
dataSource: weekDays,
bindingOptions: {
value: 'firstDayOfWeek'
},
displayExpr: 'text',
valueExpr: 'id',
}"
></div>
</div>
<div class="option">
<span>Week number rule</span>
<div
dx-select-box="{
dataSource: weekNumberRules,
bindingOptions: {
value: 'weekNumberRule'
},
}"
></div>
</div>
<div class="option">
<span>Zoom level</span>
<div
dx-select-box="{
dataSource: zoomLevels,
bindingOptions: {
value: 'zoomLevel'
}
}"
></div>
</div>
<div class="option">
<span>Selected date</span>
<div
id="selected-date"
dx-date-box="{
bindingOptions: {
value: 'currentValue',
min: 'minDateValue',
max: 'maxDateValue',
}
}"
></div>
</div>
</div>
</div>
</body>
</html>
.demo-container {
display: flex;
}
.calendar-container {
display: flex;
flex-direction: column;
flex-grow: 1;
align-items: center;
justify-content: center;
}
.dx-calendar-cell:not(.dx-calendar-other-month) .weekend,
.dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
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) .holiday {
color: #ff3030;
}
.dx-state-disabled.dx-calendar .dx-calendar-cell:not(.dx-calendar-other-month) .holiday {
color: #ff8080;
}
.dx-calendar-week-number-cell .week-number {
font-style: italic;
}
.caption {
font-weight: 500;
font-size: 18px;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.option {
margin-top: 10px;
}
