I am using cytoscape.js to display a directed graph and I display 2 properties in a label.
I want to wrap the text and this is said to be possbile in the documentation but I cant get it to work. Can anyone help with the syntax?
'label': 'data(name)',
'font-size' : 14
'text-wrap': 'wrap/n'
text-wrap does not seem to work, it hangs up the graph display.
Do I need to set 'text-max-width'?
thanks in advance
You can't add the \n in the text-wrap css property, you are looking for the label property:
{
"selector": ".multiline-manual",
"style": {
"text-wrap": "wrap"
}
},
{
"selector": ".multiline-auto",
"style": {
"text-wrap": "wrap",
"text-max-width": 80
}
},
One of these classes should be added to the node you want your label to be wrapped. You can do it like this:
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: "node",
css: {
content: "data(name)",
height: "60px",
width: "60px"
}
},
{
selector: "edge",
css: {
"target-arrow-shape": "triangle"
}
},
{
selector: ".multiline-manual",
style: {
"text-wrap": "wrap"
}
},
{
selector: ".multiline-auto",
style: {
"text-wrap": "wrap",
"text-max-width": 80
}
}
],
elements: {
nodes: [{
data: {
id: "n0",
name: "This is a very long name and all I have to do is to add a class!"
},
classes: "multiline-auto"
},
{
data: {
id: "n1",
name: "Shorter"
},
classes: "multiline-auto"
},
{
data: {
id: "n2",
name: "This shouldn't wrap"
},
classes: "multiline-manual"
},
{
data: {
id: "n3",
name: "This should\nwrap"
},
classes: "multiline-manual"
}
],
edges: [{
data: {
source: "n0",
target: "n1"
}
},
{
data: {
source: "n1",
target: "n2"
}
},
{
data: {
source: "n1",
target: "n3"
}
}
]
},
layout: {
name: "dagre",
padding: 5
}
}));
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
left: 0;
top: 0;
float: left;
position: absolute;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/cytoscape#3.3.0/dist/cytoscape.min.js">
</script>
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
<!-- cyposcape dagre -->
<script src="https://unpkg.com/dagre#0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
Related
I have Vue.js app where use DevExtreme's DxDataGrid and DxPopup components. The datagrid contains a list of records (rows). When I double click particular row, the popup modal dialog opens and shows appropriate fields. That's fine.
The issue is I'm not able to change the style of popup modal dialog using CSS selectors in my component. I need to change all - border, colors, size of fields, fonts and so on.
The code looks as following:
The list:
<template>
<div>
<DxDataGrid
:data-source="testArray"
:row-alternation-enabled="true"
:show-borders="true"
:columns="columns"
#row-dbl-click="rowDblClick"
>
</DxDataGrid>
<v-app-types-by-product-modal ref="appTypesByProductModal" />
</div>
</template>
<script>
import "devextreme/dist/css/dx.light.css";
import { DxDataGrid } from "devextreme-vue/data-grid";
import VAppTypesByProductModal from "./v-app-types-by-product-modal.vue";
export default {
components: {
DxDataGrid,
VAppTypesByProductModal,
},
data() {
return {
testArray: [
{ Id: 1, ProductName: "Product 1", Status: "Yes", StageName: "Begin", SignDate: "11.07.2022" },
{ Id: 2, ProductName: "Product 2", Status: "Yes", StageName: "Middle", SignDate: "12.07.2022" },
{ Id: 3, ProductName: "Product 3", Status: "No", StageName: "End", SignDate: "13.07.2022" },
],
columns: [
{ dataField: "Id", caption: "ID", dataType: "number", width: "50px" },
{ dataField: "ProductName", caption: "PRODUCT", dataType: "string", width: "150px" },
{ dataField: "Status", caption: "STATUS", dataType: "string", width: "150px" },
{ dataField: "StageName", caption: "STAGE", dataType: "string", width: "150px"},
{ dataField: "SignDate", caption: "DATA", dataType: "string",width: "150px"},
{
type: "buttons",
width: "150px",
buttons: [
{
hint: "Edit",
icon: "edit",
visible(e) {
return !e.row.isEditing;
},
onClick: (e) => {
this.$refs.appTypesByProductModal.showModal(e.row.data);
},
},
{
hint: "Remove",
icon: "remove",
visible(e) {
return !e.row.isEditing;
},
},
],
},
],
selectedElement: {},
};
},
methods: {
rowDblClick(e) {
this.$refs.appTypesByProductModal.showModal(e.data);
},
},
};
</script>
<style scoped>
</style>
The modal dialog:
<template>
<v-modal-dialog
:visible="isModalVisible"
title="Title"
:width="500"
:height="500"
#hiding="onHiding"
>
<DxForm :form-data="selectedItem" label-mode="static">
<DxSimpleItem data-field="Id" :is-required="true" />
<DxSimpleItem data-field="ProductName" :is-required="true" :editor-options="{disabled: true}" />
<DxSimpleItem data-field="Status" />
<DxSimpleItem data-field="StageName" />
<DxSimpleItem data-field="SignDate" />
</DxForm>
<DxToolbarItem
widget="dxButton"
toolbar="bottom"
:options="okButtonOptions"
/>
<DxToolbarItem
widget="dxButton"
toolbar="bottom"
:options="closeButtonOptions"
/>
</v-modal-dialog>
</template>
<script>
import "devextreme/dist/css/dx.light.css";
import { DxForm, DxSimpleItem } from "devextreme-vue/form";
import { DxToolbarItem } from "devextreme-vue/popup";
import VModalDialog from "./v-modal-dialog.vue";
export default {
components: {
VModalDialog,
DxForm,
DxSimpleItem,
DxToolbarItem,
},
data() {
return {
isModalVisible: false,
selectedItem: {},
okButtonOptions: {
text: "Ok",
onClick: () => {
this.clearFormData();
this.isModalVisible = false;
},
},
closeButtonOptions: {
text: "Close",
onClick: () => {
this.clearFormData();
this.isModalVisible = false;
},
},
};
},
methods: {
showModal(item) {
this.selectedItem = {...item};
this.isModalVisible = true;
},
clearFormData() {
this.selectedItem = null;
},
onHiding() {
this.clearFormData();
this.isModalVisible = false;
},
},
};
</script>
<style scoped>
</style>
The modal dialog base:
<template>
<DxPopup
v-bind="$attrs"
v-on="$listeners"
:hide-on-outside-click="false"
:drag-enabled="true"
position="center"
#hiding="onHiding"
>
<slot v-for="(_, name) in $slots" :name="name" :slot="name" />
</DxPopup>
</template>
<script>
import "devextreme/dist/css/dx.light.css";
import { DxPopup } from "devextreme-vue/popup";
export default {
inheritAttrs: false,
components: {
DxPopup,
},
data() {
return {}
},
methods: {
onHiding() {
this.$emit("hiding");
},
},
};
</script>
<style scoped>
/* ::v-deep .dx-popup-normal {
border-radius: 20px !important;
}
::v-deep .dx-popup-title {
border-bottom: 0px !important;
} */
/* #dxPopupContainer .dx-popup-normal {
border-radius: 20px !important;
}
#dxPopupContainer .dx-toolbar {
border-bottom: 0px;
} */
/* #dxPopupContainer {
color: red;
background-color: green;
} */
/* ::v-deep .dx-overlay-content .dx-popup-normal .dx-popup-draggable .dx-resizable {
border-radius: 20px;
}
::v-deep .dx-toolbar > .dx-widget > dx-visibility-change-handler > dx-collection > dx-popup-title dx-has-close-button {
border-bottom: 0px;
} */
/* #dxPopupContainer .dx-popup-normal {
border-radius: 20px !important;
}
#dxPopupContainer .dx-popup-title {
border-bottom: 0px !important;
} */
</style>
Here's the CodeSandbox demo:
https://codesandbox.io/s/overview-devextreme-data-grid-forked-5cegqw
As you can see I've tried something, but nothing helped.
How to overcome this issue?
Replace
::v-deep .dx-popup-normal {
border-radius: 20px !important;
}
with
:global(.dx-popup-normal) {
border-radius: 20px !important;
}
I'm trying to give a background colour to my ApexCharts polarArea chart (I want the areas marked by red dots in the image to be grey/white):
I can't find a way to do this. I've tried adding fill to the various options, but nothing. I thought it might be possible with polygons like the radar chart, but no.
The closest I have come is by adding a CSS class to the chart on the containing Vue component:
<Chart class="chart" :myValues='this.myValues' :key="componentKey" />
.chart {
width: 320px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border-radius: 50%;
margin: auto;
padding-top: 3px;
padding-right: 4px;
}
But annoyingly it's not centred on the chart origin and even with pixel precise increments to padding it's not quite right! Also, if possible I'd like alternating colours for each of the rings, like is possible with the radar chart.
My full chart Vue component:
<template>
<div class="polarChart">
<apexcharts height="360" type="polarArea" :options="chartOptions" :series="series"></apexcharts>
</div>
</template>
<style scoped>
.polarChart {
align-items: center;
}
</style>
<script>
import VueApexCharts from 'vue-apexcharts'
export default {
name: 'Chart',
components: {
apexcharts: VueApexCharts,
},
props: ['myValues'],
data: function() {
return {
series: this.myValues,
plotOptions: {
polarArea: {
dataLabels: {
offset: 30
},
}
},
chartOptions: {
labels: ['A', 'B', 'C', 'D', 'E', 'F'],
colors:['#403d39', '#ffbe0b', '#00b4d8', '#e73265', '#90be6d', '#ada7c9'],
legend: {
show: false
},
yaxis: {
max: 100,
show: false
},
xaxis: {
categories: ['A.', 'B.', 'C.', 'D.', 'E.', 'F.']
},
dataLabels: {
enabled: true,
formatter: function (val, opts) {
return Math.round(opts.w.globals.series[opts.seriesIndex]) + "% " + opts.w.globals.labels[opts.seriesIndex]
},
background: {
enabled: true,
borderRadius:2,
},
style: {
colors: ['#403d39', '#ffbe0b', '#00b4d8', '#e73265', '#90be6d', '#ada7c9'],
}
},
tooltip: {
// enabled: false
},
chart: {
type: 'polarArea',
},
stroke: {
colors: ['#fff']
},
fill: {
opacity: 1
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: '100%'
},
legend: {
position: 'bottom'
}
}
}]
},
}
},
methods: {
addData(){
this.updateChart();
},
updateChart() {
this.series = [{
data: this.freshnessValues
}]
}
},
}
</script>
I have an image column in a grid, and I show the image to 25px x 25px so it fits in the row nicely.
I added a hover to the images and when the mouse hovers on them there are supposed be offset from the left (which it does) and then the image is supposed to get bigger so you can see it better.
2 things are happening
1) When I hover on the image, its flickers continuously
2) Even though the image goes 100px to the left, it doesn't expand to the new size.
I have no idea why this is happening.
$(document).ready(function() {
LoadCatalogsGrid();
});
var myData = [{
"RoomName": "Room 1",
"OptionImageFile": "a"
},
{
"RoomName": "Room 2",
"OptionImageFile": "b"
}
];
function optionGridImage(url) {
return "<div class='imageOptionsList'><a style='text-align:center;height:25px;width:25px;' href='" +
GetCatalogImageLocation(url) +
"'><img src='" +
GetCatalogImageLocation(url) +
"' style='height:25px;width:25px;' alt=''/></a></div>";
}
function GetCatalogImageLocation(imageName) {
if (imageName == "a") {
return "https://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/king_lead.jpg?itok=4b75-ttE&resize=1100x1100";
} else {
return "https://pmcvariety.files.wordpress.com/2017/08/king-of-the-hill.jpg?w=1000&h=562&crop=1";
}
}
function LoadCatalogsGrid() {
$("#Grid").empty();
$("#Grid").kendoGrid({
scrollable: true,
selectable: "row",
filterable: false,
height: 700,
columns: [{
field: "RoomName",
title: "Room Name",
width: "120px",
template: "<div >#=RoomName #</div>"
},
{
field: "OptionImageFile",
title: "Image",
template: "#= optionGridImage(OptionImageFile) #",
attributes: {
style: "margin:0 auto;"
},
width: 50
}
],
dataSource: {
data: myData
},
dataBound: function(e) {
}
});
}
.imageOptionsList:hover a {
visibility: visible;
width: 250px !important;
height: 325px !important;
margin-left: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
<div id="Grid"></div>
** Snippet Edit **
So now when I hover the image is no longer flickering, however when you hover over the image it moves left, and it shouldn't it should just stay in its spot and when hovered show a bigger version
Here you are:
$(document).ready(function() {
LoadCatalogsGrid();
});
var myData = [{
"RoomName": "Room 1",
"OptionImageFile": "a"
},
{
"RoomName": "Room 2",
"OptionImageFile": "b"
}
];
function optionGridImage(url) {
url = GetCatalogImageLocation(url);
return `
<div class="imageOptionsList">
<a style="background-image:url(${url})" href="${url}">
<img src="${url}" alt="">
</a>
</div>
`;
}
function GetCatalogImageLocation(imageName) {
if (imageName == "a") {
return "https://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/king_lead.jpg?itok=4b75-ttE&resize=1100x1100";
} else {
return "https://pmcvariety.files.wordpress.com/2017/08/king-of-the-hill.jpg?w=1000&h=562&crop=1";
}
}
function LoadCatalogsGrid() {
$("#Grid").empty();
$("#Grid").kendoGrid({
scrollable: true,
selectable: "row",
filterable: false,
height: 700,
columns: [{
field: "RoomName",
title: "Room Name",
width: "120px",
template: "<div >#=RoomName #</div>"
},
{
field: "OptionImageFile",
title: "Image",
template: "#= optionGridImage(OptionImageFile) #",
attributes: {
style: "margin:0 auto;"
},
width: 50
}
],
dataSource: {
data: myData
},
dataBound: function(e) {
}
});
}
.k-grid td {
overflow: visible !important
}
.imageOptionsList a {
position: relative;
display: inline-block;
height: 25px;
width: 25px;
background-size: cover;
}
.imageOptionsList a img {
position: absolute;
top: 50%;
right: 50%;
width: 0;
height: 0;
transition: .5s
}
.imageOptionsList a:hover {
z-index: 1
}
.imageOptionsList a:hover img {
width: 50vw;
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
<div id="Grid"></div>
Remove the margin-left: 100px line from your hover class. Also, try using transform for increasing image size. The code below will double the image size.
.imageOptionsList:hover img {
visibility: visible;
transform: scale(2);
}
You've got some conflicting information in your post. You mention the left offset as correct, then say it should at the end.
Below I removed the inline styles you had on the image and updated your selector to target img tags within .imageOptionsList. I've also added a transition so it doesn't do a hard snap, feel free to remove.
$(document).ready(function() {
LoadCatalogsGrid();
});
var myData = [{
"RoomName": "Room 1",
"OptionImageFile": "a"
},
{
"RoomName": "Room 2",
"OptionImageFile": "b"
}
];
function optionGridImage(url) {
return "<div class='imageOptionsList'><a style='text-align:center;height:25px;width:25px;' href='" +
GetCatalogImageLocation(url) +
"'><img src='" +
GetCatalogImageLocation(url) +
"alt=''/></a></div>";
}
function GetCatalogImageLocation(imageName) {
if (imageName == "a") {
return "https://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/king_lead.jpg?itok=4b75-ttE&resize=1100x1100";
} else {
return "https://pmcvariety.files.wordpress.com/2017/08/king-of-the-hill.jpg?w=1000&h=562&crop=1";
}
}
function LoadCatalogsGrid() {
$("#Grid").empty();
$("#Grid").kendoGrid({
scrollable: true,
selectable: "row",
filterable: false,
height: 700,
columns: [{
field: "RoomName",
title: "Room Name",
width: "120px",
template: "<div >#=RoomName #</div>"
},
{
field: "OptionImageFile",
title: "Image",
template: "#= optionGridImage(OptionImageFile) #",
attributes: {
style: "margin:0 auto;"
},
width: 50
}
],
dataSource: {
data: myData
},
dataBound: function(e) {
}
});
}
.imageOptionsList img {
width: 25px;
height: 25px;
transition: height 500ms ease-in-out, width 500ms ease-in-out;
}
.imageOptionsList img:hover {
width: 250px;
height: 325px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
<div id="Grid"></div>
[![enter image description here][1]][1]
The Slice color and the Legend color of the Pie-Chart do not match when the color is set using className. Doing this for (some) other charts works.
As you can see in the following code snippet, the pie slice and the Legend color for Chrome do not match.
// Build the chart
Highcharts.chart('container-donut', {
chart: {
type: 'pie'
},
plotOptions: {
pie: {
cursor: 'pointer',
showInLegend: true,
}
},
series: [{
name: 'browsers',
data: [
{
name: 'Chrome',
y: 60 ,
className: 'MyCustomColor'
},
{ name: 'Internet Explorer', y: 5 },
{ name: 'Firefox', y: 5 },
{ name: 'Edge', y: 5 },
{ name: 'Safari', y: 5 },
{ name: 'Other', y: 5 }
]
}]
});
.MyCustomColor {
fill: green;
}
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container-donut" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<div id="container-column" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
Your css is not accessing the legend element, which is a <rect> inside of the <g class="MyCustomColor">
Changing your css to this should solve your issue:
.MyCustomColor, .MyCustomColor rect {
fill: green;
}
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>
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:
http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/event-custom-background-color
For the latter implementation check this one:
http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/modify-event-styling-on-databound