groupObject
The configuration of the scheduler resource(s) grouping.
Example
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2024/6/10"),
startTime: new Date("2024/6/10 07:00 AM"),
height: 600,
views: [
"day",
{ type: "workWeek", selected: true },
"week",
"month"
],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "https://demos.telerik.com/service/v2/core/meetings",
dataType: "jsonp"
}
},
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: ["Rooms", "Attendees"],
orientation: "horizontal"
},
resources: [
{
field: "roomId",
name: "Rooms",
dataSource: [
{ text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
{ text: "Meeting Room 201", value: 2, color: "#f58a8a" }
],
title: "Room"
},
{
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"
}
]
});
</script>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