---
title: "React Agenda Show Empty Days Example | Mobiscroll"
component: "Agenda"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/agenda/show-empty-days"
---

# Show Empty Days - React Agenda demo

Display day headers for all dates in the React Agenda, including days without events — keep the full month visible in the agenda list. For React and Next.JS.

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

## Description

By default, the agenda doesn't render days with no events. However, in some cases, you might want to display headers for empty days, especially when you want to add extra functionalities for those days or make it easier to schedule future events. In such cases, you can use the `showEmptyDays` property under the [`view.agenda`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) option.

**Interested in how to customize the day headers?** [Check out this example →](https://demo.mobiscroll.com/react/agenda/customizing-day-header)

## What this demo shows

- Shows a month agenda view where events are listed below the header and grouped by date.
- **Show empty days:** A control panel on the left lets users show or hide day headers for dates without events.
- **Default state:** Empty day headers are shown when the demo loads, so days without events still appear in the agenda.
- **Header navigation:** The month and year label opens date navigation. The previous and next arrows move between months, and the Today button returns to the current date.
- **Agenda list:** Events for the visible month appear below the header, grouped under their date headers.
- **Empty days:** Dates without events can still render as day headers, which makes the full month visible in the agenda.
- **Sticky day headers:** As the agenda scrolls vertically, the current day header stays visible while its events appear underneath.
- **Events:** Events appear as agenda cards with a colored strip on the left and the event title beside it.
- **Timed events:** Start and end times are shown on the right side of timed events.
- **Event hover:** Hovering over an event highlights it.
- **Event selection:** Clicking an event selects it and applies a selected highlight.

## Best for

- **Monthly agenda overviews:** Showing a full month of agenda content while keeping events grouped by date.
- **Planning future work:** Keeping empty dates visible so users can identify available days for adding or scheduling future events.
- **Date-based workflows:** Supporting interfaces where every day in the range matters, even when some days do not have events yet.
- **Custom day actions:** Leaving empty day headers visible when the app needs to attach extra functionality to days without events.
- **Scrollable agendas:** Presenting longer agenda lists with sticky date headers so users can keep their place while scrolling.

## Tutorial

### Set the agenda to render headers for empty days

- [x] Show empty days

```jsx
<Eventcalendar
  view={{
    agenda: {
      type: 'month',
      showEmptyDays: true
    }
  }}
/>
```

## 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
- [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option

## Code

### JSX

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

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

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

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

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

  return <Eventcalendar data={myEvents} view={myView} />;
}

export default App;
```

### TSX

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

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

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

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

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

  return <Eventcalendar data={myEvents} view={myView} />;
};
export default App;
```

## Implementation notes

- Use `view: { agenda: { type: 'month', showEmptyDays: true } }`. The `showEmptyDays` option inside `view.agenda` causes the agenda to render a day header for every day in the range, even when no events fall on that day (by default those days are hidden). Load events from `https://trial.mobiscroll.com/events/?vers=5` via JSONP using `getJson(url, callback, 'jsonp')`. Angular: use `HttpClient.jsonp()`. For the imperative API, 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: [Daily, Weekly, Monthly & Yearly Views](https://demo.mobiscroll.com/react/agenda/daily-weekly-monthly-annual-agenda.md) - Build a React agenda list view that switches between daily, weekly, monthly, and yearly modes — display events for a single or multiple consecutive periods.
- Next: [Printing the View](https://demo.mobiscroll.com/react/agenda/printing-the-view.md) - Print only the agenda — not the full page — using the React print add-on, with PDF export via the browser print dialog.