我有一个带有自定义事件模板的 Kendo UI 调度程序小部件。在模板中，如果满足特定条件，我会向事件模板添加一个 css 类。我想做的是改变事件的边界。我已经尝试使用 css 选择器 .k-event:has(div.custom-event.high) 但没有成功。在下面的 fiddle 中，有一个我正在努力实现的例子。任务使用浅灰色着色，我需要更改边框颜色的任务以黄色突出显示。如您所见，我可以正确选择 div.k-event 和 div.custom-event.high 但不是 .k-event:has(div.custom -event.high)。有人可以帮助我吗？
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
eventTemplate: $('#template').html(),
height: 600,
views: [{
type: "week",
selected: true
}],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/meetings",
dataType: "jsonp"
},
update: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/update",
dataType: "jsonp"
},
create: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/create",
dataType: "jsonp"
},
destroy: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
schema: {
model: {
id: "meetingID",
fields: {
meetingID: {
from: "MeetingID",
type: "number"
},
title: {
from: "Title",
defaultValue: "No title",
validation: {
required: true
}
},
start: {
type: "date",
from: "Start"
},
end: {
type: "date",
from: "End"
},
startTimezone: {
from: "StartTimezone"
},
endTimezone: {
from: "EndTimezone"
},
description: {
from: "Description"
},
recurrenceId: {
from: "RecurrenceID"
},
recurrenceRule: {
from: "RecurrenceRule"
},
recurrenceException: {
from: "RecurrenceException"
},
roomId: {
from: "RoomID",
nullable: true
},
attendees: {
from: "Attendees",
nullable: true
},
isAllDay: {
type: "boolean",
from: "IsAllDay"
}
}
}
}
},
group: {
resources: ["Attendees"],
orientation: "horizontal"
},
resources: [{
field: "attendees",
name: "Attendees",
dataSource: [{
text: "Alex",
value: 1,
color: "#f8a398"
}, {
text: "Bob",
value: 2,
color: "#51a0ed"
}, {
text: "Charlie",
value: 3,
color: "#56ca85"
}],
multiple: true,
title: "Attendees"
}]
});
});div.k-event {
background-color: lightgray !important;
}
.k-event:has(div.custom-event.high) {
background-color: red !important;
}
div.custom-event.high {
background-color: yellow;
}<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical">
<style>
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.mobile.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="scheduler"></div>
</div>
<script id="template" type="text/x-kendo-template">
<div class="custom-event #if(title.indexOf('Eval') > -1) {# high #}#">
<p>
#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #
</p>
<h3>#: title #</h3>
</div>
</script>
</body>
</html>最佳答案
一般来说，eventTemplate仅控制事件元素的内容。如果您想更改整个事件的背景，则需要:
- 扩展内部元素的宽度和高度
custom-event - 将自定义类直接设置为dataBound 中的
.k-event元素。小部件的事件
对于前一种方法，请查看以下操作演示:
- > http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/event-custom-background-color
对于后一种实现，检查这个:
关于css - 剑道 UI 调度程序 : border color in custom event template，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40587449/