[scheduler] Add visibleResources / defaultVisibleResources / onVisibleResourcesChange props (#20615)

Copilot · flaviendelangle · rita-codes · web-flow · commit ee010bfe295f · 2025-12-17T10:25:58.000+01:00
Signed-off-by: Flavien DELANGLE &lt;flaviendelangle@gmail.com&gt;
Co-authored-by: copilot-swe-agent[bot] &lt;198982749+Copilot@users.noreply.github.com&gt;
Co-authored-by: flaviendelangle &lt;3309670+flaviendelangle@users.noreply.github.com&gt;
Co-authored-by: delangle &lt;flaviendelangle@gmail.com&gt;
Co-authored-by: Rita &lt;47579513+rita-codes@users.noreply.github.com&gt;
diff --git a/docs/data/scheduler/resource-properties/DefaultVisibleResources.js b/docs/data/scheduler/resource-properties/DefaultVisibleResources.js
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { EventCalendar } from '@mui/x-scheduler/event-calendar';
+import {
+  initialEvents,
+  resources,
+  defaultVisibleDate,
+} from '../datasets/personal-agenda';
+
+export default function DefaultVisibleResources() {
+  const [events, setEvents] = React.useState(initialEvents);
+
+  return (
+    <div style={{ height: '600px', width: '100%' }}>
+      <EventCalendar
+        events={events}
+        onEventsChange={setEvents}
+        defaultVisibleDate={defaultVisibleDate}
+        resources={resources}
+        defaultVisibleResources={{
+          holidays: false,
+          medical: false,
+        }}
+        defaultPreferences={{ isSidePanelOpen: false }}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/scheduler/resource-properties/DefaultVisibleResources.tsx b/docs/data/scheduler/resource-properties/DefaultVisibleResources.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { EventCalendar } from '@mui/x-scheduler/event-calendar';
+import {
+  initialEvents,
+  resources,
+  defaultVisibleDate,
+} from '../datasets/personal-agenda';
+
+export default function DefaultVisibleResources() {
+  const [events, setEvents] = React.useState(initialEvents);
+
+  return (
+    <div style={{ height: '600px', width: '100%' }}>
+      <EventCalendar
+        events={events}
+        onEventsChange={setEvents}
+        defaultVisibleDate={defaultVisibleDate}
+        resources={resources}
+        defaultVisibleResources={{
+          holidays: false,
+          medical: false,
+        }}
+        defaultPreferences={{ isSidePanelOpen: false }}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/scheduler/resource-properties/DefaultVisibleResources.tsx.preview b/docs/data/scheduler/resource-properties/DefaultVisibleResources.tsx.preview
@@ -0,0 +1,11 @@
+<EventCalendar
+  events={events}
+  onEventsChange={setEvents}
+  defaultVisibleDate={defaultVisibleDate}
+  resources={resources}
+  defaultVisibleResources={{
+    holidays: false,
+    medical: false,
+  }}
+  defaultPreferences={{ isSidePanelOpen: false }}
+/>
diff --git a/docs/data/scheduler/resource-properties/VisibleResources.js b/docs/data/scheduler/resource-properties/VisibleResources.js
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { EventCalendar } from '@mui/x-scheduler/event-calendar';
+import {
+  initialEvents,
+  resources,
+  defaultVisibleDate,
+} from '../datasets/personal-agenda';
+
+export default function VisibleResources() {
+  const [events, setEvents] = React.useState(initialEvents);
+  const [visibleResources, setVisibleResources] = React.useState(() => ({
+    holidays: false,
+    medical: false,
+  }));
+
+  const handleVisibleResourcesChange = React.useCallback((newVisibleResources) => {
+    setVisibleResources(newVisibleResources);
+  }, []);
+
+  return (
+    <div style={{ height: '600px', width: '100%' }}>
+      <EventCalendar
+        events={events}
+        onEventsChange={setEvents}
+        defaultVisibleDate={defaultVisibleDate}
+        resources={resources}
+        visibleResources={visibleResources}
+        onVisibleResourcesChange={handleVisibleResourcesChange}
+        defaultPreferences={{ isSidePanelOpen: false }}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/scheduler/resource-properties/VisibleResources.tsx b/docs/data/scheduler/resource-properties/VisibleResources.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { EventCalendar } from '@mui/x-scheduler/event-calendar';
+import {
+  initialEvents,
+  resources,
+  defaultVisibleDate,
+} from '../datasets/personal-agenda';
+
+export default function VisibleResources() {
+  const [events, setEvents] = React.useState(initialEvents);
+  const [visibleResources, setVisibleResources] = React.useState<
+    Record<string, boolean>
+  >(() => ({
+    holidays: false,
+    medical: false,
+  }));
+
+  const handleVisibleResourcesChange = React.useCallback(
+    (newVisibleResources: Record<string, boolean>) => {
+      setVisibleResources(newVisibleResources);
+    },
+    [],
+  );
+
+  return (
+    <div style={{ height: '600px', width: '100%' }}>
+      <EventCalendar
+        events={events}
+        onEventsChange={setEvents}
+        defaultVisibleDate={defaultVisibleDate}
+        resources={resources}
+        visibleResources={visibleResources}
+        onVisibleResourcesChange={handleVisibleResourcesChange}
+        defaultPreferences={{ isSidePanelOpen: false }}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/scheduler/resource-properties/VisibleResources.tsx.preview b/docs/data/scheduler/resource-properties/VisibleResources.tsx.preview
@@ -0,0 +1,9 @@
+<EventCalendar
+  events={events}
+  onEventsChange={setEvents}
+  defaultVisibleDate={defaultVisibleDate}
+  resources={resources}
+  visibleResources={visibleResources}
+  onVisibleResourcesChange={handleVisibleResourcesChange}
+  defaultPreferences={{ isSidePanelOpen: false }}
+/>
diff --git a/docs/data/scheduler/resource-properties/resource-properties.md b/docs/data/scheduler/resource-properties/resource-properties.md
@@ -37,3 +37,17 @@ function Calendar() {
 ```
 
 {{"demo": "TitleProperty.js", "bg": "inline", "defaultCodeOpen": false}}
+
+## Visible resources
+
+### Initialize the visible resources
+
+Use the `defaultVisibleResources` prop to set the initial visibility state of resources. A resource is visible if it is not in the object or if it has a `true` value.
+
+{{"demo": "DefaultVisibleResources.js", "bg": "inline", "defaultCodeOpen": false}}
+
+### Control the visible resources
+
+Use the `visibleResources` and `onVisibleResourcesChange` props to control the visibility state of resources.
+
+{{"demo": "VisibleResources.js", "bg": "inline", "defaultCodeOpen": false}}
diff --git a/packages/x-scheduler-headless/src/scheduler-selectors/schedulerOccurrenceSelectors.test.ts b/packages/x-scheduler-headless/src/scheduler-selectors/schedulerOccurrenceSelectors.test.ts
@@ -210,7 +210,7 @@ describe('schedulerOccurrenceSelectors', () => {
 
       const state = getTimelineStateFromParameters({ events: [event], resources: [R1] });
       // TODO: Use props.defaultVisibleResources when available
-      state.visibleResources = new Map([[R1.id, false]]);
+      state.visibleResources = { [R1.id]: false };
       const response = schedulerOccurrenceSelectors.groupedByResourceList(state, start, end);
 
       expect(response[0].occurrences).to.have.length(0);
diff --git a/packages/x-scheduler-headless/src/scheduler-selectors/schedulerResourceSelectors.test.ts b/packages/x-scheduler-headless/src/scheduler-selectors/schedulerResourceSelectors.test.ts
@@ -385,8 +385,10 @@ storeClasses.forEach((storeClass) => {
           { id: 'resource-2', title: 'Resource 2' },
           { id: 'resource-3', title: 'Resource 3' },
         ];
-        const state = new storeClass.Value({ events: [], resources }, adapter).state;
-        state.visibleResources = new Map([['resource-2', false]]);
+        const state = new storeClass.Value(
+          { events: [], resources, defaultVisibleResources: { 'resource-2': false } },
+          adapter,
+        ).state;
         const result = schedulerResourceSelectors.visibleIdList(state);
         expect(result).to.deep.equal(['resource-1', 'resource-3']);
       });
@@ -396,8 +398,10 @@ storeClasses.forEach((storeClass) => {
           { id: 'resource-1', title: 'Resource 1' },
           { id: 'resource-2', title: 'Resource 2' },
         ];
-        const state = new storeClass.Value({ events: [], resources }, adapter).state;
-        state.visibleResources = new Map([['resource-1', true]]);
+        const state = new storeClass.Value(
+          { events: [], resources, defaultVisibleResources: { 'resource-1': true } },
+          adapter,
+        ).state;
         const result = schedulerResourceSelectors.visibleIdList(state);
         expect(result).to.deep.equal(['resource-1', 'resource-2']);
       });
diff --git a/packages/x-scheduler-headless/src/scheduler-selectors/schedulerResourceSelectors.ts b/packages/x-scheduler-headless/src/scheduler-selectors/schedulerResourceSelectors.ts
@@ -84,10 +84,7 @@ export const schedulerResourceSelectors = {
     (state: State) => state.visibleResources,
     (resources, visibleResources) =>
       resources
-        .filter(
-          (resourceId) =>
-            !visibleResources.has(resourceId) || visibleResources.get(resourceId) === true,
-        )
+        .filter((resourceId) => visibleResources[resourceId] !== false)
         .map((resourceId) => resourceId),
   ),
   /**
diff --git a/packages/x-scheduler-headless/src/use-event-calendar/tests/core.EventCalendarStore.test.ts b/packages/x-scheduler-headless/src/use-event-calendar/tests/core.EventCalendarStore.test.ts
@@ -48,7 +48,7 @@ describe('Core - EventCalendarStore', () => {
         viewConfig: null,
         views: DEFAULT_VIEWS,
         visibleDate: adapter.startOfDay(adapter.now('default')),
-        visibleResources: new Map(),
+        visibleResources: {},
       };
 
       expect(store.state).to.deep.equal(expectedState);
diff --git a/packages/x-scheduler-headless/src/use-event-calendar/useExtractEventCalendarParameters.ts b/packages/x-scheduler-headless/src/use-event-calendar/useExtractEventCalendarParameters.ts
@@ -14,6 +14,7 @@ export function useExtractEventCalendarParameters<
     defaultPreferences,
     defaultView,
     defaultVisibleDate,
+    defaultVisibleResources,
     displayTimezone,
     eventColor,
     eventCreation,
@@ -22,14 +23,17 @@ export function useExtractEventCalendarParameters<
     onEventsChange,
     onViewChange,
     onVisibleDateChange,
+    onVisibleResourcesChange,
     preferences,
     preferencesMenuConfig,
     readOnly,
+    resourceModelStructure,
     resources,
     showCurrentTimeIndicator,
     view,
     views,
     visibleDate,
+    visibleResources,
     ...forwardedProps
   } = props;
 
@@ -42,6 +46,7 @@ export function useExtractEventCalendarParameters<
       defaultPreferences,
       defaultView,
       defaultVisibleDate,
+      defaultVisibleResources,
       displayTimezone,
       eventColor,
       eventCreation,
@@ -50,14 +55,17 @@ export function useExtractEventCalendarParameters<
       onEventsChange,
       onViewChange,
       onVisibleDateChange,
+      onVisibleResourcesChange,
       preferences,
       preferencesMenuConfig,
       readOnly,
+      resourceModelStructure,
       resources,
       showCurrentTimeIndicator,
       view,
       views,
       visibleDate,
+      visibleResources,
     }),
     [
       areEventsDraggable,
@@ -67,6 +75,7 @@ export function useExtractEventCalendarParameters<
       defaultPreferences,
       defaultView,
       defaultVisibleDate,
+      defaultVisibleResources,
       displayTimezone,
       eventColor,
       eventCreation,
@@ -75,14 +84,17 @@ export function useExtractEventCalendarParameters<
       onEventsChange,
       onViewChange,
       onVisibleDateChange,
+      onVisibleResourcesChange,
       preferences,
       preferencesMenuConfig,
       readOnly,
+      resourceModelStructure,
       resources,
       showCurrentTimeIndicator,
       view,
       views,
       visibleDate,
+      visibleResources,
     ],
   );
 
diff --git a/packages/x-scheduler-headless/src/use-event-occurrences-grouped-by-day/useEventOccurrencesGroupedByDay.test.ts b/packages/x-scheduler-headless/src/use-event-occurrences-grouped-by-day/useEventOccurrencesGroupedByDay.test.ts
@@ -13,10 +13,10 @@ describe('innerGetEventOccurrencesGroupedByDay', () => {
     processDate(adapter.date(day2Str, 'default'), adapter),
   ];
 
-  const visible = new Map<string, boolean>([
-    ['Resource A', true],
-    ['Resource B', true],
-  ]);
+  const visible: Record<string, boolean> = {
+    'Resource A': true,
+    'Resource B': true,
+  };
 
   const noParents = new Map<string, string | null>();
 
@@ -61,8 +61,7 @@ describe('innerGetEventOccurrencesGroupedByDay', () => {
   });
 
   it('should exclude events whose resource is not visible', () => {
-    const visibilityWithHidden = new Map(visible);
-    visibilityWithHidden.set('Resource X', false);
+    const visibilityWithHidden: Record<string, boolean> = { ...visible, 'Resource X': false };
 
     const visibleEvent = EventBuilder.new(adapter)
       .resource('Resource A')
diff --git a/packages/x-scheduler-headless/src/use-event-occurrences-with-day-grid-position/useEventOccurrencesWithDayGridPosition.test.ts b/packages/x-scheduler-headless/src/use-event-occurrences-with-day-grid-position/useEventOccurrencesWithDayGridPosition.test.ts
@@ -18,7 +18,7 @@ describe('useDayListEventOccurrencesWithPosition', () => {
         adapter,
         days,
         events,
-        visibleResources: new Map(),
+        visibleResources: {},
         resourceParentIds: new Map(),
       });
       return useEventOccurrencesWithDayGridPosition({ days, occurrencesMap });
diff --git a/packages/x-scheduler-headless/src/use-event-occurrences-with-timeline-position/useEventOccurrencesWithTimelinePosition.test.ts b/packages/x-scheduler-headless/src/use-event-occurrences-with-timeline-position/useEventOccurrencesWithTimelinePosition.test.ts
@@ -15,7 +15,7 @@ describe('useDayListEventOccurrencesWithPosition', () => {
         start: collectionStart,
         end: collectionEnd,
         events,
-        visibleResources: new Map(),
+        visibleResources: {},
         resourceParentIds: new Map(),
       });
       return useEventOccurrencesWithTimelinePosition({ occurrences, maxSpan });
diff --git a/packages/x-scheduler-headless/src/use-timeline/tests/core.TimelineStore.test.ts b/packages/x-scheduler-headless/src/use-timeline/tests/core.TimelineStore.test.ts
@@ -40,7 +40,7 @@ describe('Core - TimelineStore', () => {
         view: 'time',
         views: ['time', 'days', 'weeks', 'months', 'years'],
         visibleDate: adapter.startOfDay(adapter.now('default')),
-        visibleResources: new Map(),
+        visibleResources: {},
       };
 
       expect(store.state).to.deep.equal(expectedState);
diff --git a/packages/x-scheduler-headless/src/use-timeline/useExtractTimelineParameters.ts b/packages/x-scheduler-headless/src/use-timeline/useExtractTimelineParameters.ts
diff --git a/packages/x-scheduler-headless/src/utils/SchedulerStore/SchedulerStore.ts b/packages/x-scheduler-headless/src/utils/SchedulerStore/SchedulerStore.ts
diff --git a/packages/x-scheduler-headless/src/utils/SchedulerStore/SchedulerStore.types.ts b/packages/x-scheduler-headless/src/utils/SchedulerStore/SchedulerStore.types.ts
diff --git a/packages/x-scheduler-headless/src/utils/SchedulerStore/tests/resource.SchedulerStore.test.ts b/packages/x-scheduler-headless/src/utils/SchedulerStore/tests/resource.SchedulerStore.test.ts
diff --git a/packages/x-scheduler-headless/src/utils/event-utils.ts b/packages/x-scheduler-headless/src/utils/event-utils.ts
diff --git a/packages/x-scheduler/src/internals/components/resource-legend/ResourceLegend.tsx b/packages/x-scheduler/src/internals/components/resource-legend/ResourceLegend.tsx
