Scheduling / Planning ▸ 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).

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.

Visible Week Days

The hiddenWeekDays option cannot hide all days of the week. At least one day must remain visible.

@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;
}