Scheduler — Add hiddenDays option to hide arbitrary days of the week (#33188)

Signed-off-by: Sergei Burkatskii <sergei.burkatskii@devexpress.com>
Co-authored-by: Sergio Bur <sjbur.dev@gmail.com>
Co-authored-by: Sergei Burkatskii <sergei.burkatskii@devexpress.com>
Co-authored-by: Arman Boyakhchyan <arman.boyakhchyan@devexpress.com>

Author: 3 people

apps/react-storybook/stories/scheduler/SchedulerHiddenWeekDays.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import dxScheduler from "devextreme/ui/scheduler";
+import { wrapDxWithReact } from "../utils";
+import { data, resources } from "./data";
+
+const Scheduler = wrapDxWithReact(dxScheduler);
+
+const viewNames = ['day', 'week', 'workWeek', 'month', 'agenda', 'timelineDay', 'timelineWeek', 'timelineWorkWeek', 'timelineMonth'];
+
+const meta: Meta<typeof Scheduler> = {
+  title: 'Components/Scheduler/HiddenWeekDays',
+  component: Scheduler,
+  parameters: { layout: 'padded' },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Scheduler>;
+
+export const Overview: Story = {
+  args: {
+    height: 600,
+    views: viewNames,
+    currentView: 'week',
+    currentDate: new Date(2021, 3, 26),
+    firstDayOfWeek: 0,
+    startDayHour: 9,
+    endDayHour: 22,
+    dataSource: data,
+    resources,
+    hiddenWeekDays: [],
+  },
+  argTypes: {
+    height: { control: 'number' },
+    views: { control: 'object' },
+    hiddenWeekDays: { control: 'object' },
+    currentView: { control: 'select', options: viewNames },
+  },
+};

packages/devextreme-angular/src/ui/scheduler/index.ts

@@ -24,7 +24,7 @@ import {
 
 import type dxSortable from 'devextreme/ui/sortable';
 import type dxDraggable from 'devextreme/ui/draggable';
-import type { default as dxScheduler, AllDayPanelMode, ViewType, dxSchedulerAppointment, AppointmentFormProperties, CellAppointmentsLimit, AppointmentAddedEvent, AppointmentAddingEvent, AppointmentClickEvent, AppointmentContextMenuEvent, AppointmentDblClickEvent, AppointmentDeletedEvent, AppointmentDeletingEvent, AppointmentFormOpeningEvent, AppointmentRenderedEvent, AppointmentTooltipShowingEvent, AppointmentUpdatedEvent, AppointmentUpdatingEvent, CellClickEvent, CellContextMenuEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent, RecurrenceEditMode, dxSchedulerScrolling, SnapToCellsMode, dxSchedulerToolbar } from 'devextreme/ui/scheduler';
+import type { default as dxScheduler, AllDayPanelMode, ViewType, dxSchedulerAppointment, AppointmentFormProperties, DayOfWeek, CellAppointmentsLimit, AppointmentAddedEvent, AppointmentAddingEvent, AppointmentClickEvent, AppointmentContextMenuEvent, AppointmentDblClickEvent, AppointmentDeletedEvent, AppointmentDeletingEvent, AppointmentFormOpeningEvent, AppointmentRenderedEvent, AppointmentTooltipShowingEvent, AppointmentUpdatedEvent, AppointmentUpdatingEvent, CellClickEvent, CellContextMenuEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent, RecurrenceEditMode, dxSchedulerScrolling, SnapToCellsMode, dxSchedulerToolbar } from 'devextreme/ui/scheduler';
 import type { event } from 'devextreme/events/events.types';
 import type { default as DataSource, DataSourceOptions } from 'devextreme/data/data_source';
 import type { Store } from 'devextreme/data/store';
@@ -514,6 +514,16 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
     }
 
 
+    
+    @Input()
+    get hiddenWeekDays(): Array<DayOfWeek> {
+        return this._getOption('hiddenWeekDays');
+    }
+    set hiddenWeekDays(value: Array<DayOfWeek>) {
+        this._setOption('hiddenWeekDays', value);
+    }
+
+
     /**
      * [descr:WidgetOptions.hint]
     
@@ -893,10 +903,10 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
     
      */
     @Input()
-    get views(): Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, endDayHour?: number, firstDayOfWeek?: FirstDayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, snapToCellsMode?: SnapToCellsMode, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[] {
+    get views(): Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, endDayHour?: number, firstDayOfWeek?: FirstDayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, hiddenWeekDays?: Array<DayOfWeek>, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, snapToCellsMode?: SnapToCellsMode, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[] {
         return this._getOption('views');
     }
-    set views(value: Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, endDayHour?: number, firstDayOfWeek?: FirstDayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, snapToCellsMode?: SnapToCellsMode, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[]) {
+    set views(value: Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, endDayHour?: number, firstDayOfWeek?: FirstDayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, hiddenWeekDays?: Array<DayOfWeek>, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, snapToCellsMode?: SnapToCellsMode, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[]) {
         this._setOption('views', value);
     }
 
@@ -1273,6 +1283,13 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
      */
     @Output() heightChange: EventEmitter<number | string | undefined>;
 
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() hiddenWeekDaysChange: EventEmitter<Array<DayOfWeek>>;
+
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -1481,7 +1498,7 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() viewsChange: EventEmitter<Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, endDayHour?: number, firstDayOfWeek?: FirstDayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, snapToCellsMode?: SnapToCellsMode, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[]>;
+    @Output() viewsChange: EventEmitter<Array<Record<string, any> | string> | { agendaDuration?: number, allDayPanelMode?: AllDayPanelMode, appointmentCollectorTemplate?: any, appointmentTemplate?: any, appointmentTooltipTemplate?: any, cellDuration?: number, dataCellTemplate?: any, dateCellTemplate?: any, endDayHour?: number, firstDayOfWeek?: FirstDayOfWeek | undefined, groupByDate?: boolean, groupOrientation?: Orientation, groups?: Array<string>, hiddenWeekDays?: Array<DayOfWeek>, intervalCount?: number, maxAppointmentsPerCell?: CellAppointmentsLimit | number, name?: string | undefined, offset?: number, resourceCellTemplate?: any, scrolling?: dxSchedulerScrolling, snapToCellsMode?: SnapToCellsMode, startDate?: Date | number | string | undefined, startDayHour?: number, timeCellTemplate?: any, type?: undefined | ViewType }[]>;
 
     /**
     
@@ -1557,6 +1574,7 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
             { emit: 'groupByDateChange' },
             { emit: 'groupsChange' },
             { emit: 'heightChange' },
+            { emit: 'hiddenWeekDaysChange' },
             { emit: 'hintChange' },
             { emit: 'indicatorUpdateIntervalChange' },
             { emit: 'maxChange' },
@@ -1609,6 +1627,7 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
         super.ngOnChanges(changes);
         this.setupChanges('dataSource', changes);
         this.setupChanges('groups', changes);
+        this.setupChanges('hiddenWeekDays', changes);
         this.setupChanges('resources', changes);
         this.setupChanges('selectedCellData', changes);
         this.setupChanges('views', changes);
@@ -1623,6 +1642,7 @@ export class DxSchedulerComponent extends DxComponent implements OnDestroy, OnCh
     ngDoCheck() {
         this._idh.doCheck('dataSource');
         this._idh.doCheck('groups');
+        this._idh.doCheck('hiddenWeekDays');
         this._idh.doCheck('resources');
         this._idh.doCheck('selectedCellData');
         this._idh.doCheck('views');

packages/devextreme-angular/src/ui/scheduler/nested/view-dxi.ts

@@ -12,7 +12,7 @@ import {
 
 
 
-import type { AllDayPanelMode, CellAppointmentsLimit, dxSchedulerScrolling, SnapToCellsMode, ViewType } from 'devextreme/ui/scheduler';
+import type { AllDayPanelMode, DayOfWeek, CellAppointmentsLimit, dxSchedulerScrolling, SnapToCellsMode, ViewType } from 'devextreme/ui/scheduler';
 import type { FirstDayOfWeek, Orientation } from 'devextreme/common';
 
 import {
@@ -141,6 +141,14 @@ export class DxiSchedulerViewComponent extends CollectionNestedOption {
         this._setOption('groups', value);
     }
 
+    @Input()
+    get hiddenWeekDays(): Array<DayOfWeek> {
+        return this._getOption('hiddenWeekDays');
+    }
+    set hiddenWeekDays(value: Array<DayOfWeek>) {
+        this._setOption('hiddenWeekDays', value);
+    }
+
     @Input()
     get intervalCount(): number {
         return this._getOption('intervalCount');

packages/devextreme-metadata/make-angular-metadata.ts

@@ -65,6 +65,7 @@ Ng.makeMetadata({
     removeMembers(/\/scheduler:dxSchedulerOptions\.editing\.popup/),
     removeMembers(/\/scheduler:dxSchedulerOptions\.resources\.icon/),
     removeMembers(/\/scheduler:.*\.snapToCellsMode/),
+    removeMembers(/\/scheduler:.*\.hiddenWeekDays/),
     removeMembers(/\/stepper:/),
     removeMembers(/\/speech_to_text:/),
     removeMembers(/\/tree_list:dxTreeListColumnButton.onClick/),

packages/devextreme-react/src/scheduler.ts

@@ -8,7 +8,7 @@ import dxScheduler, {
 import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
-import type { ViewType, AppointmentAddedEvent, AppointmentAddingEvent, AppointmentClickEvent, AppointmentContextMenuEvent, AppointmentDblClickEvent, AppointmentDeletedEvent, AppointmentDeletingEvent, AppointmentFormOpeningEvent, AppointmentRenderedEvent, AppointmentTooltipShowingEvent, AppointmentUpdatedEvent, AppointmentUpdatingEvent, CellClickEvent, CellContextMenuEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, AppointmentFormProperties, AppointmentFormIconsShowMode, SchedulerPredefinedToolbarItem, DateNavigatorItemProperties, SchedulerPredefinedDateNavigatorItem, dxSchedulerToolbarItem, AllDayPanelMode, AppointmentCollectorTemplateData, AppointmentTemplateData, AppointmentTooltipTemplateData, CellAppointmentsLimit, dxSchedulerScrolling, SnapToCellsMode } from "devextreme/ui/scheduler";
+import type { ViewType, AppointmentAddedEvent, AppointmentAddingEvent, AppointmentClickEvent, AppointmentContextMenuEvent, AppointmentDblClickEvent, AppointmentDeletedEvent, AppointmentDeletingEvent, AppointmentFormOpeningEvent, AppointmentRenderedEvent, AppointmentTooltipShowingEvent, AppointmentUpdatedEvent, AppointmentUpdatingEvent, CellClickEvent, CellContextMenuEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, AppointmentFormProperties, AppointmentFormIconsShowMode, SchedulerPredefinedToolbarItem, DateNavigatorItemProperties, SchedulerPredefinedDateNavigatorItem, dxSchedulerToolbarItem, AllDayPanelMode, AppointmentCollectorTemplateData, AppointmentTemplateData, AppointmentTooltipTemplateData, DayOfWeek, CellAppointmentsLimit, dxSchedulerScrolling, SnapToCellsMode } from "devextreme/ui/scheduler";
 import type { ContentReadyEvent as ButtonContentReadyEvent, DisposingEvent as ButtonDisposingEvent, InitializedEvent as ButtonInitializedEvent, dxButtonOptions, ClickEvent, OptionChangedEvent } from "devextreme/ui/button";
 import type { ContentReadyEvent as FormContentReadyEvent, DisposingEvent as FormDisposingEvent, InitializedEvent as FormInitializedEvent, FormItemType, FormPredefinedButtonItem, OptionChangedEvent as FormOptionChangedEvent, dxFormSimpleItem, dxFormGroupItem, dxFormTabbedItem, dxFormEmptyItem, dxFormButtonItem, LabelLocation, FormLabelMode, EditorEnterKeyEvent, FieldDataChangedEvent, SmartPastedEvent, SmartPastingEvent, FormItemComponent } from "devextreme/ui/form";
 import type { ContentReadyEvent as ButtonGroupContentReadyEvent, DisposingEvent as ButtonGroupDisposingEvent, InitializedEvent as ButtonGroupInitializedEvent, OptionChangedEvent as ButtonGroupOptionChangedEvent, dxButtonGroupItem, ItemClickEvent, SelectionChangedEvent } from "devextreme/ui/button_group";
@@ -1454,6 +1454,7 @@ type IViewProps = React.PropsWithChildren<{
   groupByDate?: boolean;
   groupOrientation?: Orientation;
   groups?: Array<string>;
+  hiddenWeekDays?: Array<DayOfWeek>;
   intervalCount?: number;
   maxAppointmentsPerCell?: CellAppointmentsLimit | number;
   name?: string | undefined;

packages/devextreme-vue/src/scheduler.ts

@@ -10,6 +10,7 @@ import {
  AllDayPanelMode,
  ViewType,
  dxSchedulerAppointment,
+ DayOfWeek,
  CellAppointmentsLimit,
  AppointmentAddedEvent,
  AppointmentAddingEvent,
@@ -161,6 +162,7 @@ type AccessibleOptions = Pick<Properties,
   "groupByDate" |
   "groups" |
   "height" |
+  "hiddenWeekDays" |
   "hint" |
   "indicatorUpdateInterval" |
   "max" |
@@ -248,6 +250,7 @@ const componentConfig = {
     groupByDate: Boolean,
     groups: Array as PropType<Array<string>>,
     height: [Number, String],
+    hiddenWeekDays: Array as PropType<Array<DayOfWeek>>,
     hint: String,
     indicatorUpdateInterval: Number,
     max: [Date, Number, String],
@@ -331,6 +334,7 @@ const componentConfig = {
     "update:groupByDate": null,
     "update:groups": null,
     "update:height": null,
+    "update:hiddenWeekDays": null,
     "update:hint": null,
     "update:indicatorUpdateInterval": null,
     "update:max": null,
@@ -1774,6 +1778,7 @@ const DxViewConfig = {
     "update:groupByDate": null,
     "update:groupOrientation": null,
     "update:groups": null,
+    "update:hiddenWeekDays": null,
     "update:intervalCount": null,
     "update:maxAppointmentsPerCell": null,
     "update:name": null,
@@ -1800,6 +1805,7 @@ const DxViewConfig = {
     groupByDate: Boolean,
     groupOrientation: String as PropType<Orientation>,
     groups: Array as PropType<Array<string>>,
+    hiddenWeekDays: Array as PropType<Array<DayOfWeek>>,
     intervalCount: Number,
     maxAppointmentsPerCell: [String, Number] as PropType<CellAppointmentsLimit | number>,
     name: String,

packages/devextreme/js/__internal/scheduler/__tests__/__snapshots__/santiago_timezone.test.ts.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`scheduler should render correct workspace in Santiago DST for view: Day DST 1`] = `
 [
@@ -307,7 +307,7 @@ exports[`scheduler should render correct workspace in Santiago DST for view: Tim
   "Wed 4",
   "Thu 5",
   "Fri 6",
-  "Sat 7",
+  "Mon 9",
   "12:00 AM",
   "6:00 AM",
   "12:00 PM",

packages/devextreme/js/__internal/scheduler/__tests__/workspace.base.test.ts

@@ -44,6 +44,7 @@ type WorkspaceConstructor<T> = new (container: Element, options?: any) => T;
 const createWorkspace = <T extends SchedulerWorkSpace>(
   WorkSpace: WorkspaceConstructor<T>,
   currentView: string,
+  options?: any,
 ): { workspace: T; container: Element } => {
   const container = document.createElement('div');
   const workspace = new WorkSpace(container, {
@@ -52,6 +53,7 @@ const createWorkspace = <T extends SchedulerWorkSpace>(
     currentDate: new Date(2017, 4, 25),
     firstDayOfWeek: 0,
     getResourceManager: () => getResourceManagerMock([]),
+    ...options,
   });
   (workspace as any)._isVisible = () => true;
   expect(container.classList).toContain('dx-scheduler-work-space');
@@ -193,3 +195,61 @@ describe('scheduler workspace scrollTo', () => {
     expect(scrollableContainer.scrollLeft).toBeCloseTo(-11125);
   });
 });
+
+describe('scheduler workspace skipped days support', () => {
+  beforeEach(() => {
+    setupSchedulerTestEnvironment();
+  });
+
+  it('should count configured skipped days in week workspace interval math', () => {
+    const { workspace } = createWorkspace(SchedulerWorkSpaceWeek, 'week', {
+      skippedDays: [1, 3],
+    });
+
+    expect((workspace as any).getSkippedDaysCount(new Date(2026, 3, 5), 7)).toBe(2);
+  });
+
+  it('should use full week layout for work week when skippedDays override is empty', () => {
+    const { workspace } = createWorkspace(SchedulerWorkSpaceWorkWeek, 'workWeek', {
+      currentDate: new Date(2026, 3, 1), // Wednesday
+      firstDayOfWeek: 0, // Sunday
+      skippedDays: [],
+    });
+
+    expect(workspace.getStartViewDate()).toEqual(new Date(2026, 2, 29));
+    expect((workspace as any)._getCellCount()).toBe(7);
+  });
+
+  it('should use custom skippedDays in work week runtime layout', () => {
+    const { workspace } = createWorkspace(SchedulerWorkSpaceWorkWeek, 'workWeek', {
+      currentDate: new Date(2026, 3, 1), // Wednesday
+      firstDayOfWeek: 0, // Sunday
+      skippedDays: [3], // Wednesday
+    });
+
+    expect(workspace.getStartViewDate()).toEqual(new Date(2026, 2, 29));
+    expect((workspace as any)._getCellCount()).toBe(6);
+  });
+
+  it('should skip configured hidden days when incrementing timeline header dates', () => {
+    const { workspace } = createWorkspace(SchedulerTimelineWeek, 'timelineWeek', {
+      skippedDays: [3],
+    });
+    const date = new Date(2026, 3, 7); // Tuesday
+
+    (workspace as any).incrementDate(date);
+
+    expect(date).toEqual(new Date(2026, 3, 9)); // Thursday
+  });
+
+  it('should skip hidden days when incrementing timeline day dates', () => {
+    const { workspace } = createWorkspace(SchedulerTimelineDay, 'timelineDay', {
+      skippedDays: [0, 6],
+    });
+    const date = new Date(2026, 3, 10); // Friday
+
+    (workspace as any).incrementDate(date);
+
+    expect(date).toEqual(new Date(2026, 3, 13)); // Monday
+  });
+});

packages/devextreme/js/__internal/scheduler/header/m_header.ts

@@ -57,7 +57,7 @@ export class SchedulerHeader extends Widget<HeaderOptions> {
   }
 
   public getIntervalOptions(date: Date): IntervalOptions {
-    const { currentView, firstDayOfWeek } = this.option();
+    const { currentView, firstDayOfWeek, skippedDays } = this.option();
     const step = getStep(currentView.type);
 
     return {
@@ -66,6 +66,7 @@ export class SchedulerHeader extends Widget<HeaderOptions> {
       firstDayOfWeek,
       intervalCount: currentView.intervalCount,
       agendaDuration: currentView.agendaDuration,
+      skippedDays,
     };
   }