Resources

The 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 through the Scheduler event edit form.

Single Instance Resources

A single instance resource is a resource of which only one instance can be assigned to a Scheduler event, for example, a Scheduler which displays 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 following example demonstrates how to use a single instance resource. If a resource instance has its color field set, the Scheduler will use this value as a background for all events that are assigned to that instance.

<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 that is 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 that are assigned to this resource.
         },
         { text: "Meeting Room 102", value: 2, color: "#ff7663" }
      ]
    }
  ]
});
</script>

Multiple Instance Resources

A multiple instance resource is a resource of which more than one instance can be assigned to a Scheduler event, for example, a Scheduler which displays a list of meetings and meeting attendees. Since more than one attendee can participate in a meeting, it can be considered a multiple instance resource.

The following example demonstrates how to use multiple instance resources. The Scheduler will use the color of the first resource instance as a background for the Scheduler events.

<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 that is 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>

Multiple Resource Types

The Scheduler supports unlimited resource types. For instance, you can combine the single and multiple resource examples in one.

<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" }
      ]
    },
    // The 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>

See Also

In this article
Not finding the help you need? Improve this article