Telerik UI for Windows 8 HTML

This article about RadScheduler for Windows 8 HTML will introduce you to defining scheduler resources and also will list all configuration options available.

Basic Resources Definition

You can use the resources property of RadScheduler to define scheduler resources. The property accepts an array of resource objects. The steps required to define a basic resource for scheduler events are listed below.

  1. Define a name that will be used in the scheduler events to list the resource id through the field property. For example, if in your scheduler dataSource, data items have a roomId field, you need to set resources.field to "roomId", so that the scheduler can locate the corresponding resource for each event.

  2. Define a name for the current resource using the name option. This name is used to distinguish the resource, for example, when grouping by it. If not set, the value of the field option is used.

  3. Define a user-friendly title through the title option. It is not required in read-only mode but is recommended to have in an editable scheduler, since it will be used in the event edit form.

  4. Define a data source. Use the dataSource property to assign the resource a JavaScript object which represents a valid data source configuration, a JavaScript array or an Telerik.Data.DataSource instance. If the dataSource option is set to a JavaScript object or an array, the control will initialize a new Telerik.Data.DataSource instance using that value as data source configuration. If the dataSource option is an existing Telerik.Data.DataSource instance, the control will use that instance and will not initialize a new one.

You can see an example of a simple resources definition in Code Listing 1 below. Note the names of the fields inside the resource data source. text, value and color are recognized by default. Should your fields have different names, you would need to set a few more properties in the resource definition. They are described in the next section.

Code Listing 1: Defining a Basic 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" }
        ]
    }

    ]
});

Additional Options for Resources Definition

The list below describes the rest of the options that you can use to define a scheduler resource.

  • dataColorField: The field of the resource data item which contains the resource color. You need to set this property when the name of the field is different from "color".

  • dataTextField: The field of the resource data item which represents the resource text. You need to set this property when the name of the field is different from "text".

  • dataValueField: The field of the resource data item which represents the resource value. The resource value is used to link a scheduler event with a resource. You need to set this property when the name of the field is different from "text".

  • multiple: A Boolean field indicating whether the scheduler event can be assigned multiple instances of the resource. The scheduler event field specified via the field option will contain an array of resources. By default only one resource instance can be assigned to an event.

  • valuePrimitive: A Boolean option that indicates whether the scheduler event field, specified via the field option, contains a resource data item. By default, the scheduler expects that field to contain a primitive value, for example string, which corresponds to the value of the resource.

You can see an example that uses these properties in Code Listing 2. The fields in the resource dataSource are now different, therefore dataColorField, dataTextField and dataValueField options are used. The multiple option value is set to true so multiple resource instances can be used for an event. Also, the valuePrimitive option is set to true because the events reference the resources using objects, instead of primitive types.

Code Listing 2: Applying Additional Resource Settings 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: [{ personId: 2 }, { personId: 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: [{ personId: 1 }, { personId: 2 }]
    }
    ],
    resources: [
    {
        field: "attendees",
        title: "Attendees",
        dataColorField: "background",
        dataTextField: "name",
        dataValueField: "personId",
        valuePrimitive: false,
        multiple: true,
        dataSource: [
        {
            name: "Alex Page",
            personId: 1,
            background: "#ef701d"
        },
        { name: "William Hayes", personId: 2, background: "#5fb1f7" },
        { name: "Charlie Livingston", personId: 3, background: "#35a964" }
        ]
    }
    ]
});