Your search did not match any results.
Scheduler

Grouped Appointments

Documentation
This demo illustrates how the Scheduler groups its appointments by resources.
@model IEnumerable<DevExtreme.NETCore.Demos.Models.EmployeeTask> @(Html.DevExtreme().Scheduler() .DataSource(Model) .TextExpr("Subject") .StartDateExpr("StartDate") .EndDateExpr("DueDate") .Views(new SchedulerViewType[] { SchedulerViewType.Month, SchedulerViewType.Week, SchedulerViewType.WorkWeek, SchedulerViewType.Day }) .CurrentView(SchedulerViewType.WorkWeek) .CurrentDate(new DateTime(2015, 5, 25)) .FirstDayOfWeek(FirstDayOfWeek.Monday) .StartDayHour(8) .EndDayHour(19) .OnAppointmentAdded(@<text> function(e) { showToast("Added", e.appointmentData.Subject, "success"); } </text>) .OnAppointmentUpdated(@<text> function(e) { showToast("Updated", e.appointmentData.Subject, "info"); } </text>) .OnAppointmentDeleted(@<text> function(e) { showToast("Deleted", e.appointmentData.Subject, "warning"); } </text>) .Groups(new string[] { "Priority" }) .Resources(res => { res.Add() .FieldExpr("Priority") .AllowMultiple(false) .Label("Priority") .DataSource(new object[] { new { id = "Low", text = "Low Priority", color = "#1e90ff" }, new { id = "High", text = "High Priority", color = "#ff9747" } }); }) .Width("100%") .Height(600) ) <script> function showToast(event, value, type) { DevExpress.ui.notify(event + " \"" + value + "\"" + " task", type, 800); } </script>
using DevExtreme.NETCore.Demos.Models.SampleData; using DevExtreme.NETCore.Demos.ViewModels; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class SchedulerController : Controller { public ActionResult GroupedAppointments() { return View(SampleData.Tasks); } } }
using Newtonsoft.Json; using Newtonsoft.Json.Converters; using System; namespace DevExtreme.NETCore.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; } } }
using System; using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static List<EmployeeTask> Tasks { get { return new List<EmployeeTask> { new EmployeeTask { Subject = "Website Re-Design Plan", Priority = Priority.High, StartDate = new DateTime(2015, 5, 25, 9, 0, 0), DueDate = new DateTime(2015, 5, 25, 11, 30, 0) }, new EmployeeTask { Subject = "Book Flights to San Fran for Sales Trip", Priority = Priority.High, StartDate = new DateTime(2015, 5, 25, 12, 0, 0), DueDate = new DateTime(2015, 5, 25, 13, 0, 0) }, new EmployeeTask { Subject = "Install New Router in Dev Room", Priority = Priority.Low, StartDate = new DateTime(2015, 5, 25, 14, 30, 0), DueDate = new DateTime(2015, 5, 25, 15, 30, 0) }, new EmployeeTask { Subject = "Approve Personal Computer Upgrade Plan", Priority = Priority.High, StartDate = new DateTime(2015, 5, 26, 10, 0, 0), DueDate = new DateTime(2015, 5, 26, 11, 0, 0) }, new EmployeeTask { Subject = "Final Budget Review", Priority = Priority.High, StartDate = new DateTime(2015, 5, 26, 12, 0, 0), DueDate = new DateTime(2015, 5, 26, 13, 35, 0) }, new EmployeeTask { Subject = "New Brochures", Priority = Priority.High, StartDate = new DateTime(2015, 5, 26, 14, 30, 0), DueDate = new DateTime(2015, 5, 26, 15, 45, 0) }, new EmployeeTask { Subject = "Install New Database", Priority = Priority.Low, StartDate = new DateTime(2015, 5, 27, 9, 45, 0), DueDate = new DateTime(2015, 5, 27, 11, 15, 0) }, new EmployeeTask { Subject = "Approve New Online Marketing Strategy", Priority = Priority.High, StartDate = new DateTime(2015, 5, 27, 12, 0, 0), DueDate = new DateTime(2015, 5, 27, 14, 0, 0) }, new EmployeeTask { Subject = "Upgrade Personal Computers", Priority = Priority.Low, StartDate = new DateTime(2015, 5, 27, 15, 15, 0), DueDate = new DateTime(2015, 5, 27, 16, 30, 0) }, new EmployeeTask { Subject = "Prepare 2015 Marketing Plan", Priority = Priority.High, StartDate = new DateTime(2015, 5, 28, 11, 0, 0), DueDate = new DateTime(2015, 5, 28, 13, 30, 0) }, new EmployeeTask { Subject = "Brochure Design Review", Priority = Priority.Low, StartDate = new DateTime(2015, 5, 28, 14, 0, 0), DueDate = new DateTime(2015, 5, 28, 15, 30, 0) }, new EmployeeTask { Subject = "Create Icons for Website", Priority = Priority.High, StartDate = new DateTime(2015, 5, 29, 10, 0, 0), DueDate = new DateTime(2015, 5, 29, 11, 30, 0) }, new EmployeeTask { Subject = "Upgrade Server Hardware", Priority = Priority.Low, StartDate = new DateTime(2015, 5, 29, 14, 30, 0), DueDate = new DateTime(2015, 5, 29, 16, 0, 0) }, new EmployeeTask { Subject = "Submit New Website Design", Priority = Priority.High, StartDate = new DateTime(2015, 5, 29, 16, 30, 0), DueDate = new DateTime(2015, 5, 29, 18, 0, 0) }, new EmployeeTask { Subject = "Launch New Website", Priority = Priority.High, StartDate = new DateTime(2015, 5, 29, 12, 20, 0), DueDate = new DateTime(2015, 5, 29, 14, 0, 0) } }; } } } }
.dx-scheduler-work-space-week .dx-scheduler-appointment-content { font-size: 12px; } .dx-scheduler-work-space .dx-scheduler-header-panel-cell { font-size: 12px; }