React Agenda Custom Header Example

You can customize how the header of the agenda looks and how the components are arranged. Besides that you can also add custom functionality, like a segmented control that lets people switch between agenda and calendar.

Use the renderHeader option for passing a custom header layout. There are predefined components - shorthands if you will - that can be used to assemble the header:

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. This example sets a consistent order and layout across all themes and shows a custom control at the far right end.

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 .md-header-filter-prev { order: 1; }
            .mbsc-material .md-header-filter-next { order: 2; }
            .mbsc-material .md-header-filter-controls { order: 3; }
            .mbsc-material .md-header-filter-today { order: 4; }

Want to add a filter to the header? Check out the next example →

Get started with this example

Preview in full screen

Build a custom header for the event calendar agenda — assemble navigation controls, add a segmented view switcher or any custom action.

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

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

function App() {
  const [myEvents, setEvents] = useState([]);
  const [currentDate, setCurrentDate] = useState(new Date());
  const [currentView, setCurrentView] = useState('agenda');
  const [myView, setView] = useState({ agenda: { type: 'month' } });

  const handleSelectedDateChange = useCallback((args) => {
    setCurrentDate(args.date);
  }, []);

  const changeView = useCallback((event) => {
    let view;
    switch (event.target.value) {
      case 'calendar':
        view = {
          calendar: { type: 'month' },
        };
        break;
      case 'agenda':
        view = {
          agenda: { type: 'month' },
        };
        break;
    }

    setCurrentView(event.target.value);
    setView(view);
  }, []);

  const prevPage = useCallback(() => {
    setCurrentDate((currentDate) => new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
  }, []);

  const nextPage = useCallback(() => {
    setCurrentDate((currentDate) => new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
  }, []);

  const customWithNavButtons = useCallback(
    () => (
      <>
        <CalendarNav className="mds-custom-header-nav" />
        <div className="mbsc-flex mbsc-flex-1-0 mbsc-justify-content-center">
          <Button onClick={prevPage} icon="material-arrow-back" variant="flat" className="mds-custom-header-button"></Button>
          <CalendarToday />
          <Button onClick={nextPage} icon="material-arrow-forward" variant="flat" className="mds-custom-header-button"></Button>
        </div>
        <div className="mds-custom-header-switch">
          <SegmentedGroup value={currentView} onChange={changeView}>
            <Segmented value="agenda" icon="material-view-day" />
            <Segmented value="calendar" icon="calendar" />
          </SegmentedGroup>
        </div>
      </>
    ),
    [changeView, currentView, prevPage, nextPage],
  );

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/events/?vers=5',
      (events) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <Eventcalendar
      data={myEvents}
      renderHeader={customWithNavButtons}
      selectedDate={currentDate}
      view={myView}
      onSelectedDateChange={handleSelectedDateChange}
    />
  );
}

export default App;

import {
  Button,
  CalendarNav,
  CalendarToday,
  Eventcalendar,
  getJson,
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscSelectedDateChangeEvent,
  Segmented,
  SegmentedGroup,
  setOptions ,
} from '@mobiscroll/react';
import { ChangeEvent, FC, useCallback, useEffect, useState } from 'react';

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

const App: FC = () => {
  const [currentDate, setCurrentDate] = useState(new Date());
  const [currentView, setCurrentView] = useState<string>('agenda');
  const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
  const [myView, setView] = useState<MbscEventcalendarView>({ agenda: { type: 'month' } });

  const handleSelectedDateChange = useCallback((args: MbscSelectedDateChangeEvent) => {
    setCurrentDate(args.date as Date);
  }, []);

  const changeView = useCallback((event: ChangeEvent<HTMLInputElement>) => {
    let view = {};
    switch (event.target.value) {
      case 'calendar':
        view = {
          calendar: { type: 'month' },
        };
        break;
      case 'agenda':
        view = {
          agenda: { type: 'month' },
        };
        break;
    }

    setCurrentView(event.target.value);
    setView(view);
  }, []);

  const prevPage = useCallback(() => {
    setCurrentDate((currentDate) => new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
  }, []);

  const nextPage = useCallback(() => {
    setCurrentDate((currentDate) => new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
  }, []);

  const customWithNavButtons = useCallback(
    () => (
      <>
        <CalendarNav className="mds-custom-header-nav" />
        <div className="mbsc-flex mbsc-flex-1-0 mbsc-justify-content-center">
          <Button onClick={prevPage} icon="material-arrow-back" variant="flat" className="mds-custom-header-button"></Button>
          <CalendarToday />
          <Button onClick={nextPage} icon="material-arrow-forward" variant="flat" className="mds-custom-header-button"></Button>
        </div>
        <div className="mds-custom-header-switch">
          <SegmentedGroup value={currentView} onChange={changeView}>
            <Segmented value="agenda" icon="material-view-day" />
            <Segmented value="calendar" icon="calendar" />
          </SegmentedGroup>
        </div>
      </>
    ),
    [changeView, nextPage, prevPage, currentView],
  );

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/events/?vers=5',
      (events: MbscCalendarEvent[]) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <Eventcalendar
      data={myEvents}
      renderHeader={customWithNavButtons}
      selectedDate={currentDate}
      view={myView}
      onSelectedDateChange={handleSelectedDateChange}
    />
  );
};

export default App;

.mds-custom-header-nav {
  width: 180px;
}

.mds-custom-header-button.mbsc-button {
  font-size: 20px;
  height: auto;
  padding: 0;
  margin: 0;
}

.mds-custom-header-switch .mbsc-segmented {
  width: 110px;
  margin-top: 0;
  margin-bottom: 0;
}

.mds-custom-header-switch .mbsc-segmented.mbsc-material,
.mds-custom-header-switch .mbsc-segmented.mbsc-windows {
  padding: 0;
}

.mds-custom-header-switch .mbsc-segmented-button.mbsc-button {
  font-size: 20px;
  height: 32px;
  padding: 0;
}