Hi ! I am learning and working with Kendo UI Scheduler. In above scheduler i am using template to show in every event (modal popup) an image, start date, end date, and title. When i want to create a new event and click on scheduler , the previous events make hidden or dropped.
How can i fix this error or bug /
p.s: when i remove the image element by template, i can create new events succesfully.
Thanks in advance!
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"
<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">
<img src="#= image #" style="width:50px; height:50px">
<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,
image: "https://taskworkshop.com/static/img/taskWorkshopIcon.jpg",
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,
image: "http://www.eccourts.org/wp-content/themes/ECCOURTS/template/Delete-icon.png",
title: "Performance review",
start: new Date("2013/6/13 9:00"),
end: new Date("2013/6/13 12:30"),
ownerId:1
},
{
meetingID: 3,
image: "https://taskworkshop.com/static/img/taskWorkshopIcon.jpg",
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;
}
</style>
</body>
</html>
How can i fix this error or bug /
p.s: when i remove the image element by template, i can create new events succesfully.
Thanks in advance!
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"
<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">
<img src="#= image #" style="width:50px; height:50px">
<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,
image: "https://taskworkshop.com/static/img/taskWorkshopIcon.jpg",
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,
image: "http://www.eccourts.org/wp-content/themes/ECCOURTS/template/Delete-icon.png",
title: "Performance review",
start: new Date("2013/6/13 9:00"),
end: new Date("2013/6/13 12:30"),
ownerId:1
},
{
meetingID: 3,
image: "https://taskworkshop.com/static/img/taskWorkshopIcon.jpg",
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;
}
</style>
</body>
</html>