Resources
- 15 minutes to read
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:
- Use the constructor without parameters to create a DxSchedulerDataStorage object. See the DxSchedulerAppointmentMappings class description for more information.
- Declare a class that stores resource options (for instance,
ResourceObject
). - 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.
- 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.
- Assign a new DxSchedulerResourceMappings object to the DxSchedulerDataStorage.ResourceMappings property. In this object, map the data source fields to appointment properties.
- 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"
}
};
}
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
.
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.
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" 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);
}
}
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:
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 }; }
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; } }
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 }; }
<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.
If you group appointments by resource, multi-resource appointments appear under all linked resources.
Related API Members
The table below lists API members related to resources:
Member | Description |
---|---|
Creates a new resource item. | |
Returns a resource item with the specified identifier from the Scheduler’s data storage. | |
Specifies how Scheduler appointments are grouped. None, resource, date. | |
Specifies whether a resource color is applied to the corresponding group’s header. | |
Specifies whether the Scheduler displays the Resource Navigator. | |
Specifies the data source that stores visible resource objects. |