javascript - 如何将 linkClass-Attribute 添加到 Kendo UI 日历事件数据?
问题描述
我使用 Kendo UI 日历来显示可用的约会。在第一步中,我创建了一系列约会。这些都显示在日历中。到目前为止,一切都很好。
现在我想为各个约会添加一个附加属性,然后在模板中分配 CSS 类。
到目前为止,我只能查询模板中的值(Day)。
如何更改链接类?
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/calendar/template">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.metroblack.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.metroblack.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>
<body>
<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(), 13),
+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)
];
$("#calendar").kendoCalendar({
value: today,
dates: events,
disableDates: ["sa", "su"],
weekNumber: true,
month: {
content: '# if ($.inArray(+data.date, data.dates) != -1) { #' +
'<div class="' +
'# console.log(data); if (data.value < 10) { #' +
"full" +
'# } else if ( data.value < 20 ) { #' +
"free" +
'# } else { #' +
"half" +
'# } #' +
'">#= 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 */
.full,
.free,
.half {
font-weight: bold;
}
.full {
color: #fff;
background-color: #ea0000;
}
.free {
color: #ff4081;
}
.half {
color: #000000;
background-color: #ffd41e;
}
.italic{
font-style: italic;
}
</style>
</div>
</body>
</html>
解决方案
我没有找到 Kendo UI 日历的解决方案,所以我遇到了 Jquery 日期选择器。这是我的解决方案。也许它可以帮助某人。
$(function() {
var dates = [{
date: '05/13/2020',
type: 'highlightFull',
note: 'note1'
},
{
date: '05/11/2020',
type: 'highlightSemi',
note: 'note2'
}
];
function highlightDays(date) {
var arrayLength = Object.keys(dates).length // Second
for (var i = 0; i < arrayLength; i++) {
if (new Date(dates[i].date).toString() == date.toString()) {
return [true, dates[i].type, dates[i].note];
}
}
return [true, ''];
}
$('#datepicker').datepicker({
beforeShowDay: highlightDays
});
});
td.highlightFull {
border: none !important;
padding: 1px 0 1px 1px !important;
background: none !important;
overflow: hidden;
}
td.highlightFull a {
background: #ad3f29 url(bg.png) 50% 50% repeat-x !important;
border: 1px #88a276 solid !important;
}
td.highlightSemi {
border: none !important;
padding: 1px 0 1px 1px !important;
background: none !important;
overflow: hidden;
}
td.highlightSemi a {
background: #ffff33 url(bg.png) 50% 50% repeat-x !important;
border: 1px #88a276 solid !important;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="datepicker"></div>
推荐阅读
- unity3d - 如何使用 Unity 在 ARcore-Augmented Image 场景中显示不同图像的不同预制件?
- python - Python优化了大多数余弦相似向量
- c# - 是否可以将 winforms 状态条和进度条转换为 wpf 状态栏?
- mysql - Mysql查询以获取第一个位置的特定ID
- ruby - IRB 要求 mongo 失败无法加载此类文件——mongo
- oop - 如何在 Dart 中实现继承?
- xml - 转换文件根据子节点的文本值替换整个父节点 - XML Transform
- vb.net - 如何在 DatagridView Checkbox vb.net 中保持选中复选框
- rollup - 如何使用 Rollup 插件挂钩的返回承诺?
- api - 在 .net 核心 web api 中存储 JWT 令牌的位置?