---
title: "Angular Calendar Mark Days with Custom Shapes Example | Mobiscroll"
component: "Calendar"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/calendar/customize-marked-day-shapes"
---

# Mark Days with Custom Shapes - Angular Calendar demo

Add custom-shaped day markers to a Angular calendar date picker — use the marked option for colored dots, then override styles. For Angular 22 and Ionic 8.

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

## Description

The default shape of day marks are dots. If you want to mark a day for something you can add one or more colored dots through the [`marked` option](https://mobiscroll.com/docs/angular/datepicker/api#opt-marked). There are cases when you might want to change the shape of the marks or use different marks that carry specific meaning.

When you want to update the shape you can simply use CSS and override the styling: `.mbsc-calendar-marks .mbsc-calendar-mark { // you custom override }`.

If you need to show different shapes, you can pass a custom CSS class in the `markCssClass` property of the [`marked` option](https://mobiscroll.com/docs/angular/datepicker/api#opt-marked). Use it to show triangles, squares and dots for different marks.

**What else can you use to add extra information to the day cells?** [Learn how to add labels and color days →](https://demo.mobiscroll.com/angular/calendar/dots-colors-labels)

## What this demo shows

- This demo shows an inline date picker calendar month view with custom-shaped marked dots.
- **Header navigation** The month and year label in the top left opens a month and year picker. The blue previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header displays abbreviated day names from Sunday through Saturday, with the dates arranged in a grid below it.
- **Month navigation** The month can be changed by clicking and dragging the calendar 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 and remains blue when the user selects another date.
- **Marked days** The default shape of day marks is a dot. You can add one or more colored dots to a date through the `marked` option. In cases where different marks need to carry specific meanings, you can customize their shape using CSS and override the default styling.
- **Adjacent months** Dates from the previous and next months appear with a muted style. Selecting one navigates the calendar to the corresponding month.

## Best for

- **Event calendars** Use different shapes to distinguish meetings, deadlines, holidays, and other event types.
- **Availability calendars** Mark available, unavailable, or partially available dates with visually distinct indicators.
- **Booking and reservation calendars** Show dates with reservations, special rates, promotions, or limited availability.
- **Task and deadline tracking** Use custom marks to differentiate tasks, milestones, reminders, and due dates.
- **Status-based calendars** Represent different statuses or categories with shapes in addition to colors, making calendar information easier to scan and distinguish.

## Tutorial

```html
<mbsc-datepicker
    [marked]="[
        {
            date: '2026-10-02T00:00',
            color: '#46c4f3',
            markCssClass: 'square-mark'
        }, { 
            date: '2026-10-04T00:00',
            color: '#159833',
            markCssClass: 'triangle-mark'
        }, {
            date: '2026-10-06T00:00',
            color: '#b05cbf',
            markCssClass: 'square-mark'
        }, {
            date: '2026-10-06T00:00',
            color: '#3adecf',
            markCssClass: 'triangle-mark'
        }, {
            date: '2026-10-06T00:00',
            color: '#c8d235'
        }, { 
            date: '2026-10-08T00:00',
            color: '#46c4f3'
        }, { 
            date: '2026-10-10T00:00',
            color: '#7e56bd',
            markCssClass: 'square-mark'
        }, { 
            date: '2026-10-13T00:00',
            color: '#f13f77'
        }, {
            date: '2026-10-16T00:00',
            color: '#21b326',
            markCssClass: 'square-mark'
        }, {
            date: '2026-10-16T00:00',
            color: '#ffa93a',
            markCssClass: 'triangle-mark'
        },{ 
            date: '2026-10-18T00:00',
            color: '#89d7c9',
            markCssClass: 'triangle-mark'
        }, { 
            date: '2026-10-21T00:00',
            color: '#ffc400',
            markCssClass: 'square-mark'
        }, { 
            date: '2026-10-26T00:00',
            color: '#8dec7d',
            markCssClass: 'triangle-mark'
        }
    ]">
</mbsc-datepicker>
```

```css
.triangle-mark {
    content: '';
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    border-radius: 0;
    width: 8px;
    height: 8px;
    position: relative;
    top: -2px;
    right: 1px;
}

.square-mark {
    border-radius: 0;
}
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/angular/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/datepicker/api#opt-themeVariant) - option
- [`marked`](https://mobiscroll.com/docs/angular/datepicker/api#opt-marked) - option
- [`controls`](https://mobiscroll.com/docs/angular/datepicker/api#opt-controls) - option
- [`display`](https://mobiscroll.com/docs/angular/datepicker/api#opt-display) - option

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { 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 {
  marked = [
    { date: '2026-10-02T00:00', color: '#46c4f3', markCssClass: 'square-mark' },
    { date: '2026-10-04T00:00', color: '#159833', markCssClass: 'triangle-mark' },
    { date: '2026-10-06T00:00', color: '#b05cbf', markCssClass: 'square-mark' },
    { date: '2026-10-06T00:00', color: '#3adecf', markCssClass: 'triangle-mark' },
    { date: '2026-10-06T00:00', color: '#c8d235' },
    { date: '2026-10-08T00:00', color: '#46c4f3' },
    { date: '2026-10-10T00:00', color: '#7e56bd', markCssClass: 'square-mark' },
    { date: '2026-10-13T00:00', color: '#f13f77' },
    { date: '2026-10-16T00:00', color: '#21b326', markCssClass: 'square-mark' },
    { date: '2026-10-16T00:00', color: '#ffa93a', markCssClass: 'triangle-mark' },
    { date: '2026-10-18T00:00', color: '#89d7c9', markCssClass: 'triangle-mark' },
    { date: '2026-10-21T00:00', color: '#ffc400', markCssClass: 'square-mark' },
    { date: '2026-10-26T00:00', color: '#8dec7d', markCssClass: 'triangle-mark' },
  ];
}
```

### Template

```html
<mbsc-datepicker [controls]="['calendar']" display="inline" [marked]="marked"></mbsc-datepicker>
```

### CSS

```css
.mbsc-datepicker .mbsc-calendar-mark.triangle-mark {
  content: '';
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: left bottom;
  -ms-transform-origin: left bottom;
  transform-origin: left bottom;
  border-radius: 0;
  width: 8px;
  height: 8px;
  position: relative;
  top: -2px;
  right: 1px;
}

.mbsc-datepicker .mbsc-calendar-mark.square-mark {
  border-radius: 0;
}
```

## Implementation notes

- Use `controls: ['calendar']` and `display: 'inline'`.
- Pass an array of mark objects to `marked`, each with `date` and `color`; the default rendered shape is a dot.
- To use a different shape, pass a `markCssClass` on individual mark objects (e.g. `'square-mark'`, `'triangle-mark'`) and define the shape by targeting that class name directly with CSS (e.g. `.square-mark { border-radius: 0; }`, `.triangle-mark { transform: rotate(45deg); ... }`) - no combinator with `.mbsc-calendar-mark` or extra scoping is needed.
- Multiple marks with different `markCssClass` values (or no `markCssClass`, which renders the default dot) can share the same `date`, layering several shapes/colors on one day.

## 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: [Custom Header](https://demo.mobiscroll.com/angular/calendar/customizing-header.md) - Customize the Angular date picker header — rearrange nav controls, add a today button, or add a week/month view switcher.
- Next: [Day Cell Custom Styling](https://demo.mobiscroll.com/angular/calendar/half-day-styling.md) - Apply custom CSS classes to Angular date picker day cells to highlight date ranges, recurring dates, or individual days.