---
title: "React Event calendar Load Events on Demand Example | Mobiscroll"
component: "Event calendar"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/eventcalendar/load-events-on-demand"
---

# Load Events on Demand - React Event calendar demo

Fetch React event calendar events in real time as users navigate — load only the data needed for the visible range for better performance. For React and Next.js.

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

## Description

The event calendar supports [remote](https://demo.mobiscroll.com/react/eventcalendar/load-events-from-remote-api) and [local data sources](https://demo.mobiscroll.com/react/eventcalendar/load-inline-data). Besides that, events can be populated on initialization or loaded on demand.

Getting the events in real time as the user navigates improves load performance and always serves the most recent data.

Use the [`onPageLoading`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onPageLoading) lifecycle event to load the data runtime. You can [learn about lifecycle events](https://demo.mobiscroll.com/react/eventcalendar/event-hooks) and places where to drop logic to customize the experience.

**Interested in loading events from Google Calendar?** [Show events from Google Calendar →](https://demo.mobiscroll.com/react/eventcalendar/load-events-from-google-calendar)

## What this demo shows

- A mobile month view event calendar is shown inside a smartphone frame.
- **Month grid** Day cells display events, each label has a colored line on the left, the event title, and an `end` value that shows the event end time.
- **Loading events on demand** On the initial load or month change, a `New events loaded` toast appears at the bottom center of the calendar. This indicates that the events were loaded real time.
- **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

- **On-demand event loading** Explaining how to load calendar events as the user navigates between months.
- **Performance-sensitive calendars** Reducing the initial data load by fetching only the events needed for the currently visible date range.
- **Live data scenarios** Showing the most recent event data by requesting it when the calendar view changes.
- **Month-view event calendars** Demonstrating lazy loading in a month grid where users browse forward and backward through dates.

## 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
- [`onPageLoading`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onPageLoading) - 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, useMemo, useState } from 'react';

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

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

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

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

  const handlePageLoading = useCallback((args) => {
    const year = args.month.getFullYear();
    const month = args.month.getMonth();

    getJson(
      'https://trial.mobiscroll.com/monthlyevents/?year=' + year + '&month=' + month + '&vers=5',
      (data) => {
        setEvents(data);
        setToastOpen(true);
      },
      'jsonp',
    );
  }, []);

  return (
    <>
      <Eventcalendar
        clickToCreate={true}
        dragToCreate={true}
        dragToMove={true}
        dragToResize={true}
        eventDelete={true}
        data={events}
        view={myView}
        onPageLoading={handlePageLoading}
      />
      <Toast message="New events loaded" isOpen={isToastOpen} onClose={handleToastClose} />
    </>
  );
}

export default App;
```

### TSX

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

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

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

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

  const onPageLoading = useCallback((event: MbscPageLoadingEvent) => {
    const year = event.firstDay.getFullYear();
    const month = event.firstDay.getMonth();

    getJson(
      'https://trial.mobiscroll.com/monthlyevents/?year=' + year + '&month=' + month + '&vers=5',
      (data: MbscCalendarEvent[]) => {
        setEvents(data);
        setToastOpen(true);
      },
      'jsonp',
    );
  }, []);

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

  return (
    <>
      <Eventcalendar
        clickToCreate={true}
        dragToCreate={true}
        dragToMove={true}
        dragToResize={true}
        eventDelete={true}
        data={events}
        view={myView}
        onPageLoading={onPageLoading}
      />
      <Toast message="New events loaded" isOpen={isToastOpen} onClose={handleCloseToast} />
    </>
  );
};
export default App;
```

## Implementation notes

- Set `view: { calendar: { labels: true } }`.
- Handle the `onPageLoading` event, which fires on the initial load and on each page change. The event argument includes a `month` property (a JS `Date`) - extract `year` and `month` from it to build the request URL. Vue: bind as `@page-loading` in the template.
- Inside the handler, call `getJson(url, callback, 'jsonp')` with a URL that includes `year` and `month` as query params. In the callback, set the returned array as the calendar's `data` and show a `Toast` with `'New events loaded'`. Angular: use `HttpClient.jsonp()` instead of `getJson` and the `Notifications` service for the toast. JS/jQuery: call `inst.setEvents(data)` on the calendar instance instead of updating reactive data; jQuery: use `$.getJSON()` instead of `getJson`.

## 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: [Load Events from API](https://demo.mobiscroll.com/react/eventcalendar/load-events-from-remote-api.md) - Load events into a React event calendar from a remote API — pass event data in the correct format to populate the calendar view.