Resources

• Jan 18, 2024
• 6 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.

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.

Razor

<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 = 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.GetRecources(),
        ResourceMappings = new DxSchedulerResourceMappings() {
            Id = "Id",
            Caption = "Name",
            Color = "Color",
            BackgroundCssClass = "BackgroundCss",
            TextCssClass = "TextCss"
        }
    };
}

Appointment

public class Appointment {
    public Appointment() { }
    public int AppointmentType { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public string Caption { get; set; }
    public string Description { get; set; }
    public string Location { get; set; }
    public int? Label { get; set; }
    public int Status { get; set; }
    public bool AllDay { get; set; }
    public string Recurrence { get; set; }
    public int? ResourceId { get; set; }
}

AppointmentCollection

public static partial class AppointmentCollection {
    public static List<Appointment> GetAppointments() {
        DateTime date = DateTime.Now.Date;
        var dataSource = new List<Appointment>() {
            new Appointment {
                Caption = "Install New Router in Dev Room",
                StartDate = date + (new TimeSpan(0, 10, 0, 0)),
                EndDate = date + (new TimeSpan(0, 12, 0, 0)),
                Status = 1,
                ResourceId = 0
            },
            new Appointment {
                Caption = "Upgrade Personal Computers",
                StartDate = date + (new TimeSpan(0,  13, 0, 0)),
                EndDate = date + (new TimeSpan(0, 14, 30, 0)),
                Status = 1,
                ResourceId = 0
            },
            // ...            
            new Appointment {
                Caption = "Final Budget Review",
                StartDate = date + (new TimeSpan(0, 13, 0, 0)),
                EndDate = date + (new TimeSpan(0, 15, 0, 0)),
                Status = 1,
                ResourceId = 1
            },
            new Appointment {
                Caption = "Install New Database",
                StartDate = date + (new TimeSpan(0, 9, 45, 0)),
                EndDate = date + (new TimeSpan(1, 11, 15, 0)),
                Status = 1,
                ResourceId = 1
            },
            // ...
        };
        return dataSource;
    }
}

CSS

.green-background {
    --bs-table-bg: #13B955;
}
.orange-background {
    --bs-table-bg: #fd7e14;
}
.purple-background {
    --bs-table-bg: #593196;
}
.text-white {
    color: white;
}

ResourceObject

public class ResourceObject {
    public int Id { get; set; }
    public string Name { get; set; }
    public System.Drawing.Color Color { get; set; }
    public string TextCss { get; set; }
    public string BackgroundCss { get; set; }
}

ResourceCollection

public static partial class ResourceCollection {
    public static List<ResourceObject> GetRecources() {
        var dataSource = new List<ResourceObject>() {
            new ResourceObject() { Id=0 , Name="John Heart", TextCss="text-white",
                                   BackgroundCss="green-background", 
                                   /*Color = System.Drawing.Color.Green*/ },
            new ResourceObject() { Id=1 , Name="Samantha Bright", TextCss="text-white",
                                   BackgroundCss="orange-background", 
                                   /*Color = System.Drawing.Color.Orange*/ },
            new ResourceObject() { Id=2 , Name="Arthur Miller", TextCss="text-white",
                                   BackgroundCss="purple-background", 
                                   /*Color = System.Drawing.Color.Purple*/ },
        };
        return dataSource;
    }
}

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.

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.

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.

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

<div>
    <div>
        <div>
            <DxButton RenderStyle="ButtonRenderStyle.None" 
                      @onclick="@ToggleResourceNavigator">
                <span></span>
            </DxButton>
            @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>
                                                <div>
                                                    <DxCheckBox T="bool"
                                                                Checked="@IsVisible(resource)"
                                                                CheckedChanged="@(visible => UpdateVisibilty(resource, visible))">
                                                        @resource.Name
                                                    </DxCheckBox>
                                                </div>
                                            </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);
    }
}

Run Demo: Scheduler - Custom Resource Navigator

Related API Members

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.