---
title: "React Agenda Resource Filter in Header Example | Mobiscroll"
component: "Agenda"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/agenda/resource-filtering-in-header"
---

# Resource Filter in Header - React Agenda demo

Embed a segmented resource filter in the React Agenda custom header — filter displayed events by person or team. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/agenda/resource-filtering-in-header)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/agenda/resource-filtering-in-header)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/eventcalendar/agenda/resource-filtering-in-header)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/agenda/resource-filtering-in-header.md), [jQuery](https://demo.mobiscroll.com/jquery/agenda/resource-filtering-in-header.md), [Angular](https://demo.mobiscroll.com/angular/agenda/resource-filtering-in-header.md), [Vue](https://demo.mobiscroll.com/vue/agenda/resource-filtering-in-header.md)

## Description

The agenda doesn't have built in resource listing, however we can easily solve that inside the header using the segmented component. The header of the agenda is a canvas and an opportunity for customization. You can add custom components and enable new interaction in context.

Such an example would be a custom filter block created with the help of a segmented control and placed between the standard UI components, which are:

- **Navigation component** - `<CalendarNav />`. Use the `.md-header-filter-controls` CSS class for custom overrides.
- **Today button** - `<CalendarToday />`. Use the `.md-header-filter-today` CSS class for custom overrides.
- **Previous month button** - `<CalendarPrev />`. Use the `.md-header-filter-prev` CSS class for custom overrides.
- **Next month button** - `<CalendarNext />`. Use the `.md-header-filter-next` CSS class for custom overrides.

For changing the order the controls are laid out, you only need to set up the `renderHeader`.

### Overriding the order for specific themes

For a custom order on a theme to theme basis, you will need to use a little CSS. [Flex layout](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) makes reordering easy. It's just a matter of setting the order in CSS. For material use the `.mbsc-material`, for windows the `.mbsc-windows` prefix and for iOS it is `.mbsc-ios` class. Eg.:

```css
.mbsc-material .mds-header-filter-prev { order: 1; }
            .mbsc-material .mds-header-filter-next { order: 2; }
            .mbsc-material .mds-header-filter { order: 3; }
            .mbsc-material .mds-header-filter-today { order: 4; }
```

**Want to style and reorder the header?** [Take a look at the previous example →](https://demo.mobiscroll.com/react/agenda/customizing-calendar-header)

## What this demo shows

- Shows a monthly agenda view with events listed and grouped by date.
- **Header navigation** The month and year label in the top left opens date navigation. A segmented resource filter is centered in the header. The previous and next arrows and the Today button on the right move between months and jump back to the current date.
- **Resource filter** The segmented control contains three selectable options: `Barry`, `Hortense`, and `Carl`, each with an avatar shown before the name.
- **Resource filtering** Selecting a resource from the segmented control, updates the month view to show that person's events, making it possible to show or hide events by resource from the header.
- **Color coding** `Barry`'s option and events use green, `Hortense` uses blue, and `Carl` uses pink, so the active filter and the visible events stay visually aligned.
- **Agenda list** The area below the header lists events for the selected month. Events in the agenda are grouped by date.
- **Sticky day headers** As the agenda scrolls vertically, each day stays visible with a sticky date header while its events appear underneath.
- **Events** Events appear as agenda cards with a colored strip on the left and the event title next to it. Start and end times are stacked on the right side of timed events. All-day events show the all-day label on the right.
- **Event interaction** Hovering an event highlights it.
- **Event selection** Clicking an event selects and highlights it.

## Best for

- **Resource-specific month planning** Viewing one person's month schedule at a time without leaving the agenda view.
- **Team agendas with simple filtering** Switching between a small set of people or resources from a compact header control.
- **Color-coded resource views** Making it easy to distinguish which events belong to which resource.
- **Operational dashboards** Internal scheduling tools where users need quick filtering and fast month-to-month navigation.
- **Custom agenda toolbars** Cases where the standard header needs extra controls without moving filtering outside the agenda.

## 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
- [`renderHeader`](https://mobiscroll.com/docs/react/eventcalendar/api#renderer-renderHeader) - renderer
- [`resources`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-resources) - option
- [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option
- [`onClose`](https://mobiscroll.com/docs/react/notifications/toast#event-onClose) - event

## Code

### JSX

```jsx
import {
  CalendarNav,
  CalendarNext,
  CalendarPrev,
  CalendarToday,
  Eventcalendar,
  getJson,
  Segmented,
  SegmentedGroup,
  setOptions,
  Toast,
} from '@mobiscroll/react';
import { useCallback, useEffect, useMemo, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  const [filteredEvents, setFilteredEvents] = useState([]);
  const [myEvents, setEvents] = useState([]);
  const [selectedResources, setSelectedResources] = useState({ 1: true });
  const [isToastOpen, setToastOpen] = useState(false);
  const [toastMessage, setToastMessage] = useState();

  const myView = useMemo(() => ({ agenda: { type: 'month' } }), []);

  const myResources = useMemo(
    () => [
      { id: 1, name: 'Barry', color: '#328e39', img: 'https://img.mobiscroll.com/demos/m1.png' },
      { id: 2, name: 'Hortense', color: '#00aabb', img: 'https://img.mobiscroll.com/demos/f1.png' },
      { id: 3, name: 'Carl', color: '#ea72c0', img: 'https://img.mobiscroll.com/demos/m2.png' },
    ],
    [],
  );

  const handleToastClose = useCallback(() => {
    setToastOpen(false);
  }, []);

  const handleChange = useCallback(
    (ev) => {
      const value = +ev.target.value;
      const checked = ev.target.checked;
      const resource = myResources.find((r) => r.id === value);

      const updatedSelectedResources = { ...selectedResources, [value]: checked };
      setSelectedResources(updatedSelectedResources);
      setFilteredEvents(myEvents.filter((e) => updatedSelectedResources[e.resource]));
      setToastMessage((checked ? 'Showing ' : 'Hiding ') + (resource ? resource.name : '') + ' events');
      setToastOpen(true);
    },
    [myEvents, myResources, selectedResources],
  );

  const customHeader = useCallback(
    () => (
      <>
        <CalendarNav className="mds-header-filter-nav" />
        <div className="mds-header-filter mbsc-flex-1-0">
          <SegmentedGroup select="multiple">
            {myResources.map((res) => (
              <Segmented
                key={res.id}
                value={res.id}
                checked={selectedResources[res.id]}
                className={'mds-header-filter-' + res.id}
                onChange={handleChange}
              >
                <img className="mds-header-filter-img" src={res.img} alt={res.name} />
                <span className="mds-header-filter-name">{res.name}</span>
              </Segmented>
            ))}
          </SegmentedGroup>
        </div>
        <CalendarPrev className="mds-header-filter-prev" />
        <CalendarToday className="mds-header-filter-today" />
        <CalendarNext className="mds-header-filter-next" />
      </>
    ),
    [handleChange, myResources, selectedResources],
  );

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/filter-resource-events/',
      (events) => {
        setEvents(events);
        setFilteredEvents(events.filter((e) => e.resource === 1));
      },
      'jsonp',
    );
  }, []);

  return (
    <>
      <Eventcalendar data={filteredEvents} renderHeader={customHeader} resources={myResources} view={myView} />
      <Toast message={toastMessage} isOpen={isToastOpen} onClose={handleToastClose} />
    </>
  );
}

export default App;
```

### TSX

```tsx
import {
  CalendarNav,
  CalendarNext,
  CalendarPrev,
  CalendarToday,
  Eventcalendar,
  getJson,
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscResource,
  Segmented,
  SegmentedGroup,
  setOptions,
  Toast,
} from '@mobiscroll/react';
import { ChangeEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const App: FC = () => {
  const [filteredEvents, setFilteredEvents] = useState<MbscCalendarEvent[]>([]);
  const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
  const [selectedResources, setSelectedResources] = useState<{ [key: number | string]: boolean }>({ 1: true });
  const [isToastOpen, setToastOpen] = useState<boolean>(false);
  const [toastMessage, setToastMessage] = useState<string>();

  const myView = useMemo<MbscEventcalendarView>(() => ({ agenda: { type: 'month' } }), []);

  const myResources = useMemo<MbscResource[]>(
    () => [
      { id: 1, name: 'Barry', color: '#328e39', img: 'https://img.mobiscroll.com/demos/m1.png' },
      { id: 2, name: 'Hortense', color: '#00aabb', img: 'https://img.mobiscroll.com/demos/f1.png' },
      { id: 3, name: 'Carl', color: '#ea72c0', img: 'https://img.mobiscroll.com/demos/m2.png' },
    ],
    [],
  );

  const handleToastClose = useCallback(() => {
    setToastOpen(false);
  }, []);

  const handleChange = useCallback(
    (ev: ChangeEvent<HTMLInputElement>) => {
      const value = +ev.target.value;
      const checked = ev.target.checked;
      const resource = myResources.find((r) => r.id === value);

      const updatedSelectedResources = { ...selectedResources, [value]: checked };
      setSelectedResources(updatedSelectedResources);
      setFilteredEvents(myEvents.filter((e) => updatedSelectedResources[e.resource as number]));
      setToastMessage((checked ? 'Showing ' : 'Hiding ') + (resource ? resource.name : '') + ' events');
      setToastOpen(true);
    },
    [myEvents, myResources, selectedResources],
  );

  const customHeader = useCallback(
    () => (
      <>
        <CalendarNav className="mds-header-filter-nav" />
        <div className="mds-header-filter mbsc-flex-1-0">
          <SegmentedGroup select="multiple">
            {myResources.map((res) => (
              <Segmented
                key={res.id}
                value={res.id}
                checked={selectedResources[res.id]}
                className={'mds-header-filter-' + res.id}
                onChange={handleChange}
              >
                <img className="mds-header-filter-img" src={res.img} alt={res.name} />
                <span className="mds-header-filter-name">{res.name}</span>
              </Segmented>
            ))}
          </SegmentedGroup>
        </div>
        <CalendarPrev className="mds-header-filter-prev" />
        <CalendarToday className="mds-header-filter-today" />
        <CalendarNext className="mds-header-filter-next" />
      </>
    ),
    [handleChange, myResources, selectedResources],
  );

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/filter-resource-events/',
      (events: MbscCalendarEvent[]) => {
        setEvents(events);
        setFilteredEvents(events.filter((e) => e.resource === 1));
      },
      'jsonp',
    );
  }, []);

  return (
    <>
      <Eventcalendar data={filteredEvents} renderHeader={customHeader} resources={myResources} view={myView} />
      <Toast message={toastMessage} isOpen={isToastOpen} onClose={handleToastClose} />
    </>
  );
};

export default App;
```

### CSS

```css
.mds-header-filter-nav {
  width: 180px;
}

.mds-header-filter-img {
  width: 25px;
}

.mds-header-filter-name {
  margin-left: 10px;
}

.mds-header-filter .mbsc-segmented {
  max-width: 400px;
  margin: 0 auto;
}

.mds-header-filter .mbsc-segmented-button.mbsc-selected {
  color: #fff;
}

.mds-header-filter-1 .mbsc-button.mbsc-selected.mbsc-material,
.mds-header-filter-1 .mbsc-button.mbsc-selected.mbsc-windows,
.mds-header-filter-1 .mbsc-segmented-selectbox-inner {
  background: #328e39;
}

.mds-header-filter-2 .mbsc-button.mbsc-selected.mbsc-material,
.mds-header-filter-2 .mbsc-button.mbsc-selected.mbsc-windows,
.mds-header-filter-2 .mbsc-segmented-selectbox-inner {
  background: #00aabb;
}

.mds-header-filter-3 .mbsc-button.mbsc-selected.mbsc-material,
.mds-header-filter-3 .mbsc-button.mbsc-selected.mbsc-windows,
.mds-header-filter-3 .mbsc-segmented-selectbox-inner {
  background: #ea72c0;
}

.mbsc-material .mds-header-filter-prev {
  order: 1;
}

.mbsc-material .mds-header-filter-next {
  order: 2;
}

.mbsc-material .mds-header-filter {
  order: 3;
}

.mbsc-material .mds-header-filter-today {
  order: 4;
}
```

## Implementation notes

- Use `view: { agenda: { type: 'month' } }`. Define a `resources` array with 3 entries - each has `id`, `name`, `color`, and `img` (avatar URL). Pass it to the `resources` option. Load events from `https://trial.mobiscroll.com/filter-resource-events/` via JSONP using `getJson(url, callback, 'jsonp')`. Angular: use `HttpClient.jsonp()`. Each event has a `resource` field (integer ID) that links it to a resource.
- Implement client-side filtering: maintain a `selectedResources` set (initially resource 1 only). After loading, compute `filteredEvents = myEvents.filter(e => selectedResources[e.resource])` and pass `filteredEvents` to the Eventcalendar's `data` option. Recompute and update `filteredEvents` whenever the selection changes.
- Build a custom header via `renderHeader` (Angular: `headerTemplate`, Vue: `header` slot) containing: `CalendarNav` on the left, a `SegmentedGroup` with `select="multiple"` in the center (each `Segmented` shows the resource's avatar image + name), and `CalendarPrev`, `CalendarToday`, `CalendarNext` on the right. On segment change, update the `selectedResources` map and refresh `filteredEvents`. Show a Toast with "Showing/Hiding {name} events".

## 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