Your search did not match any results.

Customize Individual Views

Documentation

In this demo, the «Week» and «Work Week» views of the Scheduler widget are configured individually. The appointments are grouped by type (on the «Week» view) and by priority (on the «Work Week» view). In addition, the time window on the «Work Week» view is narrowed down to working hours.

@model IEnumerable<DevExtreme.NETCore.Demos.Models.Job> @(Html.DevExtreme().Scheduler() .Height(600) .DataSource(Model) .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, 5, 25)) .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.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 CustomizeIndividualViews() { 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-05-24T05:00:00.000Z", EndDate = "2021-05-24T05:30:00.000Z", RecurrenceRule = "FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR;UNTIL=20210530" }, new Job { Text = "Website Re-Design Plan", PriorityId = 2, TypeId = 2, StartDate = "2021-05-24T06:00:00.000Z", EndDate = "2021-05-24T08:30:00.000Z" }, new Job { Text = "Book Flights to San Fran for Sales Trip", PriorityId = 2, TypeId = 2, StartDate = "2021-05-24T09:00:00.000Z", EndDate = "2021-05-24T10:00:00.000Z" }, new Job { Text = "Install New Router in Dev Room", PriorityId = 1, TypeId = 2, StartDate = "2021-05-24T11:30:00.000Z", EndDate = "2021-05-24T12:30:00.000Z" }, new Job { Text = "Go Grocery Shopping", PriorityId = 1, TypeId = 1, StartDate = "2021-05-24T15:30:00.000Z", EndDate = "2021-05-24T16:30:00.000Z", RecurrenceRule = "FREQ=DAILY;BYDAY=MO,WE,FR;UNTIL=20210530" }, new Job { Text = "Approve Personal Computer Upgrade Plan", PriorityId = 2, TypeId = 2, StartDate = "2021-05-25T07:00:00.000Z", EndDate = "2021-05-25T08:00:00.000Z" }, new Job { Text = "Final Budget Review", PriorityId = 2, TypeId = 2, StartDate = "2021-05-25T09:00:00.000Z", EndDate = "2021-05-25T10:35:00.000Z" }, new Job { Text = "New Brochures", PriorityId = 2, TypeId = 2, StartDate = "2021-05-25T11:30:00.000Z", EndDate = "2021-05-25T12:45:00.000Z" }, new Job { Text = "Install New Database", PriorityId = 1, TypeId = 2, StartDate = "2021-05-26T06:45:00.000Z", EndDate = "2021-05-26T08:15:00.000Z" }, new Job { Text = "Approve New Online Marketing Strategy", PriorityId = 2, TypeId = 2, StartDate = "2021-05-26T09:00:00.000Z", EndDate = "2021-05-26T11:00:00.000Z" }, new Job { Text = "Upgrade Personal Computers", PriorityId = 1, TypeId = 2, StartDate = "2021-05-26T12:15:00.000Z", EndDate = "2021-05-26T13:30:00.000Z" }, new Job { Text = "Prepare 2021 Marketing Plan", PriorityId = 2, TypeId = 2, StartDate = "2021-05-27T08:00:00.000Z", EndDate = "2021-05-27T10:30:00.000Z" }, new Job { Text = "Brochure Design Review", PriorityId = 1, TypeId = 2, StartDate = "2021-05-27T11:00:00.000Z", EndDate = "2021-05-27T12:30:00.000Z" }, new Job { Text = "Create Icons for Website", PriorityId = 2, TypeId = 2, StartDate = "2021-05-28T07:00:00.000Z", EndDate = "2021-05-28T08:30:00.000Z" }, new Job { Text = "Upgrade Server Hardware", PriorityId = 1, TypeId = 2, StartDate = "2021-05-28T11:30:00.000Z", EndDate = "2021-05-28T13:00:00.000Z" }, new Job { Text = "Submit New Website Design", PriorityId = 2, TypeId = 2, StartDate = "2021-05-28T13:30:00.000Z", EndDate = "2021-05-28T15:00:00.000Z" }, new Job { Text = "Launch New Website", PriorityId = 2, TypeId = 2, StartDate = "2021-05-28T09:20:00.000Z", EndDate = "2021-05-28T11:00:00.000Z" }, new Job { Text = "Visiting a Doctor", PriorityId = 2, TypeId = 1, StartDate = "2021-05-29T07:00:00.000Z", EndDate = "2021-05-29T10: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 }