This is a migrated thread and some comments may be shown as answers.

[Solved] timelineMonth issue

2 Answers 137 Views

Scheduler

This is a migrated thread and some comments may be shown as answers.

Jeremy asked on 10 Dec 2014, 01:40 AM

1.jpg

2.jpg

Hi. I have been playing with the "http://dojo.telerik.com/" code editor evaluating the Scheduler API. I have set the code to set the :
views: [ { type: "timelineMonth" } ]
and this works fine. However, what I have found is, if I create a new item in a resource for say "1 Dec 2014 10:00 AM" ending at "2 Dec 01:00 PM" then create another item in the same resource for "2 Dec 2014 10:00 AM" ending at "4 Dec 01:00 PM", the new items are not lined up side by side.
I have attached 2 files. The file "1.jpg" is what I get when I do the above, and "2.jpg" is the one I WANT to achieve.
I have looked through the documentation and I cant see how to resolve it. Is someone able to help? I have attached my code below.

Thanks Jeremy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/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.3.1119/js/kendo.all.min.js"></script>
</head>
<body>

<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
snap: true,

views: [
{
type: "timelineMonth",
columnWidth: 50,
majorTimeHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'h')#</strong><sup>00</sup>")
}
],
group: {
resources: ["Rooms"],
orientation: "vertical"
},
dataSource: [
{
id: 1,
start: new Date("2013/6/6 01:00 PM"),
end: new Date("2013/6/8 10:00 AM"),
title: "Interview1",
roomId: 1
},
{
id: 2,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 PM"),
title: "Interview2",
roomId: 2
},
{
id: 3,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 PM"),
title: "Interview3",
roomId: 3
}
],
resources: [
{
field: "roomId",
name: "Rooms",
dataColorField: "key",
dataSource: [
{ text: "P1 1", value: 1, key: "#aabbcc" },
{ text: "P1 2", value: 2, key: "#aabbcc" },
{ text: "P1 3", value: 3, key: "#aabbcc" },
{ text: "P1 4", value: 4, key: "#aabbcc" },
{ text: "P1 5", value: 5, key: "#aabbcc" },
{ text: "P1 6", value: 6, key: "#aabbcc" },
{ text: "P1 7", value: 7, key: "#aabbcc" },
{ text: "P1 8", value: 8, key: "#aabbcc" },
{ text: "P1 9", value: 9, key: "#aabbcc" },
{ text: "P1 10", value: 10, key: "#aabbcc" }
],
multiple: true
}
]
});
</script>
</body>
</html>

[Solved] timelineMonth issue

2 Answers, 1 is accepted