[Solved] How to display non-consecutive work days in WorkWeek view?

[Andrei]

Hello,

I am currently working with the KendoReact Scheduler component and trying to configure a custom schedule for the WorkWeekView.

My goal is to display only specific, non-consecutive working days within the work week. For example, a user works only on Monday, Wednesday, and Saturday. I need the Scheduler to render only these 3 columns, hiding the days in between (Tuesday, Thursday, Friday, Sunday).

However, WorkWeekView only provides workWeekStart and workWeekEnd, which forces us to display a continuous range of days (e.g., Mon-Wed).

Is there an out-of-the-box way or a recommended workaround to display non-continuous days in KendoReact Scheduler without breaking the layout?

Currently, I am trying to hide the columns dynamically using custom CSS injected via a React useEffect hook based on data-attributes like data-slot-range and data-range-index. While it visually hides the columns, it still causes rendering issues with events and layout calculations. Are there any better workarounds available for this scenario?

Thank you!

[Martin Bechev]

Hello Andrei,

Thank you for the detailed description — this is a well-understood scenario, and the investigation confirms the limitation you are hitting.

There is no out-of-the-box way to display non-consecutive days (e.g., Monday, Wednesday, and Saturday) in a single Scheduler view. The WorkWeekView and DayView are both built on a continuous day-range model, so every day between the configured start and end is always rendered as a column.

Why does the CSS workaround cause issues? The Scheduler calculates event positions — width, left offset — based on the rendered DOM dimensions of the slot cells. When columns are hidden with CSS, the internal slot index mapping remains unchanged, so events that belong to those slot indexes end up placed at incorrect coordinates or become invisible. This is not a safe approach for production use.

As a workaround, you can configure a `DayView` that shows one specific workday at a time and build a small custom toolbar or button strip that lets the user jump between Monday, Wednesday, and Saturday directly. This avoids all layout issues because each view renders exactly one full day.

If the required days happen to be consecutive (e.g., Mon–Tue–Wed, or Thu–Fri–Sat), use `numberOfDays={3}` together with a custom `dateRange` function to snap the view window to the correct start day:

<Scheduler data={sampleData} defaultDate={displayDate}>
        <DayView numberOfDays={3} dateRange={customDateRange} step={7} title="Thu–Sat" />
    </Scheduler>

Displaying a set of arbitrary, non-consecutive days as parallel columns in a single view — with correct event positioning in each column — is not supported in the current API. However, its sound like a good enhancement. That is why we logged the following feature request, where we can track the customer demand:

https://feedback.telerik.com/kendo-react-ui/1717872-scheduler-support-non-consecutive-day-selection-in-workweekview-dayview 

I also added your vote to it.

Regards,
Martin Bechev
Progress Telerik