---
title: "Angular Event calendar Custom Label Styling Example | Mobiscroll"
component: "Event calendar"
framework: "Angular"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/angular/eventcalendar/customize-label-look-and-feel"
---

# Custom Label Styling - Angular Event calendar demo

Fully customize event labels in the Angular event calendar — set colors, show timed-event dots, and include custom fields beyond the event title.

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

## Description

You can customize the look of the labels and show additional content besides the `event.title`. There are two approaches you can take:

- **Only customize the content of the labels** - For this you will want to use the [`calendarEventContentTemplate` option](https://mobiscroll.com/docs/angular/eventcalendar/api#template-calendarEventContentTemplate). The `color` and positioning of the label will be handled by the calendar. The `title` and any other custom fields you want to show in the template is your responsibility.
- **Fully customize how the labels look** *(like in this example)* - Use the [`calendarEventTemplate` option](https://mobiscroll.com/docs/angular/eventcalendar/api#template-calendarEventTemplate). All original event fields along with computed fields like `isMultiDay`, `lastDay` can be leveraged for constructing the template. With the `calendarEventTemplate` you will have full control over how the labels are styled including things like `color`, `title` and any custom fields.

## What this demo shows

- A desktop month view event calendar with a full month grid layout.
- **Event labels** Days with events display labels directly inside the month cells.
- **Custom label rendering** The demo shows labels with a fully customized visual appearance: all day or multiple all day event labels have stron colors and the event title at the beggining of the event and timed events are marked with a small colored dot at the left and the event title next to it.
- **Overflow handling** The number of visible event labels depends on the available vertical space in the day cell. Additional events are moved into a popover and indicated by an `X more` label, where `X` represents the number of hidden events. Clicking it opens a popover that lists the remaining events for that day.
- **Event selection** Clicking an event label shows a toast with the event title at the bottom center part of the calendar.
- **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** The month view can be changed by clicking and dragging the calendar left or right.
- **Header controls** The header shows the current month and year on the left, with blue previous and next navigation arrows plus a `Today` button on the right.

## Best for

- **Branded calendar experiences** Products that need event labels to match a custom visual style instead of the default calendar appearance.
- **Category-based event display** Use cases where color and custom label design help users quickly distinguish event types, statuses, or teams.
- **Richer event summaries** Calendars that need to show more than the event title, such as custom fields or additional context inside the label.

## 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
- [`onEventClick`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onEventClick) - event
- [`calendarEventTemplate`](https://mobiscroll.com/docs/angular/eventcalendar/api#template-calendarEventTemplate) - template
- [`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, OnInit } from '@angular/core';
import { MbscCalendarEvent, MbscEventcalendarOptions, MbscModule, Notifications } from '@mobiscroll/angular';

@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[] = [];

  eventSettings: MbscEventcalendarOptions = {
    theme: 'ios',
    themeVariant: 'light',
    clickToCreate: true,
    dragToCreate: true,
    dragToMove: true,
    dragToResize: true,
    eventDelete: true,
    view: {
      calendar: { labels: true },
    },
    onEventClick: (args) => {
      this.notify.toast({
        message: args.event.title,
      });
    },
  };

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

### Template

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

<ng-template #labelTemplate let-data>
  <div *ngIf="data.isMultiDay" [ngStyle]="{background: data.original.color, color: '#000'}" class="multi-day-event">
    {{data.original.title}}
  </div>
  <div *ngIf="!data.isMultiDay" class="single-day-event-dot" [ngStyle]="{background: data.original.color, color: '#000'}"></div>
  <div *ngIf="!data.isMultiDay" class="single-day-event">{{data.original.title}}</div>
</ng-template>
```

### CSS

```css
.single-day-event-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 7px;
}

.single-day-event {
  margin-left: 8px;
}

.multi-day-event {
  padding-left: 5px;
}
```

## Implementation notes

- Set `view: { calendar: { labels: true } }` for a month grid with inline event labels.
- Use the full label renderer - `renderCalendarEvent` (Angular: `calendarEventTemplate`, Vue: `calendarEvent` slot) - to take complete control over each label's markup and styling. The render function receives a `data` object with computed fields alongside the original event; use `data.isMultiDay` to branch the template: multi-day events get a solid colored background using `data.original.color` with `data.original.title` as text; single-day events get a small colored dot followed by the title.
- For lighter customization where the calendar handles color and positioning automatically, use `renderCalendarEventContent` (Angular: `calendarEventContentTemplate`, Vue: `calendarEventContent` slot) instead - only the inner content is replaced.
- Handle `onEventClick` to show a `Toast` with `args.event.title`.
- Load events from a remote endpoint using `getJson` and assign them to `data`; for the imperative API, call `inst.setEvents(events)` in the callback.

## 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: [Event Popover](https://demo.mobiscroll.com/angular/eventcalendar/customize-event-popover.md) - Customize how events appear in the day popover of a Angular event calendar — use full custom layouts or add fields like assignee, location, and participants.