---
title: "Angular Agenda Inline Event Data Example | Mobiscroll"
component: "Agenda"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/agenda/load-inline-data"
---

# Inline Event Data - Angular Agenda demo

Populate the Angular agenda view with events from a local array — the simplest way to add events before switching to remote or on-demand loading. For Angular 22 and Ionic 8.

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

## Description

What is an agenda without any events in it? To populate it with events all you have to do is pass the event array to the [`data` option](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data).

In a real-world scenario you would probably [load the events from a remote resource](https://demo.mobiscroll.com/angular/agenda/load-events-from-remote-api) or event better, [load them on demand](https://demo.mobiscroll.com/angular/agenda/load-events-on-demand). However the point of this example is to understand how easy it is to add events to the agenda.

**Do you want to learn about the event data sctructure?** [See how the event object is built →](https://demo.mobiscroll.com/angular/agenda/event-data-structure)

## 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

- **Monthly event overview** Showing a full month of events in a compact agenda layout.

## 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
- [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option
- [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option

## Code

### Component

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

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

const now = new Date();

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {
  myEvents: MbscCalendarEvent[] = [
    {
      start: '2026-10-20T09:00',
      end: '2026-10-23T18:00',
      title: 'Business of Software Conference',
      color: '#ff6d42',
    },
    {
      start: '2026-10-20T13:00',
      end: '2026-10-21T21:00',
      title: 'Friends binge marathon',
      color: '#7bde83',
    },
    {
      start: '2026-10-27T13:00',
      end: '2026-10-28T21:00',
      title: 'Friends binge marathon',
      color: '#7bde83',
    },
    {
      start: '2026-10-20T08:00',
      end: '2026-10-20T09:00',
      title: 'Product team mtg.',
      color: '#913aa7',
    },
    {
      start: '2026-10-21T07:00',
      end: '2026-10-21T08:00',
      title: 'Green box to post office',
      color: '#6e7f29',
    },
    {
      start: '2026-10-19T08:45',
      end: '2026-10-19T10:00',
      title: 'Quick mtg. with Martin',
      color: '#de3d83',
    },
    {
      start: '2026-10-08T09:30',
      end: '2026-10-08T10:30',
      title: 'Product team mtg.',
      color: '#f67944',
    },
    {
      start: '2026-10-08T11:00',
      end: '2026-10-08T11:45',
      title: 'Stakeholder mtg.',
      color: '#a144f6',
    },
    {
      start: '2026-10-08T13:00',
      end: '2026-10-08T13:45',
      title: "Lunch @ Butcher's",
      color: '#00aabb',
    },
    {
      start: '2026-10-08T15:00',
      end: '2026-10-08T16:00',
      title: 'General orientation',
      color: '#a71111',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: now.getMonth() + 1,
        day: 14,
      },
      allDay: true,
      title: 'Dexter BD',
      color: '#37bbe4',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: now.getMonth() + 1,
        day: 25,
      },
      allDay: true,
      title: 'Luke BD',
      color: '#37bbe4',
    },
    {
      recurring: {
        repeat: 'weekly',
        weekDays: 'WE',
      },
      allDay: true,
      title: 'Employment (Semi-weekly)',
      color: '#228c73',
    },
    {
      start: '2026-10-10T00:00',
      end: '2026-10-15T00:00',
      allDay: true,
      title: 'Sam OFF',
      color: '#ca4747',
    },
    {
      start: '2026-10-18T00:00',
      end: '2026-10-29T00:00',
      allDay: true,
      title: 'Europe tour',
      color: '#56ca70',
    },
    {
      start: '2026-02-07T00:00',
      end: '2026-02-25T00:00',
      allDay: true,
      title: 'Dean OFF',
      color: '#99ff33',
    },
    {
      start: '2026-03-05T00:00',
      end: '2026-03-14T00:00',
      allDay: true,
      title: 'Mike OFF',
      color: '#e7b300',
    },
    {
      start: '2026-05-07T00:00',
      end: '2026-05-16T00:00',
      allDay: true,
      title: 'John OFF',
      color: '#669900',
    },
    {
      start: '2026-06-01T00:00',
      end: '2026-06-11T00:00',
      allDay: true,
      title: 'Carol OFF',
      color: '#6699ff',
    },
    {
      start: '2026-07-02T00:00',
      end: '2026-07-17T00:00',
      allDay: true,
      title: 'Jason OFF',
      color: '#cc9900',
    },
    {
      start: '2026-08-06T00:00',
      end: '2026-08-14T00:00',
      allDay: true,
      title: 'Ashley OFF',
      color: '#339966',
    },
    {
      start: '2026-09-10T00:00',
      end: '2026-09-20T00:00',
      allDay: true,
      title: 'Marisol OFF',
      color: '#8701a9',
    },
    {
      start: '2026-10-01T00:00',
      end: '2026-10-12T00:00',
      allDay: true,
      title: 'Sharon OFF',
      color: '#cc6699',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 12,
        day: 25,
      },
      allDay: true,
      title: 'Christmas Day',
      color: '#ff0066',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 1,
        day: 1,
      },
      allDay: true,
      title: "New Year's day",
      color: '#99ccff',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 4,
        day: 1,
      },
      allDay: true,
      title: "April Fool's Day",
      color: '#ff6666',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 11,
        day: 2,
      },
      allDay: true,
      title: 'File Form 720 for the third quarter',
      color: '#147ea6',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 11,
        day: 2,
      },
      allDay: true,
      title: 'File Form 730 and pay tax on wagers accepted during September',
      color: '#a73a4e',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 11,
        day: 2,
      },
      allDay: true,
      title: 'File Form 2290 and pay the tax for vehicles first used during September',
      color: '#218e0d',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 11,
        day: 2,
      },
      allDay: true,
      title: 'File Form 941 for the third quarter',
      color: '#a67914',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 11,
        day: 2,
      },
      allDay: true,
      title: 'Deposit FUTA owed through Sep if more than $500',
      color: '#3c0707',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 11,
        day: 30,
      },
      allDay: true,
      title: 'Deposit payroll tax for payments on Nov 21-24 if the semiweekly deposit rule applies',
      color: '#14a618',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 11,
        day: 30,
      },
      allDay: true,
      title: 'File Form 730 and pay tax on wagers accepted during October',
      color: '#722ac1',
    },
    {
      recurring: {
        repeat: 'yearly',
        month: 11,
        day: 30,
      },
      allDay: true,
      title: 'File Form 2290 and pay the tax for vehicles first used during October',
      color: '#256069',
    },
  ];

  myView: MbscEventcalendarView = { agenda: { type: 'month' } };
}
```

### Template

```html
<mbsc-eventcalendar [data]="myEvents" [view]="myView"></mbsc-eventcalendar>
```

## Implementation notes

- Use `view: { agenda: { type: 'month' } }`. Pass a static event array directly to the `data` option - no remote loading.
- The array demonstrates the three main event types in one place:
  - **Timed events**: `start` and `end` set to specific times using the `dyndatetime()` helper (demo repo utility for relative dates, e.g. `dyndatetime('y,m,d,9')` = today at 09:00, `dyndatetime('y,m,d+1,7')` = tomorrow at 07:00).
  - **All-day multi-day events**: `allDay: true` with `start`/`end` as date-only values.
  - **Recurring events**: `recurring: { repeat: 'yearly', month: ..., day: ... }` for annual events; `recurring: { repeat: 'weekly', weekDays: 'WE' }` for weekly events. Recurring events have no `start`/`end` - only the `recurring` rule and `allDay: true`.

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

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

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