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

# Full Event Customization - Angular Agenda demo

Fully customize agenda event card layout — show images, location, participants, and custom fields in each event row. For Angular 22 and Ionic 8.

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

## Description

Above the built in rendering mode you can either customize the full event or just the content of the event. If we break up the event into pieces there are four fields that we are interested in:

- The event `start` and `end` time
- Whether it is an `allDay` event or not
- The event `color`
- The event `title`

If you would like to keep the styling of the `start/end` times, `allDay` and `color` you will want to [customize the content only](https://demo.mobiscroll.com/angular/agenda/event-content-customization), not the full event. In case of the full event customization the agenda takes care of positioning the event container and everything else is your responsibility.

You will have to place and provide styling to all event fields. Beside the ones mentioned above you'll be able to render other custom fields, like `description`, `location`, `participants` ...

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

## 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.
- **Custom event cards** Each event appears as a rich list item with a thumbnail image, title, location, and start time.
- **Custom layout** A full event template controls the agenda item layout, including its media and event details.
- **Event interaction** Hovering an event highlights it.

## Best for

- **Event guides** Pair event imagery with titles, locations, and start times in a scannable agenda.
- **Community calendars** Help people distinguish local events quickly using visual, location, and time details.
- **Conference schedules** Present sessions with recognizable imagery, venue details, and start times.
- **Travel itineraries** Organize scheduled stops and activities with location, time, and visual context.
- **Activity planners** Make planned activities easier to identify when several events appear on the same date.
- **Mobile event discovery apps** Support compact event browsing with the key details visible in each agenda item.

## 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
- [`agendaEventTemplate`](https://mobiscroll.com/docs/angular/eventcalendar/api#template-agendaEventTemplate) - 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, setOptions } from '@mobiscroll/angular';

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

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

  myEvents: MbscCalendarEvent[] = [];
  myView: MbscEventcalendarView = { agenda: { type: 'month' } };

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

### Template

```html
<mbsc-eventcalendar [data]="myEvents" [agendaEventTemplate]="customEventTemplate" [view]="myView">
  <ng-template #customEventTemplate let-data>
    <div class="mbsc-flex mbsc-flex-1-1">
      <img class="mds-agenda-event-img" [attr.alt]="data.title" [src]="'https://img.mobiscroll.com/demos/' + data.original.img" />
      <div class="mbsc-flex-1-1">
        <div class="mds-agenda-event-title">{{data.title}}</div>
        <div class="mbsc-flex">
          <div class="mds-agenda-event-location mbsc-flex-1-1">
            <div class="mds-agenda-event-label">Location</div>
            <div>{{data.original.location}}</div>
          </div>
          <div class="mds-agenda-event-time">
            <div class="mds-agenda-event-label">Time</div>
            <div>{{data.start}}</div>
          </div>
        </div>
      </div>
    </div>
  </ng-template>
</mbsc-eventcalendar>
```

### CSS

```css
.mds-agenda-event-img {
  width: 100px;
  margin-right: 10px;
  border-radius: 6px;
}

.mds-agenda-event-title {
  font-size: 17px;
  font-weight: 600;
  padding-bottom: 10px;
}

.mds-agenda-event-location {
  line-height: 1.4;
  margin-right: 40px;
}

.mds-agenda-event-time {
  line-height: 1.4;
}

.mds-agenda-event-label {
  font-size: 12px;
  font-weight: 600;
  color: #aaa;
}
```

## Implementation notes

- Use `view: { agenda: { type: 'month' } }`. Load events from `https://trial.mobiscroll.com/agenda-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 custom fields: `img` (image filename) and `location` (string).
- Use `renderAgendaEvent` (Angular: `agendaEventTemplate`, Vue: `agendaEvent` slot) for full event customization. The agenda handles positioning of the event container; all rendering of `start`/`end`, `allDay`, `color`, and `title` is the template's responsibility. The template receives a `data` object with: `title`, `start` (pre-formatted time string), `original` (the full event object including custom fields), `isMultiDay`, and `lastDay`.
- Inside the template, render a thumbnail image (sourced from `data.original.img`), the event title, and two side-by-side columns: location (`data.original.location`) and start time (`data.start`). Use Mobiscroll flex utilities (`mbsc-flex`, `mbsc-flex-1-1`) for the layout.

## 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: [Event Content](https://demo.mobiscroll.com/angular/agenda/event-content-customization.md) - Add custom fields, descriptions, participants, and action buttons to Angular agenda items — the agenda renders time and color automatically.
- Next: [Event Calendar Agenda Custom Header](https://demo.mobiscroll.com/angular/agenda/customizing-calendar-header.md) - Build a custom Angular event calendar agenda header — rearrange navigation controls, add a view switcher, and control layout per theme.