文章/答案/技术大牛

发布

社区首页 >问答首页 >Kendo UI调度程序:自定义事件模板中的边框颜色

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

Stack Overflow用户

提问于 2016-11-14 11:15:03

回答 1查看 1.4K关注 0票数 0

我有一个带有自定义事件模板的Kendo调度器小部件。在模板中，如果满足特定条件，我将向事件模板添加一个css类。我想要做的是改变事件的边界。我已经尝试过使用css选择器.k-event:has(div.custom-event.high)，但没有成功。在下面的小提琴里，有一个例子说明了我想要达到的目标。任务使用浅灰颜色着色，需要更改边框颜色的任务以黄色高亮显示。如您所见，我可以正确地选择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>

kendo-ui

css-selectors

kendo-scheduler

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-11-15 09:24:04

通常，eventTemplate只控制事件元素的内容。如果要更改整个事件的背景，则需要：

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

对于前一种方法，请检查以下演示方法：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40587449

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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