Mark Days with Custom Shapes

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. 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. 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 →
Get started with this example

Demo

Javascript jQuery Angular React Vue 
<script setup>
const myMarked = [
  {
    date: '2026-11-02T00:00',
    color: '#46c4f3',
    markCssClass: 'square-mark'
  }, { 
    date: '2026-11-04T00:00',
    color: '#159833',
    markCssClass: 'triangle-mark'
  }, {
    date: '2026-11-06T00:00',
    color: '#b05cbf',
    markCssClass: 'square-mark'
  }, {
    date: '2026-11-06T00:00',
    color: '#3adecf',
    markCssClass: 'triangle-mark'
  }, {
    date: '2026-11-06T00:00',
    color: '#c8d235'
  }, { 
    date: '2026-11-08T00:00',
    color: '#46c4f3'
  }, { 
    date: '2026-11-10T00:00',
    color: '#7e56bd',
    markCssClass: 'square-mark'
  }, { 
    date: '2026-11-13T00:00',
    color: '#f13f77'
  }, {
    date: '2026-11-16T00:00',
    color: '#21b326',
    markCssClass: 'square-mark'
  }, {
    date: '2026-11-16T00:00',
    color: '#ffa93a',
    markCssClass: 'triangle-mark'
  },{ 
    date: '2026-11-18T00:00',
    color: '#89d7c9',
    markCssClass: 'triangle-mark'
  }, { 
    date: '2026-11-21T00:00',
    color: '#ffc400',
    markCssClass: 'square-mark'
  }, { 
    date: '2026-11-26T00:00',
    color: '#8dec7d',
    markCssClass: 'triangle-mark'
  }
]
</script>
<template>
  <MbscDatepicker :marked="myMarked" />
</template>
<style>
.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;
}
</style>
Preview in fullscreen

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.