---
title: "Angular Event calendar Inline Events Example | Mobiscroll"
component: "Event calendar"
framework: "Angular"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/angular/eventcalendar/load-inline-data"
---

# Inline Events - Angular Event calendar demo

Populate a Angular event calendar with events using an inline data array — month view with event labels and overflow popover.

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

## Description

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

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

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

## What this demo shows

- A month-view event calendar is displayed inside a smartphone frame.
- **Month grid** Days with events display event labels directly in the month cells with different visual styles based on the event type or event data.
- **Overflow handling** The number of visible event labels depends on the available height in each day cell. Additional events are collapsed behind an `X more` link.
- **Popover** Clicking the `X more` link opens a popover that shows the hidden events for that day.
- **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

- **Monthly event overview** Showing a full month of events in a compact calendar 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
- [`labels`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-labels) - 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-11-01T09:00',
      end: '2026-11-04T18:00',
      title: 'Business of Software Conference',
      color: '#ff6d42',
    },
    {
      start: '2026-11-01T13:00',
      end: '2026-11-02T21:00',
      title: 'Friends binge marathon',
      color: '#7bde83',
    },
    {
      start: '2026-11-08T13:00',
      end: '2026-11-09T21:00',
      title: 'Friends binge marathon',
      color: '#7bde83',
    },
    {
      start: '2026-11-01T08:00',
      end: '2026-11-01T09:00',
      title: 'Product team mtg.',
      color: '#913aa7',
    },
    {
      start: '2026-11-02T07:00',
      end: '2026-11-02T08:00',
      title: 'Green box to post office',
      color: '#6e7f29',
    },
    {
      start: '2026-10-31T08:45',
      end: '2026-10-31T10:00',
      title: 'Quick mtg. with Martin',
      color: '#de3d83',
    },
    {
      start: '2026-11-08T09:30',
      end: '2026-11-08T10:30',
      title: 'Product team mtg.',
      color: '#f67944',
    },
    {
      start: '2026-11-08T11:00',
      end: '2026-11-08T11:45',
      title: 'Stakeholder mtg.',
      color: '#a144f6',
    },
    {
      start: '2026-11-08T13:00',
      end: '2026-11-08T13:45',
      title: "Lunch @ Butcher's",
      color: '#00aabb',
    },
    {
      start: '2026-11-08T15:00',
      end: '2026-11-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-11-10T00:00',
      end: '2026-11-15T00:00',
      allDay: true,
      title: 'Sam OFF',
      color: '#ca4747',
    },
    {
      start: '2026-11-18T00:00',
      end: '2026-11-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 = { calendar: { labels: true } };
}
```

### Template

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

## Implementation notes

- Use `view: { calendar: { labels: true } }`.
- Define a static event array and pass it directly to the `data` prop/option - no remote fetch. Include a variety of event shapes: timed events (`start`, `end`, `title`, `color`), multi-day events, all-day events (`allDay: true`), and recurring events (e.g., `{ recurring: { repeat: 'yearly', month: 12, day: 25 }, allDay: true, title: 'Christmas Day', color: '#ff0066' }`). Use relative date helpers (`dyndatetime` or equivalent) so events always land near the current month regardless of when the demo is opened.
- No `data` prop change or async loading is needed after mount - the event array is fully static. For JS/jQuery, pass the array as the `data` option directly in the `eventcalendar()` init call.

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

- Next: [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.