Kendo UI 调度程序：自定义事件模板中的边框颜色

Question

我有一个带有自定义事件模板的 Kendo UI 调度程序小部件。在模板中，如果满足特定条件，我将 css class 添加到事件模板。我想做的是改变事件的边界。我已经尝试使用 css select 或 .k-event:has(div.custom-event.high) 但没有成功。在下面 fiddle 中有一个我正在努力实现的例子。任务使用浅灰色着色，我需要更改边框颜色的任务以黄色突出显示。如您所见，我可以正确 select 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>

Answer 1

一般来说，eventTemplate 只控制事件元素的内容。如果您想更改整个活动的背景，则需要：

扩展内部元素的宽度和高度custom-event
将自定义 class 直接设置到小部件 dataBound 事件中的 .k-event 元素

对于前一种方法，请查看以下操作演示：

http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/event-custom-background-color

对于后一种实现，检查这个：

http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/modify-event-styling-on-databound

Kendo UI 调度程序：自定义事件模板中的边框颜色

Kendo UI scheduler: border color in custom event template

css

kendo-ui

css-selectors

kendo-scheduler