Backend API
x
IEnumerable<DevExtreme.NETCore.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>xxxxxxxxxxusing 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 GroupByDate() { return View(SampleData.GroupByDateTasks); } }}xxxxxxxxxxusing 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; } }}xxxxxxxxxxusing System;using System.Collections.Generic;namespace DevExtreme.NETCore.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" } }; }}xxxxxxxxxx.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;}