---
title: "Javascript Range Custom Shaped Day Marks Example | Mobiscroll"
component: "Range"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/range/customize-marked-day-shapes"
---

# Custom Shaped Day Marks - JavaScript Range demo

Customize day mark shapes on the Javascript date range picker — show triangles, squares, and dots using CSS overrides or a custom mark CSS class. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/range/customize-marked-day-shapes)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/datepicker/range/customize-marked-day-shapes)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/range/customize-marked-day-shapes.md), [Angular](https://demo.mobiscroll.com/angular/range/customize-marked-day-shapes.md), [React](https://demo.mobiscroll.com/react/range/customize-marked-day-shapes.md), [Vue](https://demo.mobiscroll.com/vue/range/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/javascript/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/javascript/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/javascript/range/dots-colors-labels)

## What this demo shows

- This demo shows an inline date range picker calendar month view with custom-shaped marked dots.
- **Inline date range picker** This example embeds the date range picker directly in the page without an input by using inline display mode.
- **Start and end inputs** Clickable inputs appear above the calendar header. The active input has a white background, while the inactive input has a gray background. A clear button appears after a range is selected.
- **Header navigation** The month and year label in the upper-left corner opens the month and year picker. The previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header shows abbreviated day names from Sunday through Saturday, with dates arranged in a grid below.
- **Month navigation** Drag the calendar left or right to move between months.
- **Day cell states** Hovering over a day highlights its number with a gray background. The first selected day becomes the range start, and the second becomes the range end. Selected days are highlighted in blue. The current date is highlighted by default and remains blue when another date is selected.
- **Adjacent months** Dates from the previous and next months use a muted style. Selecting one navigates to its corresponding month.
- **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.

## 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
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'
    }
]
```

```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/javascript/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-controls) - option
- [`select`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-select) - option
- [`display`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-display) - option
- [`marked`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-marked) - option

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

mobiscroll.datepicker('#demo', {
  controls: ['calendar'],
  select: 'range',
  display: 'inline',
  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' },
  ],
});
```

### HTML

```html
<div id="demo"></div>
```

### CSS

```css
.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-calendar-mark.square-mark {
    border-radius: 0;
}
```

## Implementation notes

- Set `controls: ['calendar']`, `select: 'range'`, and `display: 'inline'` to render an inline range calendar.
- Pass `marked` as an array of `{ date, color }` entries (one entry per dot/mark; multiple entries can share the same `date` to stack marks on one day).
- Add `markCssClass` (e.g. `'square-mark'`, `'triangle-mark'`) to a `marked` entry to render a custom shape instead of the default dot; entries without `markCssClass` render as a colored dot.
- Define the shape classes in CSS, e.g. `.square-mark { border-radius: 0; }` and `.triangle-mark { transform: rotate(45deg); border-radius: 0; width: 8px; height: 8px; ... }`, keyed off the class passed in `markCssClass`.
- To restyle the default dot shape globally instead of per-mark, override `.mbsc-calendar-marks .mbsc-calendar-mark` in CSS.

## 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-javascript.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 javascript
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation

## Related demos

- Previous: [Theme Customization](https://demo.mobiscroll.com/javascript/range/themes-ios-material-windows.md) - Style the Javascript date range picker with iOS, Material, or Windows themes — switch light/dark mode or apply brand colors via the theme builder.
- Next: [Custom Day Styling](https://demo.mobiscroll.com/javascript/range/half-day-styling.md) - Style individual day cells in the Javascript date range picker with custom CSS classes and background colors.