Angular Scheduler - resources

Specifies an array of resources available in the scheduler.

Selector: dxi-resource
Type:

Array<Object>

Default Value: []

Each element of this array is an object that defines a resource kind - a room, a car or any other resource kind. A resource kind object must have at least the following fields.

  • dataSource
    Specify the available resources of this kind (room1, room2, etc.).

  • fieldExpr
    The name of the appointment object field that specifies a resource of this kind (e.g., "room").

There are more fields that can be specified within a resource kind object. They are listed below. For details on how to define a resource and assign it to scheduler appointments, refer to the Resources article.

Resources Demo Grouping by Resources Demo

allowMultiple

Specifies whether you can assign several resources of this kind to an appointment.

Type:

Boolean

Default Value: false

The appointment form displays the SelectBox UI component to select a single resource. If the allowMultiple property is set to true, the appointment form displays the TagBox UI component to select one or more resources.

Note that you should specify resources for appointments in your data source according to the allowMultiple property value: - As a scalar value (allowMultiple=false, the default value). - As an array of scalar values (allowMultiple=true).

jQuery
index.js
data.js
$(function() {
    $("#scheduler").dxScheduler({
        resources: [
        {
            fieldExpr: 'roomId',
            dataSource: rooms,
            label: 'Room',
        }, {
            fieldExpr: 'assigneeId',
            allowMultiple: true,
            dataSource: assignees,
            label: 'Assignee',
        }],
        //...
    });
});
const data = [
{
    text: 'Website Re-Design Plan',
    roomId: 1,
    assigneeId: [3, 4],
    startDate: new Date('2021-04-26T16:30:00.000Z'),
    endDate: new Date('2021-04-26T18:30:00.000Z'),
},
// ...
];
Angular
app.component.html
app.component.ts
app.module.ts
app.service.ts
<dx-scheduler ... >
    <dxi-resource
        fieldExpr="roomId"
        label="Room"
        [dataSource]="rooms" >
    </dxi-resource>
    <dxi-resource
        fieldExpr="assigneeId"
        label="Assignee"
        [dataSource]="assignees"
        [allowMultiple]="true" >
    </dxi-resource>
    <!-- ... -->
</dx-scheduler>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    rooms: Room[];
    assignees: Assignee[];
    // ...

    constructor(service: Service) {
        this.assignees = service.getAssignees();
        this.rooms = service.getRooms();
        // ...
    }        
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxSchedulerModule } from 'devextreme-angular';
import { Service, Assignee, Room,... } from './app.service';

@NgModule({
    imports: [
        BrowserModule,
        DxSchedulerModule
    ],        
    declarations: [AppComponent],
    providers: [Service],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { Injectable } from '@angular/core';

const appointments: Appointment[] = [
{
    text: 'Website Re-Design Plan',
    assigneeId: [3, 4],
    roomId: 1,
    startDate: new Date('2021-04-26T16:30:00.000Z'),
    endDate: new Date('2021-04-26T18:30:00.000Z'),
},
// ...   
]; 

@Injectable()
export class Service {
    getAssignees(): Assignee[] {
        return assignees;
    }

    getRooms(): Room[] {
        return rooms;
    }
    // ...
}
Vue
App.vue
data.js
<template>
    <DxScheduler 
        :data-source="dataSource"
    >
        <DxResource
            :data-source="rooms"
            field-expr="roomId"
            label="Room"
        />
        <DxResource
            :data-source="assignees"
            field-expr="assigneeId"
            label="Assignee"
            :allow-multiple="true"
        />
        <!-- ... -->
    </DxScheduler>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-scheduler/dist/dx-gantt.css'; 

    import { 
        DxScheduler, 
        DxResource, 
        // ... 
    } from 'devextreme-vue/scheduler';
    import { 
        data, assignees, rooms, 
        // ... 
    } from './data.js';

    export default {
        components: { 
            DxScheduler, 
            DxResource, 
            // ... 
        },
        data() {
            return { 
                dataSource: data,
                assignees,
                rooms, 
                // ... 
            };
        }
    };
</script>
export const data = [{
    text: 'Website Re-Design Plan',
    assigneeId: [3, 4],
    roomId: 1,
    startDate: new Date('2021-04-26T16:30:00.000Z'),
    endDate: new Date('2021-04-26T18:30:00.000Z'),
},
// ...
];

export const assignees = [
{
    text: 'Samantha Bright',
    id: 1,
    color: '#727bd2',
}, 
// ...
];

export const rooms = [
{
    text: 'Room 1',
    id: 1,
    color: '#00af2c',
}, 
// ...
];    
React
App.js
data.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-scheduler/dist/dx-scheduler.css'; 

import Scheduler, { 
    Resource, 
    // ... 
} from 'devextreme-react/scheduler';

import { 
    data, assignees, rooms, 
    // ... 
} from './data.js';

const App = () => {
    return (
        <Scheduler 
            dataSource={data}
            {/* ... */}
        >
            <Resource 
                dataSource={rooms}
                fieldExpr="roomId"
                label="Room"
            />
            <Resource
                dataSource={assignees}
                allowMultiple={true}
                fieldExpr="assigneeId"
                label="Assignee"
            />
        </Scheduler>
    );
};

export default App;
export const data = [{
    text: 'Website Re-Design Plan',
    assigneeId: [3, 4],
    roomId: 1,
    startDate: new Date('2021-04-26T16:30:00.000Z'),
    endDate: new Date('2021-04-26T18:30:00.000Z'),
},
// ...
];

export const assignees = [
{
    text: 'Samantha Bright',
    id: 1,
    color: '#727bd2',
}, 
// ...
];

export const rooms = [
{
    text: 'Room 1',
    id: 1,
    color: '#00af2c',
}, 
// ...
];   
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().Scheduler()
    .DataSource(Model.Appointments)
    .Resources(res => {
        res.Add()
            .FieldExpr("RoomId")
            .ValueExpr("Id")
            .ColorExpr("Color")
            .Label("Room")
            .DisplayExpr("Text")
            .DataSource(Model.Rooms);
        res.Add()
            .FieldExpr("AssigneeId")
            .ValueExpr("Id")
            .ColorExpr("Color")
            .Label("Assignee")
            .DisplayExpr("Text")
            .AllowMultiple(true)
            .DataSource(Model.Assignees);
    })                
    // ...
)
<!-- C# -->
public partial class SampleData {
    public static readonly IEnumerable<AppointmentWithResources> AppointmentsWithResources = new[] {
        new AppointmentWithResources {
            Text = "Website Re-Design Plan",
            AssigneeId = [3, 4], RoomId = 1, 
            StartDate = "2021-04-26T16:30:00.000Z",
            EndDate = "2021-04-26T18:30:00.000Z"
        },
        // ...
    }         
    // ...
}
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Scheduler()
    .DataSource(Model.Appointments)
    .Resources(res => {
        res.Add()
            .FieldExpr("RoomId")
            .ValueExpr("Id")
            .ColorExpr("Color")
            .Label("Room")
            .DisplayExpr("Text")
            .DataSource(Model.Rooms);
        res.Add()
            .FieldExpr("AssigneeId")
            .ValueExpr("Id")
            .ColorExpr("Color")
            .Label("Assignee")
            .DisplayExpr("Text")
            .AllowMultiple(true)
            .DataSource(Model.Assignees);
    })                
    // ...
)
<!-- C# -->
public partial class SampleData {
    public static readonly IEnumerable<AppointmentWithResources> AppointmentsWithResources = new[] {
        new AppointmentWithResources {
            Text = "Website Re-Design Plan",
            AssigneeId = [3, 4], RoomId = 1, 
            StartDate = "2021-04-26T16:30:00.000Z",
            EndDate = "2021-04-26T18:30:00.000Z"
        },
        // ...
    }         
    // ...
}

View Demo

colorExpr

Specifies the resource object field that is used as a resource color.

Type:

String

Default Value: 'color'

The resource color is used to indicate appointments related to this resource.

dataSource

Specifies available resource instances.

Default Value: null

Each resource instance is an object with the id, color, and text fields. If your resource instances have a different structure, specify the valueExpr, colorExpr and displayExpr properties.

Depending on your data source, specify the dataSource property as follows. In each case, also specify the fieldExpr property to bind appointments to resource instances.

  • Data Array
    Assign the array to the dataSource property. View Demo

  • Read-Only Data in JSON Format
    Set the dataSource property to the URL of a JSON file or service that returns JSON data.

  • OData
    Implement an ODataStore.

  • Web API, PHP, MongoDB
    Use one of the following extensions to enable the server to process data according to the protocol DevExtreme UI components use:

    Then, use the createStore method to configure access to the server on the client as shown below. This method is part of DevExtreme.AspNet.Data.

    jQuery
    JavaScript
    $(function() {
        let serviceUrl = "https://url/to/my/service";
        $("#schedulerContainer").dxScheduler({
            // ...
            resources: [{
                // ...
                dataSource: DevExpress.data.AspNet.createStore({
                    key: "ID",
                    loadUrl: serviceUrl + "/GetAction",
                    insertUrl: serviceUrl + "/InsertAction",
                    updateUrl: serviceUrl + "/UpdateAction",
                    deleteUrl: serviceUrl + "/DeleteAction"
                })
            }]
        })
    });
    Angular
    app.component.ts
    app.component.html
    app.module.ts
    import { Component } from '@angular/core';
    import CustomStore from 'devextreme/data/custom_store';
    import { createStore } from 'devextreme-aspnet-data-nojquery';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent {
        store: CustomStore;
        constructor() {
            let serviceUrl = "https://url/to/my/service";
            this.resources = [{
                // ...
                dataSource: createStore({
                    key: "ID",
                    loadUrl: serviceUrl + "/GetAction",
                    insertUrl: serviceUrl + "/InsertAction",
                    updateUrl: serviceUrl + "/UpdateAction",
                    deleteUrl: serviceUrl + "/DeleteAction"
                })
            }];
        }
    }
    <dx-scheduler ...
        [resources]="resources">
    </dx-scheduler>
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    
    import { DxSchedulerModule } from 'devextreme-angular';
    
    @NgModule({
        declarations: [
            AppComponent
        ],
        imports: [
            BrowserModule,
            DxSchedulerModule
        ],
        providers: [],
        bootstrap: [AppComponent]
    })
    export class AppModule { }
    Vue
    App.vue
    <template> 
        <DxScheduler ...
            :resources="resources" />
    </template>
    
    <script>
    import 'devextreme/dist/css/dx.light.css';
    
    import CustomStore from 'devextreme/data/custom_store';
    import { createStore } from 'devextreme-aspnet-data-nojquery';
    import { DxScheduler } from 'devextreme-vue/scheduler';
    
    export default {
        components: {
            DxScheduler
        },
        data() {
            const serviceUrl = "https://url/to/my/service";
            const resources = [{
                // ...
                dataSource: createStore({
                    key: "ID",
                    loadUrl: serviceUrl + "/GetAction",
                    insertUrl: serviceUrl + "/InsertAction",
                    updateUrl: serviceUrl + "/UpdateAction",
                    deleteUrl: serviceUrl + "/DeleteAction"
                })
            }];
            return {
                resources
            }
        }
    }
    </script>
    React
    App.js
    import React from 'react';
    import 'devextreme/dist/css/dx.light.css';
    
    import CustomStore from 'devextreme/data/custom_store';
    import { createStore } from 'devextreme-aspnet-data-nojquery';
    import Scheduler from 'devextreme-react/scheduler';
    
    const serviceUrl = "https://url/to/my/service";
    const resources = [{
        // ...
        dataSource: createStore({
            key: "ID",
            loadUrl: serviceUrl + "/GetAction",
            insertUrl: serviceUrl + "/InsertAction",
            updateUrl: serviceUrl + "/UpdateAction",
            deleteUrl: serviceUrl + "/DeleteAction"
        })
    }];
    
    class App extends React.Component {
        render() {
            return (
                <Scheduler ...
                    resources={resources} />
            );
        }
    }
    export default App;
  • Any other data source
    Implement a CustomStore.

NOTE

Review the following notes about data binding:

  • If you explicitly wrap the store in the DataSource object, set the paginate property to false to prevent data from partitioning.

  • Data field names cannot be equal to this and should not contain the following characters: ., :, [, and ].

  • The stores are immutable. You cannot change their configurations at runtime. Instead, create a new store or DataSource and assign it to the dataSource property as shown in the articles about changing properties in jQuery, Angular, React, and Vue.

displayExpr

Specifies which field from the resource data objects provides values to be displayed in the resource editor.

Type:

String

|

Function

Function parameters:
resource:

Object

The current resource's data object.

Return Value:

String

The displayed value.

Default Value: 'text'

Set this property to the name of a data field that provides displayed values...

displayExpr: "name"

... or to a function that returns the displayed value:

displayExpr: function(item) {
    // "item" can be null
    return item && 'ID: ' + item.id + ', Name: ' + item.name;
}
See Also

fieldExpr

The name of the appointment object field that specifies a resource of this kind.

Type:

String

Default Value: ''

Use this property to declare how to call an appointment field to specify a resource of this kind. In addition, the value of this property is used to define grouping by resources in the scheduler.

View Demo

label

Specifies the label of the Appointment popup window field that allows end users to assign a resource of this kind.

Type:

String

Default Value: ''

useColorAsDefault

Specifies whether appointments are colored like this resource kind.

Type:

Boolean

Default Value: false

Appointments that have a single resource kind inherit its color. Appointments with several resource kinds are colored like the one whose useColorAsDefault property is set to true, which is the last resource kind in the resources array by default.

View Demo

valueExpr

Specifies the resource object field that is used as a value of the Resource editor in the Appointment popup window.

Type:

String

|

Function

Default Value: 'id'

End users can use a field in the Appointment pop-up window to choose a resource for the appointment. The label field of the resource kind object specifies this field's label. The editor that is used to select a resource depends on the value of the allowMultiple field. The TagBox UI component is used when multiple selection is possible, and the SelectBox UI component is used when only a single resource can be selected. These UI components have the displayExpr and valueExpr properties to specify the displayed text and the selected item's actual value. These properties are set to the displayExpr and valueExpr field values of the resource kind object.

NOTE
You cannot specify valueExpr as a function when the UI component is bound to a remote data source. This is because valueExpr is used in a filter the UI component sends to the server when querying data. Functions with custom logic cannot be serialized for this filter.