---
title: "React Scheduler Dynamic Resource Filtering Example | Mobiscroll"
component: "Scheduler"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/scheduler/dynamic-add-remove-resources-filter"
---
# Dynamic Resource Filtering - React Scheduler demo
Show or hide resources in a React Scheduler at runtime using a checklist — filter people, teams, or rooms without changing event data. For React and Next.JS.
- [Live demo](https://demo.mobiscroll.com/react/scheduler/dynamic-add-remove-resources-filter)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/scheduler/dynamic-add-remove-resources-filter)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/eventcalendar/scheduler/dynamic-add-remove-resources-filter)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/dynamic-add-remove-resources-filter.md), [jQuery](https://demo.mobiscroll.com/jquery/scheduler/dynamic-add-remove-resources-filter.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/dynamic-add-remove-resources-filter.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/dynamic-add-remove-resources-filter.md)
## Description
Resources can be dynamically turned on and off. This will show or hide the resource and can be done runtime the same way as for any other calendar option.
## What this demo shows
- A desktop weekly scheduler from Monday to Friday, with a fixed resource and week strip, and a vertically scrollable time grid running from 8 AM to 5 PM.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day.
- **Resource list** A right-side panel titled `Show available tasks` lists `Ryan`, `Kate`, and `John`, each with a selected checkbox by default.
- **Resource filtering** Clearing one or more resource checkboxes hides those resources and their events from the scheduler.
- **Resource grouping** The selected week is repeated under each resource, so every resource has its own week view in the scheduler grid.
- **Time grid** The scheduler shows 9-hours range from 8 AM to 5 PM and can be scrolled vertically.
- **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **Multi-resource events** Events assigned to more than one resource appear in each involved resource column for the same day.
- **Synchronized multi-resource updates** Dragging or resizing a multi-resource event updates the corresponding event instance for the other assigned resources.
- **Repeated event examples** The demo includes multi-resource events such as Impact Training for Kate and John on Monday, General orientation for Ryan, Kate, and John on Wednesday, and Product team mtg. for Kate and John on Thusday.
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Current time** A blue current-time line appears across the time grid.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.
## Best for
- **Resource filtering** Showing only selected people, teams, rooms, equipment, or other resources in a scheduler.
- **Task and workload planning** Reviewing each visible resource's assigned events without changing the underlying event data.
- **Multi-resource scheduling** Managing events that belong to more than one resource and need to stay synchronized when moved or resized.
- **Runtime configuration** Updating the visible resources at runtime the same way other calendar options can be updated.
## API used in this demo
- [`theme`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-themeVariant) - option
- [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-resources) - option
- [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option
- [`clickToCreate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToResize) - option
## Code
### JSX
```jsx
import { Checkbox, Eventcalendar, getJson, Page, setOptions } from '@mobiscroll/react';
import { useCallback, useEffect, useMemo, useState } from 'react';
setOptions({
theme: 'ios',
themeVariant: 'light'
});
const App = () => {
const [myEvents, setEvents] = useState([]);
const [myResources, setResources] = useState(resources);
const [participants, setParticipants] = useState({ 1: true, 2: true, 3: true });
const resources = useMemo(
() => [
{
id: 1,
name: 'Ryan',
color: '#f7c4b4',
},
{
id: 2,
name: 'Kate',
color: '#c6f1c9',
},
{
id: 3,
name: 'John',
color: '#e8d0ef',
},
],
[],
);
const myView = useMemo(
() => ({
scheduler: {
type: 'week',
allDay: false,
startDay: 1,
endDay: 5,
startTime: '08:00',
endTime: '17:00',
},
}),
[],
);
const filter = useCallback(
(ev) => {
participants[+ev.target.value] = ev.target.checked;
setParticipants({ ...participants });
setResources(resources.filter((r) => participants[r.id]));
},
[participants, resources],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/resource-events-shared/',
(events) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
);
};
export default App;
```
### TSX
```tsx
import {
Checkbox,
Eventcalendar,
getJson,
MbscCalendarEvent,
MbscEventcalendarView,
MbscResource,
Page,
setOptions,
} from '@mobiscroll/react';
import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
setOptions({
theme: 'ios',
themeVariant: 'light'
});
function App() {
const resources = useMemo(
() => [
{
id: 1,
name: 'Ryan',
color: '#f7c4b4',
},
{
id: 2,
name: 'Kate',
color: '#c6f1c9',
},
{
id: 3,
name: 'John',
color: '#e8d0ef',
},
],
[],
);
const [myEvents, setEvents] = useState([]);
const [myResources, setResources] = useState(resources);
const [participants, setParticipants] = useState<{ [key: number]: boolean }>({ 1: true, 2: true, 3: true });
const myView = useMemo(
() => ({
scheduler: {
type: 'week',
allDay: false,
startDay: 1,
endDay: 5,
startTime: '08:00',
endTime: '17:00',
},
}),
[],
);
const filter = useCallback(
(ev: ChangeEvent) => {
const key = +ev.target.value;
const checked = ev.target.checked;
const updatedParticipants = { ...participants, [key]: checked };
setParticipants(updatedParticipants);
setResources(resources.filter((r) => updatedParticipants[+r.id]));
},
[participants, resources],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/resource-events-shared/',
(events: MbscCalendarEvent[]) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
);
}
export default App;
```
### CSS
```css
.dynamic-resources-calendar {
border-right: 1px solid #ccc;
}
```
## Implementation notes
- Use `view: { scheduler: { type: 'week', allDay: false, startDay: 1, endDay: 5, startTime: '08:00', endTime: '17:00' } }` - Mon-Fri, 8am-5pm, no all-day row. Enable `clickToCreate: true`, `dragToCreate: true`, `dragToMove: true`, `dragToResize: true`.
- Define 3 resources: Ryan (id:1), Kate (id:2), John (id:3), each with a pastel color. All three are visible by default.
- Load events via `getJson` from a JSONP endpoint on mount. React/Angular/Vue: assign the fetched array to the state/property bound to the `data` prop. JS/jQuery (imperative API): call `inst.setEvents(events)`.
- Render a sidebar with one `Checkbox` per resource, all initially checked. Keep a `participants` map (`{ 1: true, 2: true, 3: true }`) tracking each resource's visibility.
- On checkbox change, update the corresponding entry in `participants`, then set the active resources to `allResources.filter(r => participants[r.id])`; for the imperative API, call `inst.setOptions({ resources: filteredArray })`.
## Run it in your project
1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).
2. Clone the repository:
```
git clone https://github.com/acidb/mobiscroll-demos-react.git
```
3. If not installed yet, install the Mobiscroll CLI from NPM:
```
npm install -g @mobiscroll/cli
```
4. Config Mobiscroll - open a terminal window in the root directory and run:
```
mobiscroll config react
```
5. Install dependencies - open a terminal window in the root directory and run:
```
npm install
```
6. Run the project:
```
npm run dev
```
On a trial, add `--trial` to the config command: `mobiscroll config react --trial`.
Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation
## Related demos
- Previous: [Multi-Resource Shared Events](https://demo.mobiscroll.com/react/scheduler/shared-events-across-resources.md) - Schedule event across multiple resources in the React Scheduler — for shared work calendars, mixed resource types like instructor and aircraft.
- Next: [Dynamic Resource Widths](https://demo.mobiscroll.com/react/scheduler/dynamic-content-based-resource-width.md) - Adapt React Scheduler resource column widths dynamically — assign per-resource CSS classes so each column fits its header content.