Your search did not match any results.

Customize Individual Views

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:

Day and Month views use default settings.

Backend API
@model IEnumerable<DevExtreme.MVC.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> @(Html.Partial("_DateCellTemplate")) </text>); views.Add() .Type(SchedulerViewType.WorkWeek) .StartDayHour(9) .EndDayHour(18) .Groups(new[] { "PriorityId" }) .DateCellTemplate(@<text> @(Html.Partial("_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" } }); }) )
<div class="name"> <%- ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][date.getDay()] %> </div> <div class="number"> <%- date.getDate() %> </div>
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 CustomizeIndividualViews() { return View(SampleData.Jobs); } } }
using System; namespace DevExtreme.MVC.Demos.Models { public class Job : Appointment { public int PriorityId { get; set; } public int TypeId { get; set; } } }
using System; using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<Job> Jobs = 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 }