Scheduler - Individual Views Customization

To customize a view, configure its settings in an object inside the views[] array. You should specify the view's type and other properties to override global view settings.

This demo customizes two views - Week and Work Week - in the following manner:

Both views group appointments by resources.
Both views use the dateCellTemplate to change the appearance of date cells.
The Work Week view uses the startDayHour and endDayHour properties to set custom first and last hours on the time scale.

Day and Month views use default settings.

Backend API

@model IEnumerable<DevExtreme.NETCore.Demos.Models.Job> @(Html.DevExtreme().Scheduler() .Height(730) .DataSource(Model) .TimeZone("America/Los_Angeles") .TextExpr("Text") .StartDateExpr("StartDate") .EndDateExpr("EndDate") .RecurrenceRuleExpr("RecurrenceRule") .ShowAllDayPanel(false) .Views(views => { views.Add() .Type(SchedulerViewType.Day); views.Add() .Type(SchedulerViewType.Week) .Groups(new[] { "TypeId" }) .DateCellTemplate(@<text> @(await Html.PartialAsync("_DateCellTemplate")) </text>); views.Add() .Type(SchedulerViewType.WorkWeek) .StartDayHour(9) .EndDayHour(18) .Groups(new[] { "PriorityId" }) .DateCellTemplate(@<text> @(await Html.PartialAsync("_DateCellTemplate")) </text>); views.Add() .Type(SchedulerViewType.Month); }) .CurrentView(SchedulerViewType.WorkWeek) .CurrentDate(new DateTime(2021, 4, 27)) .StartDayHour(7) .EndDayHour(23) .Resources(res => { res.Add() .FieldExpr("PriorityId") .AllowMultiple(false) .Label("Priority") .DataSource(new[] { new { text = "Low Priority", id = 1, color = "#fcb65e" }, new { text = "High Priority", id = 2, color = "#e18e92" } }); res.Add() .FieldExpr("TypeId") .AllowMultiple(false) .Label("Type") .DataSource(new[] { new { text = "Home", id = 1, color = "#b6d623" }, new { text = "Work", id = 2, color = "#679ec5" } }); }) )

using 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 IndividualViewsCustomization() { return View(SampleData.JobAppointments); } } }

using System; namespace DevExtreme.NETCore.Demos.Models { public class Job : Appointment { public int PriorityId { get; set; } public int TypeId { get; set; } } }

using System; using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<Job> JobAppointments = new[] { new Job { Text = "Walking a dog", PriorityId = 1, TypeId = 1, StartDate = "2021-04-26T15:00:00.000Z", EndDate = "2021-04-26T15:30:00.000Z", RecurrenceRule = "FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR;UNTIL=20210502" }, new Job { Text = "Website Re-Design Plan", PriorityId = 2, TypeId = 2, StartDate = "2021-04-26T16:00:00.000Z", EndDate = "2021-04-26T18:30:00.000Z" }, new Job { Text = "Book Flights to San Fran for Sales Trip", PriorityId = 2, TypeId = 2, StartDate = "2021-04-26T19:00:00.000Z", EndDate = "2021-04-26T20:00:00.000Z" }, new Job { Text = "Install New Router in Dev Room", PriorityId = 1, TypeId = 2, StartDate = "2021-04-26T21:30:00.000Z", EndDate = "2021-04-26T22:30:00.000Z" }, new Job { Text = "Go Grocery Shopping", PriorityId = 1, TypeId = 1, StartDate = "2021-04-27T01:30:00.000Z", EndDate = "2021-04-27T02:30:00.000Z", RecurrenceRule = "FREQ=DAILY;BYDAY=MO,WE,FR;UNTIL=20210502" }, new Job { Text = "Approve Personal Computer Upgrade Plan", PriorityId = 2, TypeId = 2, StartDate = "2021-04-27T17:00:00.000Z", EndDate = "2021-04-27T18:00:00.000Z" }, new Job { Text = "Final Budget Review", PriorityId = 2, TypeId = 2, StartDate = "2021-04-27T19:00:00.000Z", EndDate = "2021-04-27T20:35:00.000Z" }, new Job { Text = "New Brochures", PriorityId = 2, TypeId = 2, StartDate = "2021-04-27T21:30:00.000Z", EndDate = "2021-04-27T22:45:00.000Z" }, new Job { Text = "Install New Database", PriorityId = 1, TypeId = 2, StartDate = "2021-04-28T16:45:00.000Z", EndDate = "2021-04-28T18:15:00.000Z" }, new Job { Text = "Approve New Online Marketing Strategy", PriorityId = 2, TypeId = 2, StartDate = "2021-04-28T19:00:00.000Z", EndDate = "2021-04-28T21:00:00.000Z" }, new Job { Text = "Upgrade Personal Computers", PriorityId = 1, TypeId = 2, StartDate = "2021-04-28T22:15:00.000Z", EndDate = "2021-04-28T23:30:00.000Z" }, new Job { Text = "Prepare 2021 Marketing Plan", PriorityId = 2, TypeId = 2, StartDate = "2021-04-29T18:00:00.000Z", EndDate = "2021-04-29T20:30:00.000Z" }, new Job { Text = "Brochure Design Review", PriorityId = 1, TypeId = 2, StartDate = "2021-04-29T21:00:00.000Z", EndDate = "2021-04-29T22:30:00.000Z" }, new Job { Text = "Create Icons for Website", PriorityId = 2, TypeId = 2, StartDate = "2021-04-30T17:00:00.000Z", EndDate = "2021-04-30T18:30:00.000Z" }, new Job { Text = "Upgrade Server Hardware", PriorityId = 1, TypeId = 2, StartDate = "2021-04-30T21:30:00.000Z", EndDate = "2021-04-30T23:00:00.000Z" }, new Job { Text = "Submit New Website Design", PriorityId = 2, TypeId = 2, StartDate = "2021-04-30T23:30:00.000Z", EndDate = "2021-05-01T01:00:00.000Z" }, new Job { Text = "Launch New Website", PriorityId = 2, TypeId = 2, StartDate = "2021-04-30T19:20:00.000Z", EndDate = "2021-04-30T21:00:00.000Z" }, new Job { Text = "Visiting a Doctor", PriorityId = 2, TypeId = 1, StartDate = "2021-05-01T17:00:00.000Z", EndDate = "2021-05-01T20:30:00.000Z" } }; } }

.dx-scheduler-work-space-week .dx-scheduler-header-panel-cell, .dx-scheduler-work-space-work-week .dx-scheduler-header-panel-cell { text-align: center; vertical-align: middle; } .dx-scheduler-work-space .dx-scheduler-header-panel-cell .name { font-size: 13px; line-height: 15px } .dx-scheduler-work-space .dx-scheduler-header-panel-cell .number { font-size: 15px; line-height: 15px }