Your search did not match any results.
Scheduler

Group Orientation

Documentation

This example shows the workWeek view with different group orientations. Select the "Vertical Grouping" tab to see the resource headers organized in a column and the "Horizontal Grouping" — arranged in a row.

@model IEnumerable<DevExtreme.MVC.Demos.Models.EmployeeAppointment> @(Html.DevExtreme().Scheduler() .DataSource(Model) .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, 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" } }); }) .ShowCurrentTimeIndicator(false) )
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 GroupOrientation() { return View(SampleData.Tasks); } } }
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> Tasks = new[] { new EmployeeAppointment { Text = "Website Re-Design Plan", Priority = Priority.High, StartDate = "2021-05-17T06:30:00.000Z", EndDate = "2021-05-17T08:30:00.000Z" }, new EmployeeAppointment { Text = "Book Flights to San Fran for Sales Trip", Priority = Priority.Low, StartDate = "2021-05-20T07:00:00.000Z", EndDate = "2021-05-20T09:00:00.000Z", }, new EmployeeAppointment { Text = "Install New Router in Dev Room", Priority = Priority.Low, StartDate = "2021-05-17T10:00:00.000Z", EndDate = "2021-05-17T12:30:00.000Z" }, new EmployeeAppointment { Text = "Approve Personal Computer Upgrade Plan", Priority = Priority.High, StartDate = "2021-05-18T07:00:00.000Z", EndDate = "2021-05-18T08:00:00.000Z" }, new EmployeeAppointment { Text = "Final Budget Review", Priority = Priority.High, StartDate = "2021-05-18T09:00:00.000Z", EndDate = "2021-05-18T10:35:00.000Z" }, new EmployeeAppointment { Text = "New Brochures", Priority = Priority.High, StartDate = "2021-05-17T10:00:00.000Z", EndDate = "2021-05-17T12:15:00.000Z" }, new EmployeeAppointment { Text = "Install New Database", Priority = Priority.Low, StartDate = "2021-05-18T06:00:00.000Z", EndDate = "2021-05-18T09:15:00.000Z" }, new EmployeeAppointment { Text = "Approve New Online Marketing Strategy", Priority = Priority.High, StartDate = "2021-05-19T09:00:00.000Z", EndDate = "2021-05-19T11:00:00.000Z" }, new EmployeeAppointment { Text = "Upgrade Personal Computers", Priority = Priority.Low, StartDate = "2021-05-17T06:00:00.000Z", EndDate = "2021-05-17T08:30:00.000Z" }, new EmployeeAppointment { Text = "Prepare 2021 Marketing Plan", Priority = Priority.High, StartDate = "2021-05-20T08:00:00.000Z", EndDate = "2021-05-20T10:30:00.000Z" }, new EmployeeAppointment { Text = "Brochure Design Review", Priority = Priority.Low, StartDate = "2021-05-19T08:00:00.000Z", EndDate = "2021-05-19T10:30:00.000Z" }, new EmployeeAppointment { Text = "Create Icons for Website", Priority = Priority.High, StartDate = "2021-05-21T07:00:00.000Z", EndDate = "2021-05-21T08:30:00.000Z" }, new EmployeeAppointment { Text = "Upgrade Server Hardware", Priority = Priority.Low, StartDate = "2021-05-21T06:00:00.000Z", EndDate = "2021-05-21T12:00:00.000Z" }, new EmployeeAppointment { Text = "Submit New Website Design", Priority = Priority.High, StartDate = "2021-05-21T13:30:00.000Z", EndDate = "2021-05-21T15:00:00.000Z" }, new EmployeeAppointment { Text = "Launch New Website", Priority = Priority.High, StartDate = "2021-05-21T09:20:00.000Z", EndDate = "2021-05-21T11:00:00.000Z" }, new EmployeeAppointment { Text = "Google AdWords Strategy", Priority = Priority.Low, StartDate = "2021-05-24T06:00:00.000Z", EndDate = "2021-05-24T09:00:00.000Z" }, new EmployeeAppointment { Text = "Rollout of New Website and Marketing Brochures", Priority = Priority.Low, StartDate = "2021-05-24T10:00:00.000Z", EndDate = "2021-05-24T12:30:00.000Z" }, new EmployeeAppointment { Text = "Non-Compete Agreements", Priority = Priority.High, StartDate = "2021-05-25T10:00:00.000Z", EndDate = "2021-05-25T12:45:00.000Z" }, new EmployeeAppointment { Text = "Approve Hiring of John Jeffers", Priority = Priority.High, StartDate = "2021-05-25T06:00:00.000Z", EndDate = "2021-05-25T09:00:00.000Z" }, new EmployeeAppointment { Text = "Update NDA Agreement", Priority = Priority.Low, StartDate = "2021-05-25T08:00:00.000Z", EndDate = "2021-05-25T11:15:00.000Z" }, new EmployeeAppointment { Text = "Update Employee Files with New NDA", Priority = Priority.Low, StartDate = "2021-05-28T06:00:00.000Z", EndDate = "2021-05-28T08:45:00.000Z" }, new EmployeeAppointment { Text = "Submit Questions Regarding New NDA", Priority = Priority.Low, StartDate = "2021-05-26T07:00:00.000Z", EndDate = "2021-05-26T08:30:00.000Z" }, new EmployeeAppointment { Text = "Submit Signed NDA", Priority = Priority.Low, StartDate = "2021-05-26T10:00:00.000Z", EndDate = "2021-05-26T12:00:00.000Z" }, new EmployeeAppointment { Text = "Review Revenue Projections", Priority = Priority.High, StartDate = "2021-05-26T08:00:00.000Z", EndDate = "2021-05-26T11:00:00.000Z" }, new EmployeeAppointment { Text = "Comment on Revenue Projections", Priority = Priority.High, StartDate = "2021-05-24T07:00:00.000Z", EndDate = "2021-05-24T10:00:00.000Z" }, new EmployeeAppointment { Text = "Provide New Health Insurance Docs", Priority = Priority.High, StartDate = "2021-05-28T09:00:00.000Z", EndDate = "2021-05-28T12:00:00.000Z" }, new EmployeeAppointment { Text = "Review Changes to Health Insurance Coverage", Priority = Priority.High, StartDate = "2021-05-27T06:00:00.000Z", EndDate = "2021-05-27T10:00:00.000Z" }, new EmployeeAppointment { Text = "Review Training Course for any Ommissions", Priority = Priority.Low, StartDate = "2021-05-27T08:00:00.000Z", EndDate = "2021-05-27T11:00:00.000Z" } }; } }
.dx-scheduler-cell-sizes-horizontal { width: 100px; }