Resources
The Kendo UI Scheduler allows you to assign events to a set of predefined resources.
The widget supports multiple resources. Multiple instances of the same resource type can be assigned to a single Scheduler event. The Scheduler provides you with the option to assign resources via the Scheduler event edit form.
Instance Resources
Single Instance Resources
A single instance resource is a resource of which only one instance can be assigned to a Scheduler event. A typical example is a Scheduler displaying a list of meetings (Scheduler events), which are held in two rooms (resources). Since a meeting can be held in one room it can be considered a single resource.
The example below demonstrates how to use a single instance resource.
Example
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
dataSource: [
{
id: 1,
start: new Date("2013/6/6 11:00 AM"),
end: new Date("2013/6/6 1:00 PM"),
title: "Meeting with investors",
roomId: 1 // The unique identifier of the first room (Meeting Room 101).
},
{
id: 2,
start: new Date("2013/6/6 10:15 AM"),
end: new Date("2013/6/6 12:30 PM"),
title: "Job Interview",
roomId: 2 // The unique identifier of the second room (Meeting Room 102).
}
],
resources: [
{
field: "roomId", // The field of the Scheduler event which contains the resource identifier.
title: "Room", // The label displayed in the Scheduler edit form for this resource.
dataSource: [
{
text: "Meeting Room 101", // Text of the resource instance
value: 1, // The identifier of the resource instance. Use that value to assign an event to this instance.
color: "#1c9ec4" // Used as the background of events assigned to this resource.
},
{ text: "Meeting Room 102", value: 2, color: "#ff7663" }
]
}
]
});
</script>
If a resource instance has its color field set, the Scheduler will use this value as background for all events assigned to that instance.
Multiple Instance Resources
A multiple instance resource is a resource of which more than one instance can be assigned to a scheduler event. A typical example is a Scheduler displaying a list of meetings and the meeting attendees. Since more than one attendee can participate in a meeting, it can be considered a multiple instance resource.
The example below demonstrates how to use multiple instance resources.
Example
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
dataSource: [
{
id: 1,
start: new Date("2013/6/6 11:00 AM"),
end: new Date("2013/6/6 1:00 PM"),
title: "Meeting with investors",
attendees: [2, 3] // Bob (value: 2) and Charlie (value: 3)
},
{
id: 2,
start: new Date("2013/6/6 10:15 AM"),
end: new Date("2013/6/6 12:30 PM"),
title: "Job Interview",
attendees: [1, 2] // Alex (value: 1) and Bob (value: 2)
}
],
resources: [
{
field: "attendees", // The field of the Scheduler event which contains the resource identifier.
title: "Attendees", // The label displayed in the Scheduler edit form for this resource.
dataSource: [
{
text: "Alex", // Text of the resource instance.
value: 1, // The identifier of the resource instance. Use that value to assign an event to this instance.
color: "#ef701d" // Used as the background of events assigned to this resource.
},
{ text: "Bob", value: 2, color: "#5fb1f7" },
{ text: "Charlie", value: 3, color: "#35a964" }
],
multiple: true // Indicate that this is a multiple instance resource.
}
]
});
</script>
The scheduler will use the color of the first resource instance as background for the Scheduler events.
Resource Types
Multiple Resource Types
Kendo UI Scheduler supports unlimited resource types. For instance, you are able to combine the single and multiple resource examples in one, as demonstrated in the example below.
Example
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
dataSource: [
{
id: 1,
start: new Date("2013/6/6 11:00 AM"),
end: new Date("2013/6/6 1:00 PM"),
title: "Meeting with investors",
roomId: 1, // Meeting Room 101 (value: 1)
attendees: [2, 3] // Bob (value: 2) and Charlie (value: 3)
},
{
id: 2,
start: new Date("2013/6/6 10:15 AM"),
end: new Date("2013/6/6 12:30 PM"),
title: "Job Interview",
roomId: 2, // Meeting Room 102 (value: 2)
attendees: [1, 2] // Alex (value: 1) and Bob (value: 2)
}
],
resources: [
// First resource type definition
{
field: "roomId", // The field of the Scheduler event which contains the resource identifier.
title: "Room", // The label displayed in the Scheduler edit form for this resource.
dataSource: [
{
text: "Meeting Room 101", // The text of the resource instance.
value: 1, // The identifier of the resource instance. Use that value to assign an event to this instance.
color: "#1c9ec4" // Used as the background of events assigned to this resource.
},
{ text: "Meeting Room 102", value: 2, color: "#ff7663" }
]
},
// Second resource type definition
{
field: "attendees", // The field of the Scheduler event which contains the resource identifier
title: "Attendees", // The label displayed in the Scheduler edit form for this resource
dataSource: [
{
text: "Alex", // The text of the resource instance.
value: 1, // The identifier of the resource instance. Use that value to assign an event to this instance.
color: "#ef701d" // Used as the background of events assigned to this resource.
},
{ text: "Bob", value: 2, color: "#5fb1f7" },
{ text: "Charlie", value: 3, color: "#35a964" }
],
multiple: true // Indicate that this is a multiple instance resource.
}
]
});
</script>
Further Reading
For more information on how to configure Kendo UI resources, see this article.
To build a better understanding of resources, see the online demo.
See Also
Other articles and how-to examples on the Kendo UI Scheduler:
- Scheduler JavaScript API Reference
- Overview of the Scheduler Widget
- Timezones
- How to Filter Events by Resource Using MultiSelect
- How to Persist Resource Values on
move
For how-to examples on the Kendo UI Scheduler, browse its How To documentation folder.
