Resources

• Jun 25, 2024
• 10 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 following code snippet 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

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

Razor

<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
    };
}

Appointment.cs

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; }
    public string Resources { get; set; }
    public bool Accepted { get; set; }
}

MultipleResourceAppointmentCollection.cs

public static partial class MultipleResourceAppointmentCollection {
    public static List<Appointment> GetAppointments() {
        DateTime date = DateTime.Now.Date;
        return new List<Appointment>() {
            new Appointment {
                Accepted = true,
                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,
                Resources = DxSchedulerResourceIdCollection.ToXml(0)
            },
            new Appointment {
                Caption = "Upgrade Personal Computers",
                Accepted = false,
                StartDate = date + (new TimeSpan(0,  13, 0, 0)),
                EndDate = date + (new TimeSpan(0, 14, 30, 0)),
                Status = 2,
                Resources = DxSchedulerResourceIdCollection.ToXml(0, 1)
            },
            new Appointment {
                Caption = "Website Redesign Plan",
                Accepted = false,
                StartDate = date + (new TimeSpan(1, 9, 30, 0)),
                EndDate = date + (new TimeSpan(1, 11, 30, 0)),
                Status = 3,
                Resources = DxSchedulerResourceIdCollection.ToXml(0, 1, 2)
            },
            new Appointment {
                Caption = "Approve Personal Computer Upgrade Plan",
                Accepted = true,
                StartDate = date + (new TimeSpan(0, 14, 0, 0)),
                EndDate = date + (new TimeSpan(0, 16, 0, 0)),
                Status = 2,
                Resources = DxSchedulerResourceIdCollection.ToXml(2, 3, 4)
            },
        };
    }
}

Resource.cs

public class Resource {
        public int Id { get; set; }
        public int? GroupId { get; set; }
        public string Name { get; set; }
        public bool IsGroup { get; set; }
        public string TextCss { get; set; }
        public string BackgroundCss { get; set; }
        public string ImageFileName => $"employees/{Id + 1}.jpg";
        public override bool Equals(object obj) {
            Resource resource = obj as Resource;
            return resource != null && resource.Id == Id;
        }
        public override int GetHashCode() {
            return Id;
        }
    }

ResourceCollection.cs

public static partial class ResourceCollection {
    public static List<Resource> GetResourcesForGrouping() {
        return GetResources().Take(3).ToList();
    }
    public static List<Resource> GetResources() {
        return new List<Resource>() {
            new Resource() { Id=0 , Name="Nancy Davolio", GroupId=100, BackgroundCss="dxbl-green-color", TextCss="text-white" },
            new Resource() { Id=1 , Name="Andrew Fuller", GroupId=101, BackgroundCss="dxbl-orange-color", TextCss="text-white" },
            new Resource() { Id=2 , Name="Janet Leverling", GroupId=100, BackgroundCss="dxbl-purple-color", TextCss="text-white" },
            new Resource() { Id=3 , Name="Margaret Peacock", GroupId=101, BackgroundCss="dxbl-indigo-color", TextCss="text-white" },
            new Resource() { Id=4 , Name="Steven Buchanan", GroupId=100, BackgroundCss="dxbl-red-color", TextCss="text-white" }
        };
    }
    public static List<Resource> GetResourceGroups() {
        return new List<Resource>() {
            new Resource() { Id=100, Name="Sales and Marketing", IsGroup=true },
            new Resource() { Id=101, Name="Engineering", IsGroup=true }
        };
    }
}

Users can specify multiple resources in the Appointment edit form.

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

Run Demo: Scheduler Resources - Multiple Resources

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.