Telerik UI for Windows 8 HTML

RadScheduler supports assigning scheduler events to a set of predefined resources. Resources are optional meta data that can be associated with events. The scheduler supports more than one kind of resource. Also, multiple instances of the same resource type can be assigned to a scheduler event. This article explains the different options for assigning resources to RadScheduler.

This topic contains the following sections.

Single Instance Resource

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 only it can be considered as a "single" resource.

Code Listing 1 shows an example scheduler definition that uses a single instance resource. The two listed events that happen at the same time reference two different resources of the same type.

Code Listing 1: Defining a Single Instance Resource Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    date: new Date("2013/6/6"),
    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 unique identifier of the first room (meeting room 101)
    },
    {
        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 unique identifier of the second room (meeting room 102)
    }
    ],
    resources: [
    {
        field: "roomId", // The field of the scheduler event which contains the resource identifier RadScheduler
        title: "Room", // The label displayed in the scheduler edit form for this resource
        name: "Rooms", //The unique name of the current scheduler resource
        dataSource: [
        {
            text: "Meeting Room 101", // Text of the resource instance
            value: 1, // 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" }
        ]
    }

    ]
});

Multiple Resource Instances

A multiple resource instance 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.

In Code Listing 2 you can see an example, where each event can have one or more attendees assigned, where attendees are resources.

Code Listing 2: Defining Multiple Resource Instances Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    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 identifiers
        title: "Attendees", // The label displayed in the scheduler edit form for this resource
        dataSource: [
        {
            text: "Alex", // Text of the resource instance
            value: 1, // 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 the this is a multiple instance resource
    }
    ]
});

Multiple Resource Types

RadScheduler supports unlimited resource types. For example, you can have a list of meetings which are held in two rooms and have different attendees, where both the rooms and attendees are resources. This is demonstrated in Code Listing 3.

Code Listing 3: Defining Multiple Resource Types Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    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", // Text of the resource instance
            value: 1, // 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", // Text of the resource instance
            value: 1, // 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 the this is a multiple instance resource  
    }
    ]
});