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:
- 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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
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
}