Scheduler - Grouping by Resources

Users can group appointments by resources. This demo declares a single resource—Priority. Refer to the following demo for more information about resources and their configuration: Resources.

To group appointments by resources, specify the groups[] array. Each element of this array is the fieldExpr of a corresponding resource kind. The order of group headers in the UI is the same as items in the resource instances array. If the groups[] array contains more than one element, groups are nested.

Backend API

@model IEnumerable<DevExtreme.NETCore.Demos.Models.EmployeeAppointment> @(Html.DevExtreme().Scheduler() .DataSource(Model) .TimeZone("America/Los_Angeles") .TextExpr("Text") .StartDateExpr("StartDate") .EndDateExpr("EndDate") .Views(views => { views.Add() .Name("Vertical Grouping") .Type(SchedulerViewType.WorkWeek) .GroupOrientation(Orientation.Vertical) .CellDuration(60) .IntervalCount(2); views.Add() .Name("Horizontal Grouping") .Type(SchedulerViewType.WorkWeek) .GroupOrientation(Orientation.Horizontal) .CellDuration(30) .IntervalCount(2); }) .CurrentView(SchedulerViewType.WorkWeek) .CrossScrollingEnabled(true) .ShowAllDayPanel(false) .CurrentDate(new DateTime(2021, 4, 21)) .StartDayHour(9) .EndDayHour(16) .Groups(new[] { "Priority" }) .Resources(res => { res.Add() .FieldExpr("Priority") .AllowMultiple(false) .Label("Priority") .Icon("tags") .DataSource(new[] { new { id = "Low", text = "Low Priority", color = "#1e90ff" }, new { id = "High", text = "High Priority", color = "#ff9747" } }); }) .ShowCurrentTimeIndicator(false) )

using Microsoft.AspNetCore.Mvc; using DevExtreme.NETCore.Demos.Models.SampleData; using DevExtreme.NETCore.Demos.ViewModels; namespace DevExtreme.NETCore.Demos.Controllers { public class SchedulerController : Controller { public ActionResult GroupingByResources() { return View(SampleData.Tasks); } } }

using System; using System.Collections.Generic; using System.Text.Json.Serialization; namespace DevExtreme.NETCore.Demos.Models { [JsonConverter(typeof(JsonStringEnumConverter))] public enum Priority { High, Normal, Low, Urgent } public class EmployeeAppointment : Appointment { public Priority Priority { set; get; } public IEnumerable<int> OwnerId { get; set; } } public class EmployeeTask { public int ID { set; get; } public string Subject { set; get; } public DateTime StartDate { set; get; } public DateTime DueDate { set; get; } public string Status { set; get; } public Priority Priority { set; get; } public int Completion { set; get; } public IEnumerable<int> OwnerId { get; set; } public string Assigned { get; set; } public string RecurrenceRule { get; set; } } }

using System; using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<EmployeeAppointment> Tasks = new[] { new EmployeeAppointment { Text = "Website Re-Design Plan", Priority = Priority.High, StartDate = "2021-04-19T16:30:00.000Z", EndDate = "2021-04-19T18:30:00.000Z" }, new EmployeeAppointment { Text = "Book Flights to San Fran for Sales Trip", Priority = Priority.Low, StartDate = "2021-04-22T17:00:00.000Z", EndDate = "2021-04-22T19:00:00.000Z", }, new EmployeeAppointment { Text = "Install New Router in Dev Room", Priority = Priority.Low, StartDate = "2021-04-19T20:00:00.000Z", EndDate = "2021-04-19T22:30:00.000Z" }, new EmployeeAppointment { Text = "Approve Personal Computer Upgrade Plan", Priority = Priority.High, StartDate = "2021-04-20T17:00:00.000Z", EndDate = "2021-04-20T18:00:00.000Z" }, new EmployeeAppointment { Text = "Final Budget Review", Priority = Priority.High, StartDate = "2021-04-20T19:00:00.000Z", EndDate = "2021-04-20T20:35:00.000Z" }, new EmployeeAppointment { Text = "New Brochures", Priority = Priority.High, StartDate = "2021-04-19T20:00:00.000Z", EndDate = "2021-04-19T22:15:00.000Z" }, new EmployeeAppointment { Text = "Install New Database", Priority = Priority.Low, StartDate = "2021-04-20T16:00:00.000Z", EndDate = "2021-04-20T19:15:00.000Z" }, new EmployeeAppointment { Text = "Approve New Online Marketing Strategy", Priority = Priority.High, StartDate = "2021-04-21T19:00:00.000Z", EndDate = "2021-04-21T21:00:00.000Z" }, new EmployeeAppointment { Text = "Upgrade Personal Computers", Priority = Priority.Low, StartDate = "2021-04-19T16:00:00.000Z", EndDate = "2021-04-19T18:30:00.000Z" }, new EmployeeAppointment { Text = "Prepare 2021 Marketing Plan", Priority = Priority.High, StartDate = "2021-04-22T18:00:00.000Z", EndDate = "2021-04-22T20:30:00.000Z" }, new EmployeeAppointment { Text = "Brochure Design Review", Priority = Priority.Low, StartDate = "2021-04-21T18:00:00.000Z", EndDate = "2021-04-21T20:30:00.000Z" }, new EmployeeAppointment { Text = "Create Icons for Website", Priority = Priority.High, StartDate = "2021-04-23T17:00:00.000Z", EndDate = "2021-04-23T18:30:00.000Z" }, new EmployeeAppointment { Text = "Upgrade Server Hardware", Priority = Priority.Low, StartDate = "2021-04-23T16:00:00.000Z", EndDate = "2021-04-23T22:00:00.000Z" }, new EmployeeAppointment { Text = "Submit New Website Design", Priority = Priority.High, StartDate = "2021-04-23T23:30:00.000Z", EndDate = "2021-04-24T01:00:00.000Z" }, new EmployeeAppointment { Text = "Launch New Website", Priority = Priority.High, StartDate = "2021-04-23T19:20:00.000Z", EndDate = "2021-04-23T21:00:00.000Z" }, new EmployeeAppointment { Text = "Google AdWords Strategy", Priority = Priority.Low, StartDate = "2021-04-26T16:00:00.000Z", EndDate = "2021-04-26T19:00:00.000Z" }, new EmployeeAppointment { Text = "Rollout of New Website and Marketing Brochures", Priority = Priority.Low, StartDate = "2021-04-26T20:00:00.000Z", EndDate = "2021-04-26T22:30:00.000Z" }, new EmployeeAppointment { Text = "Non-Compete Agreements", Priority = Priority.High, StartDate = "2021-04-27T20:00:00.000Z", EndDate = "2021-04-27T22:45:00.000Z" }, new EmployeeAppointment { Text = "Approve Hiring of John Jeffers", Priority = Priority.High, StartDate = "2021-04-27T16:00:00.000Z", EndDate = "2021-04-27T19:00:00.000Z" }, new EmployeeAppointment { Text = "Update NDA Agreement", Priority = Priority.Low, StartDate = "2021-04-27T18:00:00.000Z", EndDate = "2021-04-27T21:15:00.000Z" }, new EmployeeAppointment { Text = "Update Employee Files with New NDA", Priority = Priority.Low, StartDate = "2021-04-30T16:00:00.000Z", EndDate = "2021-04-30T18:45:00.000Z" }, new EmployeeAppointment { Text = "Submit Questions Regarding New NDA", Priority = Priority.Low, StartDate = "2021-04-28T17:00:00.000Z", EndDate = "2021-04-28T18:30:00.000Z" }, new EmployeeAppointment { Text = "Submit Signed NDA", Priority = Priority.Low, StartDate = "2021-04-28T20:00:00.000Z", EndDate = "2021-04-28T22:00:00.000Z" }, new EmployeeAppointment { Text = "Review Revenue Projections", Priority = Priority.High, StartDate = "2021-04-28T18:00:00.000Z", EndDate = "2021-04-28T21:00:00.000Z" }, new EmployeeAppointment { Text = "Comment on Revenue Projections", Priority = Priority.High, StartDate = "2021-04-26T17:00:00.000Z", EndDate = "2021-04-26T20:00:00.000Z" }, new EmployeeAppointment { Text = "Provide New Health Insurance Docs", Priority = Priority.High, StartDate = "2021-04-30T19:00:00.000Z", EndDate = "2021-04-30T22:00:00.000Z" }, new EmployeeAppointment { Text = "Review Changes to Health Insurance Coverage", Priority = Priority.High, StartDate = "2021-04-29T16:00:00.000Z", EndDate = "2021-04-29T20:00:00.000Z" }, new EmployeeAppointment { Text = "Review Training Course for any Omissions", Priority = Priority.Low, StartDate = "2021-04-29T18:00:00.000Z", EndDate = "2021-04-29T21:00:00.000Z" } }; } }

.dx-scheduler-cell-sizes-horizontal { width: 100px; }

The Scheduler can arrange group headers vertically (in a column) or horizontally (in a row). Use the views.groupOrientation property to set a custom orientation for specific views. This demo shows two Work Week views with different group orientations.