Angular Scheduler - resources

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.

See Also

• Demos: Resources | Grouping by Resources
• Resources

When this field is set to true, the TagBox widget is used in the Appointment popup window to specify resources for the current appointment. Alternatively, the SelectBox widget is used.

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

If you use DevExtreme ASP.NET MVC Controls, refer to the Bind Controls to Data article.

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 options.

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

• Data Array
  Assign the array to the dataSource option.

• Read-Only Data in JSON Format
  Set the dataSource option 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 widgets use:

  • DevExtreme.AspNet.Data
  • DevExtreme-PHP-Data
  • devextreme-query-mongodb

  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.common.css';
  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.common.css';
  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.

Set this option 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

• valueExpr

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

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

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 widget is used when multiple selection is possible, and the SelectBox widget is used when only a single resource can be selected. These widgets have the displayExpr and valueExpr options to specify the displayed text and the selected item's actual value. These options are set to the displayExpr and valueExpr field values of the resource kind object.