---
title: "React Event calendar Load Events from API Example | Mobiscroll"
component: "Event calendar"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/eventcalendar/load-events-from-remote-api"
---

# Load Events from API - React Event calendar demo

Load events into a React event calendar from a remote API — pass event data in the correct format to populate the calendar view. For React and Next.JS.

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

## Description

The calendar can be populated by passing an array to the [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) option, that you can construct either inline or by getting it from a remote API. The important thing to remember is that events need to be [in a format that the calendar understands](https://demo.mobiscroll.com/react/eventcalendar/event-data-structure).

**Interested in load on demand?** [Dynamically load events on month change →](https://demo.mobiscroll.com/react/eventcalendar/load-events-on-demand)

## What this demo shows

- A mobile month view event calendar is shown inside a smartphone frame.
- **Month grid** Days with events display event labels directly in the month cells with different visual styles based on the event type or event data.
- **Overflow handling** The number of visible event labels depends on the available height in each day cell. Additional events are collapsed behind an `X more` link.
- **Popover** Clicking the `X more` link opens a popover that shows the hidden events for that day.
- **Event interaction** Hovering over or selecting an event label highlights it.
- **Day cell states** Hovering a day cell highlights the day number with a gray background, while clicking the empty part of the cell selects the day and highlights the day number with a blue background.
- **Month navigation** You can move between months by clicking and dragging the calendar left or right.
- **Calendar header** The header shows the current month and year on the left, and blue month navigation arrows with a `Today` button (for jumping back to the current date) between them on the right.

## Best for

- **Remote event loading examples** Showing how to fetch events from an API and pass them to the event calendar view.

## 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
- [`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(() => ({ calendar: { labels: true } }), []);

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/events/?vers=5',
      (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>(() => ({ calendar: { labels: true } }), []);

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

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

export default App;
```

## Implementation notes

- Set `view: { calendar: { labels: true } }`.
- Use `getJson(url, callback, 'jsonp')` to fetch events from a remote endpoint. In the callback, set the received array as the calendar's `data`. Angular: use `HttpClient.jsonp()` instead of `getJson`. JS/jQuery: call `inst.setEvents(events)` on the calendar instance 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: [Inline Events](https://demo.mobiscroll.com/react/eventcalendar/load-inline-data.md) - Populate a React event calendar with events using an inline data array — month view with event labels and overflow popover.
- Next: [Load Events on Demand](https://demo.mobiscroll.com/react/eventcalendar/load-events-on-demand.md) - Fetch React event calendar events in real time as users navigates — load only the data needed for the visible range for a better performance.