---
title: "Javascript Agenda Load Events on Demand Example | Mobiscroll"
component: "Agenda"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/agenda/load-events-on-demand"
---

# Load Events on Demand - JavaScript Agenda demo

Load Javascript agenda events on demand as users navigate — loading events from a remote API for real-time data and efficient performance. Plain JavaScript API.

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

## Description

The agenda supports [remote](https://demo.mobiscroll.com/javascript/agenda/load-events-from-remote-api) and [local data sources](https://demo.mobiscroll.com/javascript/agenda/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/javascript/eventcalendar/api#event-onPageLoading) lifecycle event to load the data runtime. You can [learn about lifecycle events](https://demo.mobiscroll.com/javascript/agenda/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/javascript/agenda/load-events-from-google-calendar)

## What this demo shows

- Shows a monthly agenda view with events listed and grouped by date.
- **Loading events on demand** On the initial load or day change, a `New events loaded` toast appears at the bottom center of the timeline. This indicates that the events were loaded real time.
- **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.
- **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

- **On-demand event loading** Explaining how to load agenda 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 agenda view changes.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`onPageLoading`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onPageLoading) - event
- [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

mobiscroll.eventcalendar('#demo-on-demand-api', {
  view: { agenda: { type: 'month' } },
  onPageLoading: function (event, inst) {
    var year = event.firstDay.getFullYear();
    var month = event.firstDay.getMonth();

    mobiscroll.getJson(
      'https://trial.mobiscroll.com/monthlyevents/?year=' + year + '&month=' + month + '&vers=5',
      function (events) {
        inst.setEvents(events);
        mobiscroll.toast({
          message: 'New events loaded',
        });
      },
      'jsonp',
    );
  },
});
```

### HTML

```html
<div id="demo-on-demand-api"></div>
```

## Implementation notes

- Use `view: { agenda: { type: 'month' } }`. Wire the `onPageLoading` event to fetch events for the newly visible page. In the handler, extract the year and month from `args.firstDay` (or `args.month` depending on framework) and build the request URL: `https://trial.mobiscroll.com/monthlyevents/?year={year}&month={month}&vers=5`.
- Fetch the data via JSONP using `getJson(url, callback, 'jsonp')`. Angular: use `HttpClient.jsonp()`. jQuery: `$.getJSON(url+'&callback=?', callback)`. For the imperative API, call `inst.setEvents(events)` in the callback. Replace the entire events array on each page change - do not accumulate.
- Show a Toast with "New events loaded" after each successful fetch to confirm the data refresh.

## 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-javascript.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 javascript
   ```

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 javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation

## Related demos

- Previous: [Remote API Events](https://demo.mobiscroll.com/javascript/agenda/load-events-from-remote-api.md) - Load events into a Javascript agenda view from a remote API — fetch your event data and pass it as an array to display a date-grouped event list.