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.EmployeeTask>
@(Html.DevExtreme().Scheduler()
.ID("scheduler")
.DataSource(Model)
.TextExpr("Subject")
.StartDateExpr("StartDate")
.EndDateExpr("DueDate")
.Views(views => {
views.Add()
.Name("Week")
.Type(SchedulerViewType.Week);
views.Add()
.Name("Month")
.Type(SchedulerViewType.Month);
views.Add()
.Name("Timeline Week")
.Type(SchedulerViewType.TimelineWeek)
.GroupOrientation(Orientation.Horizontal)
.CellDuration(60);
})
.CurrentView(SchedulerViewType.Week)
.CrossScrollingEnabled(true)
.GroupByDate(true)
.CurrentDate(new DateTime(2018, 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;
namespace DevExtreme.MVC.Demos.Models {
[JsonConverter(typeof(StringEnumConverter))]
public enum Priority { High, Normal, Low, Urgent }
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<EmployeeTask> GroupByDateTasks = new[] {
new EmployeeTask {
Subject = "Website Re-Design Plan",
Priority = Priority.High,
StartDate = new DateTime(2018, 5, 21, 9, 30, 0),
DueDate = new DateTime(2018, 5, 21, 11, 30, 0)
},
new EmployeeTask {
Subject = "Book Flights to San Fran for Sales Trip",
Priority = Priority.Low,
StartDate = new DateTime(2018, 5, 24, 10, 0, 0),
DueDate = new DateTime(2018, 5, 24, 12, 0, 0)
},
new EmployeeTask {
Subject = "Install New Router in Dev Room",
Priority = Priority.Low,
StartDate = new DateTime(2018, 5, 20, 13, 0, 0),
DueDate = new DateTime(2018, 5, 20, 15, 30, 0)
},
new EmployeeTask {
Subject = "Approve Personal Computer Upgrade Plan",
Priority = Priority.High,
StartDate = new DateTime(2018, 5, 22, 10, 0, 0),
DueDate = new DateTime(2018, 5, 22, 11, 0, 0)
},
new EmployeeTask {
Subject = "Final Budget Review",
Priority = Priority.High,
StartDate = new DateTime(2018, 5, 22, 12, 0, 0),
DueDate = new DateTime(2018, 5, 22, 13, 35, 0)
},
new EmployeeTask {
Subject = "New Brochures",
Priority = Priority.High,
StartDate = new DateTime(2018, 5, 21, 13, 0, 0),
DueDate = new DateTime(2018, 5, 21, 15, 15, 0)
},
new EmployeeTask {
Subject = "Install New Database",
Priority = Priority.High,
StartDate = new DateTime(2018, 5, 13, 9, 0, 0),
DueDate = new DateTime(2018, 5, 15, 12, 15, 0)
},
new EmployeeTask {
Subject = "Approve New Online Marketing Strategy",
Priority = Priority.High,
StartDate = new DateTime(2018, 5, 23, 12, 0, 0),
DueDate = new DateTime(2018, 5, 23, 14, 0, 0)
},
new EmployeeTask {
Subject = "Upgrade Personal Computers",
Priority = Priority.Low,
StartDate = new DateTime(2018, 5, 13, 9, 0, 0),
DueDate = new DateTime(2018, 5, 13, 11, 30, 0),
RecurrenceRule = "FREQ=DAILY;COUNT=4"
},
new EmployeeTask {
Subject = "Prepare 2018 Marketing Plan",
Priority = Priority.High,
StartDate = new DateTime(2018, 5, 24, 11, 0, 0),
DueDate = new DateTime(2018, 5, 24, 13, 30, 0)
},
new EmployeeTask {
Subject = "Brochure Design Review",
Priority = Priority.Low,
StartDate = new DateTime(2018, 5, 23, 11, 0, 0),
DueDate = new DateTime(2018, 5, 23, 13, 30, 0)
},
new EmployeeTask {
Subject = "Create Icons for Website",
Priority = Priority.High,
StartDate = new DateTime(2018, 5, 25, 10, 0, 0),
DueDate = new DateTime(2018, 5, 25, 11, 30, 0)
},
new EmployeeTask {
Subject = "Upgrade Server Hardware",
Priority = Priority.Low,
StartDate = new DateTime(2018, 5, 7, 9, 0, 0),
DueDate = new DateTime(2018, 5, 10, 15, 0, 0)
},
new EmployeeTask {
Subject = "Submit New Website Design",
Priority = Priority.High,
StartDate = new DateTime(2018, 5, 25, 16, 30, 0),
DueDate = new DateTime(2018, 5, 25, 18, 0, 0)
},
new EmployeeTask {
Subject = "Launch New Website",
Priority = Priority.High,
StartDate = new DateTime(2018, 5, 26, 12, 20, 0),
DueDate = new DateTime(2018, 5, 26, 14, 0, 0)
},
new EmployeeTask {
Subject = "Google AdWords Strategy",
Priority = Priority.Low,
StartDate = new DateTime(2018, 5, 28, 9, 0, 0),
DueDate = new DateTime(2018, 5, 28, 12, 0, 0)
},
new EmployeeTask {
Subject = "Rollout of New Website and Marketing Brochures",
Priority = Priority.Low,
StartDate = new DateTime(2018, 5, 28, 13, 0, 0),
DueDate = new DateTime(2018, 5, 28, 15, 30, 0)
},
new EmployeeTask {
Subject = "Non-Compete Agreements",
Priority = Priority.High,
StartDate = new DateTime(2018, 5, 29, 13, 0, 0),
DueDate = new DateTime(2018, 5, 29, 15, 45, 0)
},
new EmployeeTask {
Subject = "Approve Hiring of John Jeffers",
Priority = Priority.High,
StartDate = new DateTime(2018, 5, 29, 9, 0, 0),
DueDate = new DateTime(2018, 5, 29, 12, 0, 0)
},
new EmployeeTask {
Subject = "Update NDA Agreement",
Priority = Priority.Low,
StartDate = new DateTime(2018, 5, 29, 11, 0, 0),
DueDate = new DateTime(2018, 5, 29, 14, 15, 0)
},
new EmployeeTask {
Subject = "Update Employee Files with New NDA",
Priority = Priority.Low,
StartDate = new DateTime(2018, 6, 1, 9, 0, 0),
DueDate = new DateTime(2018, 6, 1, 11, 45, 0)
},
new EmployeeTask {
Subject = "Submit Questions Regarding New NDA",
Priority = Priority.Low,
StartDate = new DateTime(2018, 5, 30, 10, 0, 0),
DueDate = new DateTime(2018, 5, 30, 11, 30, 0)
},
new EmployeeTask {
Subject = "Submit Signed NDA",
Priority = Priority.Low,
StartDate = new DateTime(2018, 5, 30, 13, 0, 0),
DueDate = new DateTime(2018, 5, 30, 15, 0, 0)
},
new EmployeeTask {
Subject = "Review Revenue Projections",
Priority = Priority.High,
StartDate = new DateTime(2018, 5, 30, 11, 0, 0),
DueDate = new DateTime(2018, 5, 30, 14, 0, 0)
},
new EmployeeTask {
Subject = "Comment on Revenue Projections",
Priority = Priority.High,
StartDate = new DateTime(2018, 5, 28, 10, 0, 0),
DueDate = new DateTime(2018, 5, 28, 13, 0, 0)
},
new EmployeeTask {
Subject = "Provide New Health Insurance Docs",
Priority = Priority.High,
StartDate = new DateTime(2018, 6, 1, 12, 0, 0),
DueDate = new DateTime(2018, 6, 1, 15, 0, 0)
},
new EmployeeTask {
Subject = "Review Changes to Health Insurance Coverage",
Priority = Priority.High,
StartDate = new DateTime(2018, 5, 31, 9, 0, 0),
DueDate = new DateTime(2018, 5, 31, 13, 0, 0)
},
new EmployeeTask {
Subject = "Review Training Course for any Ommissions",
Priority = Priority.Low,
StartDate = new DateTime(2018, 5, 31, 11, 0, 0),
DueDate = new DateTime(2018, 5, 31, 14, 0, 0)
}
};
}
}
.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;
}