---
title: "React Agenda Customizable Day Headers Example | Mobiscroll"
component: "Agenda"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/agenda/customizing-day-header"
---

# Customizable Day Headers - React Agenda demo

Build customizable React agenda day headers — style date labels and add per-day action buttons, including headers for days without events. For React and Next.JS.

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

## Description

You can use [`renderAgendaDay`](https://mobiscroll.com/docs/react/eventcalendar/api#renderer-renderAgendaDay) to set up a custom day header template. This provides flexibility to format and style the date according to your preferences, allowing further customization of the headers and ensuring a consistent layout that matches your page's overall design.

In this demo, setting the `showEmptyDays` property to true allows us to add functionalities to the day header, such as creating new events for empty days, which is useful in various situations.

## 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. The previous and next arrows and the Today button on the right move between months and jump back to the current date.
- **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.
- **Custom day headers** Each day header includes a blue + Add event button on the right. The button is highlighted on hover.
- **Adding events** Clicking + Add event creates an event for that day and displays an Event added toast at the bottom center of the agenda.
- **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

- **Daily event creation** Agenda interfaces where users need to add an event directly from the relevant date header, including days that do not yet contain events.
- **Appointment calendars** Month-based appointment lists that keep date context visible while users review and add appointments.
- **Workforce scheduling** Shift or assignment agendas where schedulers need a quick date-specific action for creating new entries.
- **Operations planning** Delivery, maintenance, or service schedules organized by day, with a persistent date header during scrolling.

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

## Code

### JSX

```jsx
import { Button, Eventcalendar, formatDate, getJson, setOptions, Toast } from '@mobiscroll/react';
import { useCallback, useEffect, useMemo, useState } from 'react';

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

function App() {
  const [myEvents, setEvents] = useState([]);
  const [isToastOpen, setToastOpen] = useState(false);

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

  const addEvent = useCallback(
    (date) => {
      const newEvent = {
        title: 'Event',
        start: date,
      };

      setEvents([...myEvents, newEvent]);
      setToastOpen(true);
    },
    [myEvents],
  );

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

  const renderCustomDay = useCallback(
    (day) => (
      <div className="mbsc-flex mbsc-flex-1-1 mbsc-align-items-center">
        <div className="mbsc-flex-1-1">
          <div>{formatDate('D MMM YYYY', day.date)}</div>
        </div>
        <Button className="mds-custom-day-header-btn" color="primary" startIcon="plus" variant="outline" onClick={() => addEvent(day.date)}>
          Add event
        </Button>
      </div>
    ),
    [addEvent],
  );

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

  return (
    <>
      <Eventcalendar className="mds-custom-day-header" view={myView} data={myEvents} renderAgendaDay={renderCustomDay} />;
      <Toast message="Event added" isOpen={isToastOpen} onClose={handleToastClose} />
    </>
  );
}

export default App;
```

### TSX

```tsx
import {
  Button,
  Eventcalendar,
  formatDate,
  getJson,
  MbscCalendarDayData,
  MbscCalendarEvent,
  MbscEventcalendarView,
  setOptions,
  Toast,
} from '@mobiscroll/react';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';

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

const App: FC = () => {
  const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
  const [isToastOpen, setToastOpen] = useState(false);

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

  const addEvent = useCallback(
    (date: Date) => {
      const newEvent = {
        title: 'Event',
        start: date,
      };

      setEvents([...myEvents, newEvent]);
      setToastOpen(true);
    },
    [myEvents],
  );

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

  const renderCustomDay = useCallback(
    (day: MbscCalendarDayData) => (
      <div className="mbsc-flex mbsc-flex-1-1 mbsc-align-items-center">
        <div className="mbsc-flex-1-1">
          <div>{formatDate('D MMM YYYY', day.date)}</div>
        </div>
        <Button className="mds-custom-day-header-btn" color="primary" startIcon="plus" variant="outline" onClick={() => addEvent(day.date)}>
          Add event
        </Button>
      </div>
    ),
    [addEvent],
  );

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

  return (
    <>
      <Eventcalendar className="mds-custom-day-header" view={myView} data={myEvents} renderAgendaDay={renderCustomDay} />;
      <Toast message="Event added" isOpen={isToastOpen} onClose={handleToastClose} />
    </>
  );
};
export default App;
```

### CSS

```css
.mds-custom-day-header .mbsc-event-day.mbsc-windows {
  padding: 8px 24px;
}

.mds-custom-day-header-btn.mbsc-button {
  height: 24px;
  line-height: 24px;
  margin: 0;
  padding: 0 10px;
}

.mds-custom-day-header-btn .mbsc-button-txt {
  font-size: 12px;
}

.mds-custom-day-header-btn .mbsc-button-icon {
  width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 14px;
}
```

## Implementation notes

- Use `view: { agenda: { type: 'month', showEmptyDays: true } }`. `showEmptyDays: true` ensures days with no events still render their day header row, which is where the custom template appears.
- Pass a custom day header via `renderAgendaDay` (React/JS/jQuery) / `agendaDayTemplate` (Angular) / `agendaDay` slot (Vue). The template receives the `day` object - render the date with `formatDate('D MMM YYYY', day.date)` and an "Add event" Button alongside it.
- On "Add event" click: append `{ title: 'Event', start: day.date }` to the events array (frameworks) or call `inst.addEvent(...)` (JS/jQuery), then show a Toast confirmation. Load initial events from `https://trial.mobiscroll.com/events/?vers=5` via JSONP using `getJson(url, callback, 'jsonp')`. Angular: use `HttpClient.jsonp()`. JS/jQuery: call `inst.setEvents(events)` in the callback.

## 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: [Custom Header](https://demo.mobiscroll.com/react/agenda/customizing-calendar-header.md) - Build a custom header for the React event calendar agenda — assemble navigation controls, add a segmented view switcher or any custom action.
- Next: [Event Tooltip](https://demo.mobiscroll.com/react/agenda/custom-event-tooltip.md) - Add hover tooltips to React agenda events showing appointment details and inline actions — choose native, custom popup, or third-party tooltip.