---
title: "Angular Event calendar Colored Cell Backgrounds Example | Mobiscroll"
component: "Event calendar"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/eventcalendar/colored-cell-background"
---

# Colored Cell Backgrounds - Angular Event calendar demo

Color day-cell backgrounds in a Angular event calendar — mark exact or recuring dates or date ranges as visual highlights for holidays and special days. For Angular 22 and Ionic 8.

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

## Description

Color the background of the days with the [`colors`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-colors) option. You can specify backgrounds as `exact dates`, `ranges` or set up `recurring rules`. The `recurring` object works the [same way as for the events](https://demo.mobiscroll.com/angular/eventcalendar/recurring-events).

Use the [`onPageLoading`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onPageLoading) lifecycle event to color backgrounds runtime. You can [learn about lifecycle events](https://demo.mobiscroll.com/angular/eventcalendar/event-hooks) and places where to drop logic to customize the experience.

**Want to color time ranges & days in the scheduler?** [Learn how to do it →](https://demo.mobiscroll.com/angular/scheduler/colored-cell-background)

## What this demo shows

- A desktop month-view event calendar where predefined day cells have pale colored backgrounds behind the events.
- **Colored day cells** Day backgrounds are used as visual markers while keeping event labels readable on top.
- **Event labels** Days with events display labels directly inside the month cells. Labels use different styles and colors to distinguish all-day events, multi-day, and timed events.
- **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.
- **Label interaction** Hovering over or clicking an event label selects it and highlights the selected label.
- **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 can be changed by clicking and dragging the calendar left or right.
- **Header** The top-left side shows the current month and year, while the top-right side includes previous and next navigation arrows with a `Today` button between them.

## Best for

- **Holidays and observances** Highlighting public holidays, company holidays, and other special dates directly in the month grid.
- **Marked dates** Calling attention to predefined days that need visual emphasis without blocking event readability.
- **Calendar overview screens** Month views where background cues help people scan for important days while still keeping event labels visible.

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

  settings: MbscEventcalendarOptions = {
    clickToCreate: true,
    dragToCreate: true,
    dragToMove: true,
    dragToResize: true,
    eventDelete: true,
    colors: [
      {
        start: '2026-09-30T00:00',
        end: '2026-10-01T00:00',
        background: '#fde4c880',
      },
      {
        start: '2026-10-17T00:00',
        end: '2026-10-20T00:00',
        background: '#d5f1ea80',
      },
      {
        date: '2026-10-29T00:00',
        background: '#ffdbdb80',
      },
      {
        date: '2026-11-03T00:00',
        background: '#fbedd080',
      },
      {
        date: '2026-11-10T00:00',
        background: '#fbedd080',
      },
      {
        background: '#d6e81e1a',
        recurring: {
          repeat: 'monthly',
          day: -1,
        },
      },
    ],
  };

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

### Template

```html
<mbsc-eventcalendar [data]="myEvents" [options]="settings"></mbsc-eventcalendar>
```

## Implementation notes

- Pass a `colors` array to the `Eventcalendar`. Each entry sets a `background` color value and targets days using one of three shapes:
  - Single day: `{ date: '2026-01-29', background: '#ffdbdb80' }`
  - Date range: `{ start: '2026-01-17', end: '2026-01-20', background: '#d5f1ea80' }`
  - Recurring rule: `{ background: '#d6e81e1a', recurring: { repeat: 'monthly', day: -1 } }` - this example colors the last day of every month; the `recurring` object follows the same recurrence structure as event data.
- 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

- Previous: [Show All or Limit Event Labels](https://demo.mobiscroll.com/angular/eventcalendar/show-more-all-labels.md) - Show all event labels with dynamic row heights or limit labels per day in a Angular month-view calendar — hidden events appear in a "show more" popover.
- Next: [Switch Day, Week and Month Views](https://demo.mobiscroll.com/angular/eventcalendar/switching-day-week-month-view.md) - Switch a Angular event calendar between day, week, and month views using a header segmented control — each view paired with a matching agenda list.