Hello !
Now i am exploring Kendo UI, especially scheduler. The scheduler do not display on the browser. How can i fix this error?
Here is the source code:
<!DOCTYPE html>
<html>
<head>
<title>Restrictions</title>
<meta charset="utf-8">
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../styles/kendo.common.min.css" rel="stylesheet">
<link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
<link href="../../styles/kendo.default.min.css" rel="stylesheet">
<link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
<link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
<script src="../../js/jquery.min.js"></script>
<script src="../../js/kendo.all.min.js"></script>
<script src="../content/shared/js/console.js"></script>
<script>
</script>
</head>
<body>
<div id="example" class="k-content">
<div id="scheduler">
<div id="people">
<input checked type="checkbox" id="alex" value="1">
<input checked type="checkbox" id="bob" value="2">
<input type="checkbox" id="charlie" value="3">
</div>
</div>
</div>
<script id="event-template" type="text/x-kendo-template">
<div class="movie-template">
<p>#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #</p>
<h3>#: title #</h3>
</div>
</script>
<script>
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
allDaySlot: false,
views: ["day","week","month","agenda"],
eventTemplate: $("#event-template").html(),
dataSource: {
data: [
{
meetingID: 1,
title: "Call Charlie about the project",
start: new Date("2013/6/13 10:30"),
end: new Date("2013/6/13 11:30"),
ownerId:2
},
{
meetingID: 2,
title: "Performance review",
start: new Date("2013/6/13 9:00"),
end: new Date("2013/6/13 12:30"),
ownerId:1
},
{
meetingID: 3,
title: "HR Lecture",
start: new Date("2013/6/13 13:00"),
end: new Date("2013/6/13 14:30")
ownerId:2
}
],
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { type: "number" },
title: { defaultValue: "No title", validation: { required: true } },
start: { type: "date" },
end: { type: "date" },
ownerId: { defaultValue: 1 },
isAllDay: { type: "boolean" }
}
}
}
},
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
},
resources: [
{
field: "ownerId",
name: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
});
$("#people :checkbox").change(function(e) {
var checked = $.map($("#people :checked"), function(checkbox) {
return parseInt($(checkbox).val());
});
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.filter({
operator: function(task) {
return $.inArray(task.ownerId, checked) >= 0;
}
});
});
});
</script>
<style scoped>
.invalid-slot {
background: red !important;
cursor: no-drop;
}
.movie-template img {
float: left;
margin: 0 8px;
}
.movie-template p {
margin: 5px 0 0;
}
.movie-template h3 {
padding: 0 8px 5px;
font-size: 12px;
}
.movie-template a {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.k-state-hover .movie-template a,
.movie-template a:hover {
color: #000000;
}
.k-nav-current > .k-link span + span {
max-width: 200px;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: top;
}
#team-schedule {
background: url('../content/web/scheduler/team-schedule.png') transparent no-repeat;
height: 115px;
position: relative;
}
#people {
background: url('../content/web/scheduler/scheduler-people.png') no-repeat;
width: 345px;
height: 115px;
position: absolute;
right: 0;
}
#alex {
position: absolute;
left: 4px;
top: 81px;
}
#bob {
position: absolute;
left: 119px;
top: 81px;
}
#charlie {
position: absolute;
left: 234px;
top: 81px;
}
</style>
</body>
</html>
Now i am exploring Kendo UI, especially scheduler. The scheduler do not display on the browser. How can i fix this error?
Here is the source code:
<!DOCTYPE html>
<html>
<head>
<title>Restrictions</title>
<meta charset="utf-8">
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../styles/kendo.common.min.css" rel="stylesheet">
<link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
<link href="../../styles/kendo.default.min.css" rel="stylesheet">
<link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
<link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
<script src="../../js/jquery.min.js"></script>
<script src="../../js/kendo.all.min.js"></script>
<script src="../content/shared/js/console.js"></script>
<script>
</script>
</head>
<body>
<div id="example" class="k-content">
<div id="scheduler">
<div id="people">
<input checked type="checkbox" id="alex" value="1">
<input checked type="checkbox" id="bob" value="2">
<input type="checkbox" id="charlie" value="3">
</div>
</div>
</div>
<script id="event-template" type="text/x-kendo-template">
<div class="movie-template">
<p>#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #</p>
<h3>#: title #</h3>
</div>
</script>
<script>
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
allDaySlot: false,
views: ["day","week","month","agenda"],
eventTemplate: $("#event-template").html(),
dataSource: {
data: [
{
meetingID: 1,
title: "Call Charlie about the project",
start: new Date("2013/6/13 10:30"),
end: new Date("2013/6/13 11:30"),
ownerId:2
},
{
meetingID: 2,
title: "Performance review",
start: new Date("2013/6/13 9:00"),
end: new Date("2013/6/13 12:30"),
ownerId:1
},
{
meetingID: 3,
title: "HR Lecture",
start: new Date("2013/6/13 13:00"),
end: new Date("2013/6/13 14:30")
ownerId:2
}
],
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { type: "number" },
title: { defaultValue: "No title", validation: { required: true } },
start: { type: "date" },
end: { type: "date" },
ownerId: { defaultValue: 1 },
isAllDay: { type: "boolean" }
}
}
}
},
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
},
resources: [
{
field: "ownerId",
name: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
});
$("#people :checkbox").change(function(e) {
var checked = $.map($("#people :checked"), function(checkbox) {
return parseInt($(checkbox).val());
});
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.filter({
operator: function(task) {
return $.inArray(task.ownerId, checked) >= 0;
}
});
});
});
</script>
<style scoped>
.invalid-slot {
background: red !important;
cursor: no-drop;
}
.movie-template img {
float: left;
margin: 0 8px;
}
.movie-template p {
margin: 5px 0 0;
}
.movie-template h3 {
padding: 0 8px 5px;
font-size: 12px;
}
.movie-template a {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.k-state-hover .movie-template a,
.movie-template a:hover {
color: #000000;
}
.k-nav-current > .k-link span + span {
max-width: 200px;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: top;
}
#team-schedule {
background: url('../content/web/scheduler/team-schedule.png') transparent no-repeat;
height: 115px;
position: relative;
}
#people {
background: url('../content/web/scheduler/scheduler-people.png') no-repeat;
width: 345px;
height: 115px;
position: absolute;
right: 0;
}
#alex {
position: absolute;
left: 4px;
top: 81px;
}
#bob {
position: absolute;
left: 119px;
top: 81px;
}
#charlie {
position: absolute;
left: 234px;
top: 81px;
}
</style>
</body>
</html>
1 Answer, 1 is accepted
0
Hi,
After checking the provided code it seems that current behavior is related to missed comma after one of the properties in the sample data:
Also you can check the updated demo below:
Regards,
Vladimir Iliev
Telerik
After checking the provided code it seems that current behavior is related to missed comma after one of the properties in the sample data:
{ meetingID: 3, title: "HR Lecture", start: new Date("2013/6/13 13:00"), end: new Date("2013/6/13 14:30"), ownerId:2}Also you can check the updated demo below:
Regards,
Vladimir Iliev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!