---
title: "React Event calendar Event Popover Example | Mobiscroll"
component: "Event calendar"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/eventcalendar/event-popover"
---

# Event Popover - React Event calendar demo

Keep the month grid clean in a React event calendar — day cells show a dot or event count, and clicking opens a popover listing that day's events. For React and Next.JS.

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

## Description

Besides displaying events as labels, you can have them show up in a pop-over. Set it up through the `calendar: {popover: true}` object inside the [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) option. Using the popover setting saves vertical space and provides a subtle cue to the user that there are events. A small dot will appear in day cells with events or if `calendar: {count: true}` is set, an event count is displayed.

The same popover is rendered when events are displayed as labels and not all fit vertically in the calendar day cells.

**Interested in customizing how the events look?** [Take a look at how you can do it →](https://demo.mobiscroll.com/react/eventcalendar/customize-event-popover)

## What this demo shows

- A full month event calendar that keeps the month grid clean by showing daily summary indicators and opening a popover with the events for the selected day.
- **Day cells** Days that have events display a light blue horizontal summary label with `X event` or `X events` text, where `X` represents the number of events, inside the day cell instead of listing every event directly in the month grid.
- **Popover trigger** Clicking or hovering over the summary label highlights it; clicking the label opens a popover above the day cell while the rest of the calendar remains visible in the background.
- **Event list** The popover lists the events for the selected day, and each event has a small colored vertical marker on the left to help distinguish categories.
- **Hover state** Hovering over a day cell highlights the day number in the top-right corner with a gray background.
- **Selection** Clicking an empty part of a day cell selects the day and highlights the day number in blue.
- **Navigation** Users can move between months with the previous and next arrow buttons, the `Today` button in the header, or by clicking and dragging the calendar left or right.

## Best for

- **Booking systems** Reservation and appointment scenarios where each day may contain multiple entries that are easier to inspect in a popover.
- **Event-heavy calendars** Schedules with many events where showing every label directly in the grid would make the month view hard to scan.

## 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
- [`labels`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-labels) - option
- [`clickToCreate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-eventDelete) - option
- [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option
- [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option
- [`onEventClick`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onEventClick) - event
- [`onClose`](https://mobiscroll.com/docs/react/notifications/toast#event-onClose) - event

## Code

### JSX

```jsx
import { Eventcalendar, 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 [toastText, setToastText] = useState();

  const myView = useMemo(() => ({ calendar: { labels: true, count: true } }), []);

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

  const handleEventClick = useCallback((args) => {
    setToastText(args.event.title);
    setToastOpen(true);
  }, []);

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

  return (
    <>
      <Eventcalendar
        clickToCreate={true}
        dragToCreate={true}
        dragToMove={true}
        dragToResize={true}
        eventDelete={true}
        data={myEvents}
        view={myView}
        onEventClick={handleEventClick}
      />
      <Toast message={toastText} isOpen={isToastOpen} onClose={handleToastClose} />
    </>
  );
}

export default App;
```

### TSX

```tsx
import {
  Eventcalendar,
  getJson,
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscEventClickEvent,
  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<boolean>(false);
  const [toastText, setToastText] = useState<string>();

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

  const myView = useMemo<MbscEventcalendarView>(
    () => ({
      calendar: { popover: true, count: true },
    }),
    [],
  );

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

  const handleEventClick = useCallback((args: MbscEventClickEvent) => {
    setToastText(args.event.title);
    setToastOpen(true);
  }, []);

  return (
    <>
      <Eventcalendar
        clickToCreate={true}
        dragToCreate={true}
        dragToMove={true}
        dragToResize={true}
        eventDelete={true}
        data={myEvents}
        view={myView}
        onEventClick={handleEventClick}
      />
      <Toast message={toastText} isOpen={isToastOpen} onClose={handlehandleCloseToast} />
    </>
  );
};
export default App;
```

## Implementation notes

- Set `view: { calendar: { popover: true, count: true } }` to show a count indicator in each day cell that has events, and open a popover listing all events for that day when the indicator is clicked.
- Load events from a remote endpoint using `getJson` and assign them to `data`; for the imperative API, call `inst.setEvents(events)` in the callback.
- Handle `onEventClick` to show a `Toast` with `args.event.title`.

## 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: [Event Labels](https://demo.mobiscroll.com/react/eventcalendar/event-labels.md) - Show colour-coded event labels inside each day cell of a React month view event calendar — events that don't fit open in a popover.
- Next: [Custom Event Sort Order](https://demo.mobiscroll.com/react/eventcalendar/custom-event-sort.md) - Control event display order in a React event calendar — assign per-event priority values or supply a custom function to override the default ordering.