views.groupObject
The configuration of the view 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,
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "https://demos.telerik.com/service/v2/core/meetings",
}
},
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" },
roomId: { from: "RoomID", nullable: true },
attendees: { from: "Attendees", nullable: true },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
},
views: [
{
type: "workWeek",
selected: true,
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" }
],
multiple: true,
title: "Attendees"
}
]
});
</script>views.group.dateBoolean(default: false)
If set to true and the group.resources has some resources set the view is grouped by date.
Overrides the date option of the scheduler.
Example - define group by date
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
views: [
{
type: "month",
group: {
date: true
}
}
],
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>views.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 - disable delete confirmation
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
views: [
{
type: "month",
group: {
orientation: "vertical"
}
}
],
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>In this article