mirror of
https://github.com/hanzoai/jube-fork.git
synced 2026-11-02 14:29:36 +00:00
109 lines
4.2 KiB
HTML
Executable File
109 lines
4.2 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Customizing templates</title>
|
|
<meta charset="utf-8">
|
|
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.common.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.default.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
|
|
<script src="../../js/jquery.min.js"></script>
|
|
<script src="../../js/jszip.min.js"></script>
|
|
<script src="../../js/kendo.all.min.js"></script>
|
|
<script src="../content/shared/js/console.js"></script>
|
|
<script>
|
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<a class="offline-button" href="../index.html">Back</a>
|
|
|
|
|
|
<div id="example">
|
|
<div class="demo-section k-content">
|
|
<h4>Birthday Calendar</h4>
|
|
<input id="datetimepicker" style="width: 100%;" />
|
|
</div>
|
|
|
|
<script>
|
|
function isInArray(date, dates) {
|
|
for(var idx = 0, length = dates.length; idx < length; idx++) {
|
|
var d = dates[idx];
|
|
if (date.getFullYear() == d.getFullYear() &&
|
|
date.getMonth() == d.getMonth() &&
|
|
date.getDate() == d.getDate()) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
var today = new Date(),
|
|
birthdays = [
|
|
new Date(today.getFullYear(), today.getMonth(), 11, 10, 0, 0),
|
|
new Date(today.getFullYear(), today.getMonth(), 11, 10, 30, 0),
|
|
new Date(today.getFullYear(), today.getMonth(), 11, 14, 0, 0),
|
|
new Date(today.getFullYear(), today.getMonth() + 1, 6, 20, 0, 0),
|
|
new Date(today.getFullYear(), today.getMonth() + 1, 27, 8, 0, 0),
|
|
new Date(today.getFullYear(), today.getMonth() + 1, 27, 18, 0, 0),
|
|
new Date(today.getFullYear(), today.getMonth() - 1, 3, 12, 0, 0),
|
|
new Date(today.getFullYear(), today.getMonth() - 2, 22, 16, 30, 0)
|
|
];
|
|
|
|
$("#datetimepicker").kendoDateTimePicker({
|
|
value: today,
|
|
dates: birthdays,
|
|
weekNumber: true,
|
|
month: {
|
|
// template for dates in month view
|
|
content: '# if (isInArray(data.date, data.dates)) { #' +
|
|
'<div class="birthday"></div>' +
|
|
'# } #' +
|
|
'#= data.value #',
|
|
weekNumber: ' <a class="italic">#= data.weekNumber #</a>'
|
|
},
|
|
footer: "Today - #=kendo.toString(data, 'd') #",
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.k-calendar .k-content {
|
|
table-layout: auto;
|
|
}
|
|
.k-calendar .k-month .k-link {
|
|
width: auto;
|
|
display: flex;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
.birthday {
|
|
background: transparent url(../content/web/calendar/cake.png) no-repeat 0 50%;
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
vertical-align: middle;
|
|
margin-right: 3px;
|
|
}
|
|
.italic {
|
|
font-style: italic;
|
|
}
|
|
</style>
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|