---
title: "Angular Agenda Event Content Example | Mobiscroll"
component: "Agenda"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/agenda/event-content-customization"
---

# Event Content - Angular Agenda demo

Add custom fields, descriptions, participants, and action buttons to Angular agenda items — the agenda renders time and color automatically. For Angular 22 and Ionic 8.

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

## Description

Above the built in look & feel, the events can be customized in two ways:

- **Full event customization** - The agenda handles the listing and ordering of the events, while the full styling falls into your hands. Explore [this example](https://demo.mobiscroll.com/angular/agenda/full-event-customization) for more details.
- **Content-only customization** *(like in this example)* - When customizing only the content, the calendar handles the event `start` and `end` times, `allDay` and `color` rendering.

You will have to place and provide styling to the `title` field and any other custom fields you are using, like `description`, `location`, `participants`. You can add custom functionality, buttons and other custom components.

Pass the content template to the [`agendaEventContentTemplate` option](https://mobiscroll.com/docs/angular/eventcalendar/api#template-agendaEventContentTemplate). All original event fields along with computed fields like `isMultiDay`, `lastDay` are available inside the template.

## What this demo shows

- Shows a mobile-friendly week calendar paired with a daily agenda list in a single view.
- **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 weeks and jump back to the current date.
- **Week view** A week calendar is displayed at the top of the view.
- **Week navigation** The week strip can be changed by clicking and dragging left or right.
- **Day cell states** Hovering a day highlights the day number with a gray background. Selecting a day highlights the day number with a blue background. The current date is highlighted by default.
- **Event markers** Days with events show a small dot marker inside the day cell.
- **Agenda list** The area below the calendar lists events for the selected day.
- **Date selection** Selecting a day in the week calendar updates the agenda to show events for that date.
- **Custom event content** Each agenda event displays a colored strip, the event title, and stacked start and end times. A participant avatar and name appear below the title, and an Add participant button appears below the times.
- **Event selection** Clicking an event selects and highlights it.

## Best for

- **Mobile agendas** Combining compact week navigation with a focused list of events for the selected day.
- **Daily schedules** Showing appointments, tasks, shifts, or bookings one day at a time while keeping nearby dates visible.
- **Personal planning** Letting users move quickly between days and review the events scheduled for each date.
- **Field or service teams** Supporting mobile-friendly daily schedules where users need fast access to the current week and selected day.
- **Booking and appointment apps** Displaying a selected day's events below a week calendar without switching to a separate screen.
- **Lightweight planning views** Giving users a simple week-at-a-glance control with a detailed agenda below it.

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

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { MbscCalendarEvent, MbscEventcalendarView, 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 implements OnInit {
  constructor(
    private http: HttpClient,
    private notify: Notifications,
  ) {}

  myEvents: MbscCalendarEvent[] = [];

  myParticipants: Record<number, { img: string; name: string }> = {
    1: { name: 'Barry L.', img: 'https://img.mobiscroll.com/demos/m1.png' },
    2: { name: 'Hortense T.', img: 'https://img.mobiscroll.com/demos/f1.png' },
    3: { name: 'Carl H.', img: 'https://img.mobiscroll.com/demos/m2.png' },
  };

  myView: MbscEventcalendarView = {
    calendar: { type: 'week' },
    agenda: { type: 'day' },
  };

  add(data: MbscCalendarEvent): void {
    this.notify.toast({
      message: data.title + ' clicked',
    });
  }

  ngOnInit(): void {
    this.http.jsonp<MbscCalendarEvent[]>('https://trial.mobiscroll.com/custom-events/', 'callback').subscribe((resp) => {
      this.myEvents = resp;
    });
  }
}
```

### Template

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

<ng-template #customContentTemplate let-data>
  <div>{{data.title}}</div>
  <div class="mds-agenda-event-content mbsc-flex mbsc-align-items-center">
    <img
      class="mds-agenda-event-avatar"
      [attr.alt]="myParticipants[data.original.participant].name"
      [src]="myParticipants[data.original.participant].img"
    />
    <div class="mbsc-flex-1-1">{{myParticipants[data.original.participant].name}}</div>
    <mbsc-button class="mds-agenda-event-btn" color="secondary" (click)="add(data.original)">Add participant</mbsc-button>
  </div>
</ng-template>
```

### CSS

```css
.mds-agenda-event-content {
  padding: 8px 0;
  font-size: 13px;
}

.mds-agenda-event-avatar {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.mds-agenda-event-btn.mbsc-button {
  line-height: 20px;
}

.mds-agenda-event-btn.mbsc-ios,
.mds-agenda-event-btn.mbsc-material {
  position: absolute;
  right: 8px;
  bottom: 8px;
  margin: 0;
}
```

## Implementation notes

- Use `view: { calendar: { type: 'week' }, agenda: { type: 'day' } }`. Load events from `https://trial.mobiscroll.com/custom-events/` via JSONP using `getJson(url, callback, 'jsonp')`. Angular: use `HttpClient.jsonp()`. For the imperative API, call `inst.setEvents(events)` in the callback. Events have a custom `participant` field (integer key) referencing a local participants lookup.
- Use `renderAgendaEventContent` (Angular: `agendaEventContentTemplate`, Vue: `agendaEventContent` slot) for content-only customization - the calendar keeps default `start`/`end`, `allDay`, and `color` rendering while the template controls the inner content. The template receives a `data` object with `title`, `original` (the full event with custom fields), `isMultiDay`, and `lastDay`.
- Render the participant's avatar image and name from the lookup map, plus an "Add participant" Button. On button click, show a Toast with the event title.

## 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: [Full Event Customization](https://demo.mobiscroll.com/angular/agenda/full-event-customization.md) - Fully customize agenda event card layout — show images, location, participants, and custom fields in each event row.