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

# Load Events on Demand - Angular Event calendar demo

Fetch Angular event calendar events in real time as users navigates — load only the data needed for the visible range for a better performance.

- [Live demo](https://demo.mobiscroll.com/angular/eventcalendar/load-events-on-demand)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/calendar-view/load-events-on-demand)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/eventcalendar/load-events-on-demand.md), [jQuery](https://demo.mobiscroll.com/jquery/eventcalendar/load-events-on-demand.md), [React](https://demo.mobiscroll.com/react/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/angular/eventcalendar/load-events-from-remote-api) and [local data sources](https://demo.mobiscroll.com/angular/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/angular/eventcalendar/api#event-onPageLoading) lifecycle event to load the data runtime. You can [learn about lifecycle events](https://demo.mobiscroll.com/angular/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/angular/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/angular/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-themeVariant) - option
- [`clickToCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-eventDelete) - option
- [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option
- [`labels`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-labels) - option
- [`onPageLoading`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onPageLoading) - event
- [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { MbscCalendarEvent, MbscEventcalendarOptions, MbscModule, Notifications, setOptions } from '@mobiscroll/angular';

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

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  providers: [Notifications],
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {
  constructor(
    private http: HttpClient,
    private notify: Notifications,
  ) {}

  myEvents: MbscCalendarEvent[] = [];

  eventSettings: MbscEventcalendarOptions = {
    clickToCreate: true,
    dragToCreate: true,
    dragToMove: true,
    dragToResize: true,
    eventDelete: true,
    view: {
      calendar: { labels: true },
    },
    onPageLoading: (event: any) => {
      const year = event.month.getFullYear();
      const month = event.month.getMonth();

      this.http
        .jsonp<MbscCalendarEvent[]>('https://trial.mobiscroll.com/monthlyevents/?year=' + year + '&month=' + month + '&vers=5', 'callback')
        .subscribe((data) => {
          this.myEvents = data;

          this.notify.toast({
            message: 'New events loaded',
          });
        });
    },
  };
}
```

### Template

```html
<mbsc-eventcalendar [data]="myEvents" [options]="eventSettings"></mbsc-eventcalendar>
```

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

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.

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

## Related demos

- Previous: [Load Events from API](https://demo.mobiscroll.com/angular/eventcalendar/load-events-from-remote-api.md) - Load events into a Angular event calendar from a remote API — pass event data in the correct format to populate the calendar view.