mirror of
https://github.com/hanzoai/jube-fork.git
synced 2026-11-02 14:29:36 +00:00
115 lines
3.8 KiB
HTML
Executable File
115 lines
3.8 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">
|
|
<div id="special-days">
|
|
<div id="calendar"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
var today = new Date(),
|
|
events = [
|
|
+new Date(today.getFullYear(), today.getMonth(), 8),
|
|
+new Date(today.getFullYear(), today.getMonth(), 12),
|
|
+new Date(today.getFullYear(), today.getMonth(), 24),
|
|
+new Date(today.getFullYear(), today.getMonth() + 1, 6),
|
|
+new Date(today.getFullYear(), today.getMonth() + 1, 7),
|
|
+new Date(today.getFullYear(), today.getMonth() + 1, 25),
|
|
+new Date(today.getFullYear(), today.getMonth() + 1, 27),
|
|
+new Date(today.getFullYear(), today.getMonth() - 1, 3),
|
|
+new Date(today.getFullYear(), today.getMonth() - 1, 5),
|
|
+new Date(today.getFullYear(), today.getMonth() - 2, 22),
|
|
+new Date(today.getFullYear(), today.getMonth() - 2, 27)
|
|
];
|
|
|
|
$("#calendar").kendoCalendar({
|
|
value: today,
|
|
dates: events,
|
|
weekNumber: true,
|
|
month: {
|
|
// template for dates in month view
|
|
content: '# if ($.inArray(+data.date, data.dates) != -1) { #' +
|
|
'<div class="' +
|
|
'# if (data.value < 10) { #' +
|
|
"exhibition" +
|
|
'# } else if ( data.value < 20 ) { #' +
|
|
"party" +
|
|
'# } else { #' +
|
|
"cocktail" +
|
|
'# } #' +
|
|
'">#= data.value #</div>' +
|
|
'# } else { #' +
|
|
'#= data.value #' +
|
|
'# } #',
|
|
weekNumber: '<a class="italic">#= data.weekNumber #</a>'
|
|
},
|
|
footer: false
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
|
|
#calendar,
|
|
#calendar .k-calendar-view,
|
|
#calendar .k-content {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Template Days */
|
|
|
|
.exhibition,
|
|
.party,
|
|
.cocktail {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.exhibition {
|
|
color: #ff9e00;
|
|
}
|
|
|
|
.party {
|
|
color: #ff4081;
|
|
}
|
|
|
|
.cocktail {
|
|
color: #00a1e8;
|
|
}
|
|
|
|
.italic{
|
|
font-style: italic;
|
|
}
|
|
|
|
</style>
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|