React Agenda Resource Filter in Header Example

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 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.:

.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 →

Get started with this example

Preview in full screen

Embed a segmented resource filter in the Agenda custom header — filter displayed events by person or team.

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

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

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;

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({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

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;

.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;
}