groupObject
The configuration of the scheduler resource(s) grouping.
group.dateBoolean
(default: false)
If set to true
and the group.resources has some resources set the view is grouped by date.
Example - define group by date
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
group: {
resources: ["Rooms"],
date: true
},
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview",
roomId: 1 // the event is held in "Small meeting room" whose value is 1
},
{
id: 2,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Meeting",
roomId: 2 // the event is held in "Big meeting room" whose value is 2
}
],
resources: [
{
field: "roomId",
name: "Rooms",
dataColorField: "key",
dataSource: [
{ text: "Small meeting room", value: 1, key: "#aabbcc" },
{ text: "Big meeting room", value: 2, key: "green" }
]
}
]
});
</script>
group.resourcesArray
An array of resource names by which the scheduler events will be grouped.
Example - define groups
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
group: {
resources: ["Rooms"]
},
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview",
roomId: 1 // the event is held in "Small meeting room" whose value is 1
},
{
id: 2,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Meeting",
roomId: 2 // the event is held in "Big meeting room" whose value is 2
}
],
resources: [
{
field: "roomId",
name: "Rooms",
dataColorField: "key",
dataSource: [
{ text: "Small meeting room", value: 1, key: "#aabbcc" },
{ text: "Big meeting room", value: 2, key: "green" }
]
}
]
});
</script>
group.orientationString
(default: "horizontal")
The orientation of the group headers. Supported values are horizontal or vertical. Note that the agenda view is always in vertical orientation.
Example - define group orientation
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
group: {
resources: ["Rooms"],
orientation: "vertical"
},
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview",
roomId: 1 // the event is held in "Small meeting room" whose value is 1
},
{
id: 2,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Meeting",
roomId: 2 // the event is held in "Big meeting room" whose value is 2
}
],
resources: [
{
field: "roomId",
name: "Rooms",
dataColorField: "key",
dataSource: [
{ text: "Small meeting room", value: 1, key: "#aabbcc" },
{ text: "Big meeting room", value: 2, key: "green" }
]
}
]
});
</script>
In this article