Day Cell Custom Styling

In situations when you need to style the days a little differently you'll get built-in tools for setting background color, highlight color, add day marks or labels.

But sometimes that is not enough. Luckily you can use the cellCssClass property of the colors option to pass a CSS class that will be added to the day cell and apply any custom styling you write in CSS. These days can be recurring days, ranges or individual days.

You can use the cellCssClass in combination with custom cell background to highlight a range of days and show the ends as check-in and check-out days.

Download and try example

Demo

Javascript jQuery Angular React Vue 
jscolors: [
    {
        date: '2026-10-12T00:00',
        cellCssClass: 'check-in'
    }, {
        date: '2026-10-16T00:00',
        cellCssClass: 'check-out'
    },{
        start: '2026-10-13T00:00',
        end: '2026-10-15T00:00',
        background: '#46c4f3'
    }
]
css.mbsc-datepicker .mbsc-ltr.check-in {
    background: linear-gradient(
        to left top,
        #46c4f3 50%,
        transparent 50%) no-repeat;
}
.mbsc-datepicker .mbsc-ltr.check-out {
    background: linear-gradient(
        to left top,
        transparent 50%,
        #46c4f3 50%) no-repeat;
}
.mbsc-datepicker .mbsc-rtl.check-in {
    background: linear-gradient(
        to right bottom,
        #46c4f3 50%,
        transparent 50%) no-repeat;
}
.mbsc-datepicker .mbsc-rtl.check-out {
    background: linear-gradient(
        to right bottom,
        transparent 50%,
        #46c4f3 50%) no-repeat;
}
.mbsc-datepicker .mbsc-ltr.check-out,
.mbsc-datepicker .mbsc-rtl.check-in {
    border-color: #46c4f3;
}
.mbsc-datepicker .mbsc-windows.check-in,
.mbsc-datepicker .mbsc-windows.check-out {
    border-color: transparent;
}
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.