Scheduler - Hidden Week Days

The DevExtreme Scheduler allows you to exclude specific days of the week (using the hiddenWeekDays property).

Use checkboxes in the options panel to toggle day visibility. A validation message appears if you attempt to hide all seven days (at least one day must remain visible).

Backend API

@model IEnumerable<DevExtreme.MVC.Demos.Models.Appointment> @{ var visibleDays = new[] { new { Index = 0, Text = "Sunday", Visible = true }, new { Index = 1, Text = "Monday", Visible = true }, new { Index = 2, Text = "Tuesday", Visible = true }, new { Index = 3, Text = "Wednesday", Visible = false }, new { Index = 4, Text = "Thursday", Visible = true }, new { Index = 5, Text = "Friday", Visible = false }, new { Index = 6, Text = "Saturday", Visible = true } }; } <div class="hidden-days-demo"> <div class="scheduler-container"> @(Html.DevExtreme().Scheduler() .ID("scheduler") .DataSource(Model, "AppointmentId") .TimeZone("America/Los_Angeles") .Views(views => { views.Add().Type(SchedulerViewType.Week); views.Add().Type(SchedulerViewType.WorkWeek); views.Add().Type(SchedulerViewType.Month); views.Add().Type(SchedulerViewType.TimelineWeek); views.Add().Type(SchedulerViewType.Agenda); }) .CurrentView(SchedulerViewType.Week) .CurrentDate(new DateTime(2021, 4, 26)) .StartDayHour(9) .Height(730) .TextExpr("Text") .StartDateExpr("StartDate") .EndDateExpr("EndDate") .AllDayExpr("AllDay") .HiddenWeekDays(new[] { DayOfWeek.Wednesday, DayOfWeek.Friday }) ) </div> <div class="options"> <div class="caption">Visible Week Days</div> @foreach(var day in visibleDays) { <div class="option" data-day-index="@day.Index"> @(Html.DevExtreme().CheckBox() .Value(day.Visible) .Text(day.Text) .OnValueChanged("onDayToggle") ) </div> } <div class="validation-message"> The hiddenWeekDays option cannot hide all days of the week. At least one day must remain visible. </div> </div> </div> <script> const allDays = [0, 1, 2, 3, 4, 5, 6]; let visibleDays = [0, 1, 2, 4, 6]; function getScheduler() { return $("#scheduler").dxScheduler("instance"); } function applyHiddenWeekDays() { const hiddenWeekDays = allDays.filter((day) => visibleDays.indexOf(day) === -1); $(".hidden-days-demo").toggleClass("is-invalid", visibleDays.length === 0); getScheduler().option("hiddenWeekDays", hiddenWeekDays); } function onDayToggle(e) { const dayIndex = Number($(e.element).closest(".option").data("dayIndex")); const visibleDayIndex = visibleDays.indexOf(dayIndex); if(e.value && visibleDayIndex === -1) { visibleDays.push(dayIndex); visibleDays.sort((left, right) => left - right); } if(!e.value && visibleDayIndex > -1) { visibleDays.splice(visibleDayIndex, 1); } applyHiddenWeekDays(); } $(function() { applyHiddenWeekDays(); }); </script>

using DevExtreme.MVC.Demos.Models.SampleData; using DevExtreme.MVC.Demos.Models.Scheduler.ResolveTimeConflicts; using DevExtreme.MVC.Demos.ViewModels; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class SchedulerController : Controller { public ActionResult HiddenDays() { return View(SampleData.Appointments); } } }

.hidden-days-demo { display: flex; gap: 20px; } .hidden-days-demo .scheduler-container { flex: 1; min-width: 0; } .hidden-days-demo .options { display: flex; flex-direction: column; flex-shrink: 0; width: 220px; box-sizing: border-box; padding: 20px; background-color: rgb(191 191 191 / 15%); gap: 12px; } .hidden-days-demo .caption { font-weight: 500; font-size: 18px; } .hidden-days-demo .option { display: flex; flex-direction: column; } .hidden-days-demo .validation-message { display: none; margin-top: 8px; padding: 10px 12px; background: #fdf3f4; border-left: 3px solid #c50f1f; border-radius: 4px; color: #c50f1f; font-size: 13px; line-height: 1.4; } .hidden-days-demo.is-invalid .validation-message { display: block; } .hidden-days-demo.is-invalid .option .dx-checkbox-icon { border-color: #c50f1f; } .hidden-days-demo.is-invalid .dx-scheduler-work-space { opacity: 0.4; pointer-events: none; }

To hide specific days of the week, assign an array of day indexes to the hiddenWeekDays property. Index values follow the JavaScript date.getDay() convention:

0 - Sunday
1 - Monday
2 - Tuesday
3 - Wednesday
4 - Thursday
5 - Friday
6 - Saturday

The property works across multiple view types. To hide days of the week from a specific view, use the same property within the view configuration object.