Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
Grouping By Date
Documentation
This example shows appointments grouped by date and then by resource. You can change this order by clicking "Group by Date First" under the Scheduler.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
@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, 5, 21))
.StartDayHour(9)
.EndDayHour(16)
.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(700)
.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-05-17T16:30:00.000Z",
EndDate = "2021-05-17T18:30:00.000Z"
},
new EmployeeAppointment {
Text = "Book Flights to San Fran for Sales Trip",
Priority = Priority.Low,
StartDate = "2021-05-20T17:00:00.000Z",
EndDate = "2021-05-20T19:00:00.000Z",
},
new EmployeeAppointment {
Text = "Install New Router in Dev Room",
Priority = Priority.Low,
StartDate = "2021-05-16T20:00:00.000Z",
EndDate = "2021-05-16T22:30:00.000Z"
},
new EmployeeAppointment {
Text = "Approve Personal Computer Upgrade Plan",
Priority = Priority.High,
StartDate = "2021-05-18T17:00:00.000Z",
EndDate = "2021-05-18T18:00:00.000Z"
},
new EmployeeAppointment {
Text = "Final Budget Review",
Priority = Priority.High,
StartDate = "2021-05-18T19:00:00.000Z",
EndDate = "2021-05-18T20:35:00.000Z"
},
new EmployeeAppointment {
Text = "New Brochures",
Priority = Priority.High,
StartDate = "2021-05-17T20:00:00.000Z",
EndDate = "2021-05-17T22:15:00.000Z"
},
new EmployeeAppointment {
Text = "Install New Database",
Priority = Priority.High,
StartDate = "2021-05-09T16:00:00.000Z",
EndDate = "2021-05-11T19:15:00.000Z"
},
new EmployeeAppointment {
Text = "Approve New Online Marketing Strategy",
Priority = Priority.High,
StartDate = "2021-05-19T19:00:00.000Z",
EndDate = "2021-05-19T21:00:00.000Z"
},
new EmployeeAppointment {
Text = "Upgrade Personal Computers",
Priority = Priority.Low,
StartDate = "2021-05-09T16:00:00.000Z",
EndDate = "2021-05-09T18:30:00.000Z",
RecurrenceRule = "FREQ=DAILY;COUNT=4"
},
new EmployeeAppointment {
Text = "Prepare 2021 Marketing Plan",
Priority = Priority.High,
StartDate = "2021-05-20T18:00:00.000Z",
EndDate = "2021-05-20T20:30:00.000Z"
},
new EmployeeAppointment {
Text = "Brochure Design Review",
Priority = Priority.Low,
StartDate = "2021-05-19T18:00:00.000Z",
EndDate = "2021-05-19T20:30:00.000Z"
},
new EmployeeAppointment {
Text = "Create Icons for Website",
Priority = Priority.High,
StartDate = "2021-05-21T17:00:00.000Z",
EndDate = "2021-05-21T18:30:00.000Z"
},
new EmployeeAppointment {
Text = "Upgrade Server Hardware",
Priority = Priority.Low,
StartDate = "2021-05-03T16:00:00.000Z",
EndDate = "2021-05-06T22:00:00.000Z"
},
new EmployeeAppointment {
Text = "Submit New Website Design",
Priority = Priority.High,
StartDate = "2021-05-21T23:30:00.000Z",
EndDate = "2021-05-22T01:00:00.000Z"
},
new EmployeeAppointment {
Text = "Launch New Website",
Priority = Priority.High,
StartDate = "2021-05-22T19:20:00.000Z",
EndDate = "2021-05-22T21:00:00.000Z"
},
new EmployeeAppointment {
Text = "Google AdWords Strategy",
Priority = Priority.Low,
StartDate = "2021-05-24T16:00:00.000Z",
EndDate = "2021-05-24T19:00:00.000Z"
},
new EmployeeAppointment {
Text = "Rollout of New Website and Marketing Brochures",
Priority = Priority.Low,
StartDate = "2021-05-24T20:00:00.000Z",
EndDate = "2021-05-24T22:30:00.000Z"
},
new EmployeeAppointment {
Text = "Non-Compete Agreements",
Priority = Priority.High,
StartDate = "2021-05-25T20:00:00.000Z",
EndDate = "2021-05-25T22:45:00.000Z"
},
new EmployeeAppointment {
Text = "Approve Hiring of John Jeffers",
Priority = Priority.High,
StartDate = "2021-05-25T16:00:00.000Z",
EndDate = "2021-05-25T19:00:00.000Z"
},
new EmployeeAppointment {
Text = "Update NDA Agreement",
Priority = Priority.Low,
StartDate = "2021-05-25T18:00:00.000Z",
EndDate = "2021-05-25T21:15:00.000Z"
},
new EmployeeAppointment {
Text = "Update Employee Files with New NDA",
Priority = Priority.Low,
StartDate = "2021-05-28T16:00:00.000Z",
EndDate = "2021-05-28T18:45:00.000Z"
},
new EmployeeAppointment {
Text = "Submit Questions Regarding New NDA",
Priority = Priority.Low,
StartDate = "2021-05-26T17:00:00.000Z",
EndDate = "2021-05-26T18:30:00.000Z"
},
new EmployeeAppointment {
Text = "Submit Signed NDA",
Priority = Priority.Low,
StartDate = "2021-05-26T20:00:00.000Z",
EndDate = "2021-05-26T22:00:00.000Z"
},
new EmployeeAppointment {
Text = "Review Revenue Projections",
Priority = Priority.High,
StartDate = "2021-05-26T18:00:00.000Z",
EndDate = "2021-05-26T21:00:00.000Z"
},
new EmployeeAppointment {
Text = "Comment on Revenue Projections",
Priority = Priority.High,
StartDate = "2021-05-24T17:00:00.000Z",
EndDate = "2021-05-24T20:00:00.000Z"
},
new EmployeeAppointment {
Text = "Provide New Health Insurance Docs",
Priority = Priority.High,
StartDate = "2021-05-28T19:00:00.000Z",
EndDate = "2021-05-28T22:00:00.000Z"
},
new EmployeeAppointment {
Text = "Review Changes to Health Insurance Coverage",
Priority = Priority.High,
StartDate = "2021-05-27T16:00:00.000Z",
EndDate = "2021-05-27T20:00:00.000Z"
},
new EmployeeAppointment {
Text = "Review Training Course for any Ommissions",
Priority = Priority.Low,
StartDate = "2021-05-27T18:00:00.000Z",
EndDate = "2021-05-27T21: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;
}