Skip to main content
All docs
V25.1
  • Resources in Blazor Scheduler

    • 15 minutes to read

    You can assign one or multiple resources to Scheduler appointments to group appointments by category (display side-by-side calendars in a single control). For instance, if employees are resources, the Scheduler component allows users to browse appointments related to each employee.

    Scheduler Resources

    Run Demo: 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"
            }
        };
    }
    

    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.