---
title: "Javascript Agenda Remote API Events Example | Mobiscroll"
component: "Agenda"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/agenda/load-events-from-remote-api"
---

# Remote API Events - JavaScript Agenda demo

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. Plain JavaScript API.

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

## Description

The agenda can be populated by passing an array to the [`data`](https://mobiscroll.com/docs/javascript/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 agenda understands](https://demo.mobiscroll.com/javascript/agenda/event-data-structure).

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

## What this demo shows

- Shows a monthly agenda view with events listed and grouped by date.
- **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

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

## 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
- [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method

## Code

### JS

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

var inst = mobiscroll.eventcalendar('#demo-remote-api', {
  view: {
    agenda: { type: 'month' },
  },
});

mobiscroll.getJson(
  'https://trial.mobiscroll.com/events/?vers=5',
  function (events) {
    inst.setEvents(events);
  },
  'jsonp',
);
```

### HTML

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

## Implementation notes

- Use `view: { agenda: { type: 'month' } }`. 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. Pass the returned array directly to the `data` option - no transformation needed as long as events use the standard Mobiscroll event structure (`title`, `start`, `end`, etc.).

## 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: [Inline Event Data](https://demo.mobiscroll.com/javascript/agenda/load-inline-data.md) - Populate the Javascript agenda view with events from a local array — the simplest way to add events before switching to remote or on-demand loading.
- Next: [Load Events on Demand](https://demo.mobiscroll.com/javascript/agenda/load-events-on-demand.md) - Load Javascript agenda events on demand as users navigate — loading events from a remote API for real-time data and efficient performance.