Skip to main content
All docs
V24.2

Resources

  • 15 minutes to read

Watch Video: Scheduler - Resources

You can assign resources to Scheduler appointments to group appointments by category. For instance, if employees are resources, the Scheduler component allows users to browse appointments related to each employee.

Scheduler Resources

Assign Resources to Appointments

Follow the steps below to add and assign resources to Scheduler appointments:

  1. Use the constructor without parameters to create a DxSchedulerDataStorage object. See the DxSchedulerAppointmentMappings class description for more information.
  2. Declare a class that stores resource options (for instance, ResourceObject).
  3. Create a collection of resource source objects (ResourceObject class instances) and define their options:
    • Id - Specifies the resource’s unique identifier.
    • Caption - Specifies the resource’s caption.
    • Color - Specifies the resource’s color. To apply this color to all appointments that correspond to the resource, remove appointment labels.
    • BackgroundCssClass - Specifies the CSS class applied to the resource’s background (the background color, background image, border color, and so on). Note that the Color property value overrides the background color specified in the CSS class.
    • TextCssClass - Specifies the CSS class applied to the text of appointments that correspond to the resource.
  4. Assign the newly created collection to the storage’s ResourcesSource property to fill the storage with a collection of data objects. The Scheduler generates a resource item (DxSchedulerResourceItem) for each item in this collection.
  5. Assign a new DxSchedulerResourceMappings object to the DxSchedulerDataStorage.ResourceMappings property. In this object, map the data source fields to appointment properties.
  6. Optional. Group appointments by resource. To do this, set the Scheduler’s GroupType property to SchedulerGroupType.Resource.
<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage"
             GroupType="SchedulerGroupType.Resource"
             ResourceColorInHeaderVisible="true">
    <Views>
        <DxSchedulerDayView DayCount="3"
                            TimeScale="@(new TimeSpan(1,0,0))"
                            WorkTime="new DxSchedulerTimeSpanRange(TimeSpan.FromHours(9), TimeSpan.FromHours(18))"
                            VisibleTime="new DxSchedulerTimeSpanRange(TimeSpan.FromHours(8), TimeSpan.FromHours(19))"
                            TimeIndicatorVisibility="SchedulerTimeIndicatorVisibility.Never">
        </DxSchedulerDayView>
        <DxSchedulerWeekView ShowWorkTimeOnly="true" />
        <DxSchedulerWorkWeekView ShowWorkTimeOnly="true" />
        <DxSchedulerTimelineView  />
    </Views>
</DxScheduler>

@code {
    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        AppointmentsSource = AppointmentCollection.GetAppointments(),
        AppointmentMappings = new DxSchedulerAppointmentMappings() {
            Type = "AppointmentType",
            Start = "StartDate",
            End = "EndDate",
            Subject = "Caption",
            AllDay = "AllDay",
            Location = "Location",
            Description = "Description",
            LabelId = "Label",
            StatusId = "Status",
            RecurrenceInfo = "Recurrence",
            ResourceId = "ResourceId"
        },
        ResourcesSource = ResourceCollection.GetResources(),
        ResourceMappings = new DxSchedulerResourceMappings() {
            Id = "Id",
            Caption = "Name",
            Color = "Color",
            BackgroundCssClass = "BackgroundCss",
            TextCssClass = "TextCss"
        }
    };
}

Run Demo: Scheduler - Resources

Group Appointments by Resource or by Date

Resources allow you to display schedules across multiple columns. To group appointments by resources, set the GroupType property to Resource.

Scheduler Resources

Run Demo: Scheduler Resources - Group by Resource

You can also set the GroupType property to Date. In this case, the Scheduler component displays multiple dates and resources, resource headers are grouped under date headers.

Scheduler Resources

Run Demo: Scheduler Resources - Group by Date

Resource Navigator

The DevExpress Blazor Scheduler component includes a drop-down Resource Navigator window. Use this window to hide or display resource groups.

Scheduler - Resource Navigator

Use the ResourceNavigatorVisible property to specify whether the Resource Navigator is visible. The following code snippet replaces the build-in Resource Navigator with a custom tree-like navigator.

<div>
    <div>
        <div>
            <DxButton RenderStyle="ButtonRenderStyle.None" Click="@ToggleResourceNavigator" IconCssClass="demo-resnavigator-icon" title="Toggle the resource navigator" />
            @if(ResourceNavigatorExpanded) {
                <span style="">Resources</span>
            }
        </div>
        @if(ResourceNavigatorExpanded) {
            <div>
                <DxTreeView AfterCollapse="@(e => UpdateExpandedState(e, false))" AfterExpand="@(e => UpdateExpandedState(e, true))">
                    <Nodes>
                        @foreach(Resource group in Groups) {
                            <DxTreeViewNode Text="@group.Name" Name="@group.Id.ToString()" Expanded="@IsExpanded(group)">
                                <Nodes>
                                    @foreach(Resource resource in GetResources(group)) {
                                        <DxTreeViewNode Text="@resource.Name">
                                            <Template>
                                                <DxCheckBox T="bool"
                                                            Checked="@IsVisible(resource)"
                                                            CheckedChanged="@(visible => UpdateVisibilty(resource, visible))">
                                                    @resource.Name
                                                </DxCheckBox>
                                            </Template>
                                        </DxTreeViewNode>
                                    }
                                </Nodes>
                            </DxTreeViewNode>
                        }
                    </Nodes>
                </DxTreeView>
            </div>
        }
    </div>
    <div>
        <DxScheduler @bind-StartDate="@StartDate"
                     DataStorage="@DataStorage"
                     VisibleResourcesDataSource="@VisibleResources"
                     GroupType="SchedulerGroupType.Resource"
                     ResourceNavigatorVisible="false">
            <DxSchedulerDayView DayCount="1" ShowWorkTimeOnly="true"></DxSchedulerDayView>
        </DxScheduler>
    </div>
</div>

@code {
    List<Resource> Groups = ResourceCollection.GetResourceGroups();

    List<Resource> VisibleResources = ResourceCollection.GetResources().Take(2).ToList();

    bool ResourceNavigatorExpanded { get; set; } = true;

    DateTime StartDate = DateTime.Today;

    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        AppointmentsSource = ResourceAppointmentCollection.GetAppointments(),
        AppointmentMappings = new DxSchedulerAppointmentMappings() {
            Type = "AppointmentType",
            Start = "StartDate",
            End = "EndDate",
            Subject = "Caption",
            AllDay = "AllDay",
            Location = "Location",
            Description = "Description",
            LabelId = "Label",
            StatusId = "Status",
            RecurrenceInfo = "Recurrence",
            ResourceId = "ResourceId"
        },
        ResourcesSource = ResourceCollection.GetResources(),
        ResourceMappings = new DxSchedulerResourceMappings() {
            Id = "Id",
            Caption = "Name",
            BackgroundCssClass = "BackgroundCss",
            TextCssClass = "TextCss"
        }
    };

    Dictionary<int, bool> ExpandedState = new Dictionary<int, bool>();

    bool IsVisible(Resource resource) {
        return VisibleResources.Contains(resource);
    }

    void UpdateVisibilty(Resource resource, bool visible) {
        if(visible)
            VisibleResources.Add(resource);
        else
            VisibleResources.Remove(resource);
        VisibleResources = VisibleResources.OrderBy(p => p.Id).ToList();
    }

    bool IsExpanded(Resource resource) {
        return ExpandedState.ContainsKey(resource.Id) ? ExpandedState[resource.Id] : true;
    }

    void UpdateExpandedState(TreeViewNodeEventArgs args, bool expanded) {
        int resourceId = int.Parse(args.NodeInfo.Name);
        ExpandedState[resourceId] = expanded;
    }

    void ToggleResourceNavigator() {
        ResourceNavigatorExpanded = !ResourceNavigatorExpanded;
    }

    IEnumerable<Resource> GetResources(Resource group) {
        return ResourceCollection.GetResources()
            .Where(resource => resource.GroupId == group.Id);
    }
}

Scheduler - Custom Resource Navigator

Run Demo: Scheduler - Custom Resource Navigator

Multiple Resources

The DevExpress Blazor Scheduler component allows you to assign multiple resources to an appointment. This feature is useful for the following cases: meetings with multiple participants, group events, or services that require coordination among various resources.

Follow the steps below to enable this functionality:

  1. Set the EnableMultipleResources property to ‘true’.

    @code {
        DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
            AppointmentsSource = MultipleResourceAppointmentCollection.GetAppointments(),
            AppointmentMappings = new DxSchedulerAppointmentMappings() {
                ...
            },
            ResourcesSource = ResourceCollection.GetResources(),
            ResourceMappings = new DxSchedulerResourceMappings() {
                ...
            },
            EnableMultipleResources = true
        };
    }
    
  2. Add a new data field (Resources) to an appointment’s source object.

    public class Appointment {
        public Appointment() { }
        public int AppointmentType { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
        ...
        public string Resources { get; set; }
    }
    
  3. Map this field to the ResourceId appointment property.

    @code {
        DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
            AppointmentsSource = ResourceAppointmentCollection.GetMultipleResourceAppointments(),
            AppointmentMappings = new DxSchedulerAppointmentMappings() {
                ...
                ResourceId = "Resources"
            },
            ResourcesSource = ResourceCollection.GetResources(),
            ResourceMappings = new DxSchedulerResourceMappings() {
                ...
            },
            EnableMultipleResources = true
        };
    }
    
Show Complete Code
<DxScheduler @bind-StartDate="@StartDate"
             DataStorage="@DataStorage"
             GroupType="SchedulerGroupType.Resource"
             CssClass="demo-sc-size"
             AppointmentFormMode="SchedulerAppointmentFormMode.EditForm">
    <DxSchedulerDayView DayCount="2" ShowWorkTimeOnly="true"></DxSchedulerDayView>
</DxScheduler>

@code {
    DateTime StartDate { get; set; } = DateTime.Today;
    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        AppointmentsSource = MultipleResourceAppointmentCollection.GetAppointments(),
        AppointmentMappings = new DxSchedulerAppointmentMappings() {
            Type = "AppointmentType",
            Start = "StartDate",
            End = "EndDate",
            Subject = "Caption",
            AllDay = "AllDay",
            Location = "Location",
            Description = "Description",
            LabelId = "Label",
            StatusId = "Status",
            RecurrenceInfo = "Recurrence",
            ResourceId = "Resources"
        },
        ResourcesSource = ResourceCollection.GetResources(),
        ResourceMappings = new DxSchedulerResourceMappings() {
            Id = "Id",
            Caption = "Name",
            BackgroundCssClass = "BackgroundCss",
            TextCssClass = "TextCss"
        },
        EnableMultipleResources = true
    };
}

Users can specify multiple resources in the Appointment edit form.

Appoitment edit form - Multiple Resources

If you group appointments by resource, multi-resource appointments appear under all linked resources.

Grouped Multiple Resources

Run Demo: Scheduler Resources - Multiple Resources

The table below lists API members related to resources:

Member

Description

CreateResourceItem()

Creates a new resource item.

GetResourceItemById(Object)

Returns a resource item with the specified identifier from the Scheduler’s data storage.

GroupType

Specifies how Scheduler appointments are grouped. None, resource, date.

ResourceColorInHeaderVisible

Specifies whether a resource color is applied to the corresponding group’s header.

ResourceNavigatorVisible

Specifies whether the Scheduler displays the Resource Navigator.

VisibleResourcesDataSource

Specifies the data source that stores visible resource objects.