Search code examples
csskendo-uicss-selectorskendo-scheduler

Kendo UI scheduler: border color in custom event template

I have a Kendo UI scheduler widget with a custom event template. In the template I add a css class to the event template if a certain condition is met. What I want to do is to change the border of the event. I have already tried by using the css selector .k-event:has(div.custom-event.high) but with no success. In the below fiddle there is an example of what I'm trying to achieve. The task are colored using the lightgray color, the tasks on which I need to change the border color are highlighted in yellow. As you can see I can correctly select div.k-event and div.custom-event.high but not .k-event:has(div.custom-event.high). Can someone help me?

$(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>

Solution

  • In general, the eventTemplate controls only the content of the event element. If you would like to change the background of the whole event, then you will need to:

    • expand the width and height of the inner element custom-event
    • set the custom class directly to the .k-event element in the dataBound event of the widget

    For the former approach check the following how-to demo:

    For the latter implementation check this one: