Your search did not match any results.

Grouping By Date

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

When appointments are grouped by resources, you can additionally group them by date first. To do this, set groupByDate to true. You can also use the same property for individual views. Note that Scheduler groups appointments by date when the view's groupOrientation is "horizontal" only.

In this demo, you can use the switch below the Scheduler to change the value of groupByDate.

Backend API
@model IEnumerable<DevExtreme.MVC.Demos.Models.EmployeeAppointment> @(Html.DevExtreme().Scheduler() .ID("scheduler") .DataSource(Model) .TimeZone("America/Los_Angeles") .TextExpr("Text") .StartDateExpr("StartDate") .EndDateExpr("EndDate") .Views(views => { views.Add() .Name("Week") .Type(SchedulerViewType.Week); views.Add() .Name("Month") .Type(SchedulerViewType.Month); }) .CurrentView(SchedulerViewType.Week) .CrossScrollingEnabled(true) .GroupByDate(true) .CurrentDate(new DateTime(2021, 4, 21)) .StartDayHour(9) .EndDayHour(19) .Groups(new[] { "Priority" }) .Resources(res => { res.Add() .FieldExpr("Priority") .AllowMultiple(false) .Label("Priority") .DataSource(new[] { new { id = "Low", text = "Low Priority", color = "#1e90ff" }, new { id = "High", text = "High Priority", color = "#ff9747" } }); }) .Height(730) .ShowCurrentTimeIndicator(false) ) <div class="options"> <div class="caption">Group by Date First</div> <div class="option"> @(Html.DevExtreme().Switch() .Value(true) .OnValueChanged("groupByDate_valueChanged") ) </div> </div> <script> function groupByDate_valueChanged(e) { var scheduler = $("#scheduler").dxScheduler("instance"); scheduler.option("groupByDate", e.value) } </script>
using DevExtreme.MVC.Demos.Models.SampleData; using DevExtreme.MVC.Demos.ViewModels; using System; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class SchedulerController : Controller { public ActionResult GroupByDate() { return View(SampleData.GroupByDateTasks); } } }
using Newtonsoft.Json; using Newtonsoft.Json.Converters; using System; using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models { [JsonConverter(typeof(StringEnumConverter))] 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 int[] OwnerId { get; set; } public string Assigned { get; set; } public string RecurrenceRule { get; set; } } }
using System; using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<EmployeeAppointment> GroupByDateTasks = 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-18T20:00:00.000Z", EndDate = "2021-04-18T22: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.High, StartDate = "2021-04-11T16:00:00.000Z", EndDate = "2021-04-13T19: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-11T16:00:00.000Z", EndDate = "2021-04-11T18:30:00.000Z", RecurrenceRule = "FREQ=DAILY;COUNT=4" }, 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-05T16:00:00.000Z", EndDate = "2021-04-08T22: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-24T19:20:00.000Z", EndDate = "2021-04-24T21: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" } }; } }
.demo-container { display: flex; flex-direction: column; } .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; display: inline-block; } .dx-scheduler-work-space-group-by-date .dx-scheduler-group-header-content { font-size: 11px; }