Resources

In real-life scheduling applications, appointments are seldom processed simply "as is", and are usually assigned to different resources. There are different kinds of resources, and the decision as to what should be a resource in a particular scheduling application depends upon the specifics of the task solved by the application. Here are some examples of scheduling tasks, illustrating what can be an appointment and a resource in these examples.

  • A Business.
    Resource: Every employee in this company.
    Appointment: Any time interval spent by an employee to perform a particular task.
  • A Car Rental Agency.
    Resource: Every car which is owned by this firm, and can be leased.
    Appointment: Any time interval when any of the firm's cars are leased.
  • An Educational Center.
    Resources: Every teacher who works at this center, or every room in this center.
    Appointment: Any time interval when any of the teachers are delivering a lecture in any of the rooms at the center.

Define Resources

In the Scheduler widget, a resource must be defined using the following set of fields.

  • id
    A unique resource identifier - a number or GUID.
  • text
    A resource name.
  • color
    A color for indicating the appointments using this resource.

Here is an example.

JavaScript
var rooms = [
    { id: 1, text: 'Room1', color: 'red' },
    { id: 2, text: 'Room2', color: 'blue' },
    { id: 3, text: 'Room3', color: 'green' }
]

The resources belonging to one kind of resources (e.g. all the rooms) must be specified as a data source of this resource kind. For this purpose, use the dataSource option of the object defining a resource kind. This option takes on an array of resource objects, as well as a DataSource object or its configuration.

JavaScript
var roomResource = {
    dataSource: new DevExpress.data.DataSource({
        store: {
            type: "array",
            key: "id",
            data: rooms
        }
    }),
    //...
}

To specify the resource kinds that must be available in your Scheduler widget, assign as array of resource kind objects to the widget's resources option.

JavaScript
var schedulerOptions = {
    //...
    resources: [ roomResource, teacherResource ]
    //...
}

Assign Appointments to Resources

Each appointment in the Scheduler widget can be associated with one or several resources of one or several resource kinds. To associate an appointment with a resource, the object defining the corresponding resource kind must have the field field. In this instance, you can refer an appointment to a resource of this resource kind by adding a data source field with the name specified by the resource kind object's field field.

JavaScript
var appointments = [
    { 
        room: 1,
        person: 5,
        text: "Meeting",
        //...
    },
    //...
];
var resources = [
    { field: 'room', dataSource: roomsDataSource },
    { field: 'person', dataSource: personsDataSource }
];
var schedulerOptions = {
    dataSource: appointments,
    resources: resources,
    //...
}

The following image illustrates an appointment colored to different colors, which indicates their relation to the resources with corresponding colors.

Scheduler Appointment Resources

In case appointments in your scheduler use several resource kinds, specify the resource kind whose color will "win". For this purpose, set the useColorAsDefault field of the "winning" resource kind to true.

JavaScript
var resources = [
    { field: 'room', dataSource: roomsDataSource, useColorAsDefault: true },
    { field: 'person', dataSource: personsDataSource }
];

An end user can assign required resources to an appointment as well, since all the available resource kinds are provided in an appointment detail window. You can set custom names for the resource fields in the appointment detail window by using the label field of resource kind objects.

JavaScript
var resources = [
    { field: 'room', label: 'Room', dataSource: roomsDataSource, useColorAsDefault: true },
    { field: 'person', label: 'Person', dataSource: personsDataSource }
];

Scheduler Appointment Resources

By default multiple resources of a particular resource kind can be assigned to an appointment in a UI. You can prohibit this behavior by setting the allowMultiple option to false.

JavaScript
var resources = [
    { field: 'room', label: 'Room', allowMultiple: false, dataSource: roomsDataSource, useColorAsDefault: true },
    { field: 'person', label: 'person', allowMultiple: false, dataSource: personsDataSource }
];

Scheduler Appointment Resources

Group Appointments by Resources

You can configure the scheduler area so that all appointments are grouped by their resources. For this purpose, specify the widget's groups option. This option takes on an array to allow you to define grouping with several levels. This is appropriate when appointment use several kinds of resources.

JavaScript
var appointments = [
    { 
        room: 1,
        person: 5,
        text: "Meeting",
        //...
    },
    //...
];
var resources = [
    { field: 'room', dataSource: roomsDataSource },
    { field: 'person', dataSource: teachersDataSource }
];
var schedulerOptions = {
    dataSource: appointments,
    resources: resources,
    groups: ['room','person'],
    //...
}

Scheduler Grouping by Resources

View Demo