---
title: "Javascript Calendar Day Cell Custom Styling Example | Mobiscroll"
component: "Calendar"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/calendar/half-day-styling"
---

# Day Cell Custom Styling - JavaScript Calendar demo

Apply custom CSS classes to Javascript date picker day cells to highlight date ranges, recurring dates, or individual days. Plain JS api for usage everywhere.

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

## Description

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](https://demo.mobiscroll.com/javascript/calendar/dots-colors-labels).

But sometimes that is not enough. Luckily you can use the `cellCssClass` property of the [`colors`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-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.

## What this demo shows

- An inline date picker calendar with a month view and custom day cell styling.
- **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 move between months.
- **Month view** A fixed weekday header displays abbreviated day names from Sunday through Saturday, with dates arranged in a grid below.
- **Month navigation** Drag the calendar horizontally to move between months.
- **Day cell states** Hovering over a day highlights its number with a gray background. Selecting a day highlights its number with a blue background. The current date remains highlighted in blue when another date is selected.
- **Custom day cell styling** The `cellCssClass` property and a custom cell `background` highlight a date range and distinguish its check-in and check-out dates.
- **Adjacent months** Dates from the previous and next months use a muted style. Selecting one moves the calendar to the corresponding month.

## Best for

- **Accommodation booking** Distinguishing check-in and check-out dates within a selected stay.
- **Availability calendars** Marking available, unavailable, or partially available dates with custom styles.
- **Date-based pricing** Highlighting dates with special rates, discounts, or pricing tiers.
- **Deadlines and milestones** Drawing attention to due dates, release dates, or other important days.

## Tutorial

```js
colors: [
    {
        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;
}
```

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

## Code

### JS

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

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

### HTML

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

### CSS

```css
.mbsc-datepicker .mbsc-calendar-cell.mbsc-ltr.check-in {
    background: linear-gradient( to left top, #46c4f3 50%, transparent 50%) no-repeat;
}

.mbsc-datepicker .mbsc-calendar-cell.mbsc-ltr.check-out {
    background: linear-gradient( to left top, transparent 50%, #46c4f3 50%) no-repeat;
}

.mbsc-datepicker .mbsc-calendar-cell.mbsc-rtl.check-in {
    background: linear-gradient( to right bottom, #46c4f3 50%, transparent 50%) no-repeat;
}

.mbsc-datepicker .mbsc-calendar-cell.mbsc-rtl.check-out {
    background: linear-gradient( to right bottom, transparent 50%, #46c4f3 50%) no-repeat;
}

.mbsc-datepicker .mbsc-calendar-cell.mbsc-ltr.check-out,
.mbsc-datepicker .mbsc-calendar-cell.mbsc-rtl.check-in {
    border-color: #46c4f3;
}

.mbsc-datepicker .mbsc-calendar-cell.mbsc-windows.check-in,
.mbsc-datepicker .mbsc-calendar-cell.mbsc-windows.check-out {
    border-color: transparent;
}
```

## Implementation notes

- Use `controls: ['calendar']` and `display: 'inline'` on a single inline `Datepicker`.
- Pass an array to `colors`. For half-colored "check-in"/"check-out" cells, use single-date entries with `cellCssClass` (e.g. `{ date: ..., cellCssClass: 'check-in' }`, `{ date: ..., cellCssClass: 'check-out' }`) instead of `background`/`highlight`. For a solid-colored range between them, use a `{ start, end, background }` entry.
- Define the diagonal half-day look with CSS `linear-gradient` backgrounds targeted directly at the LTR/RTL direction class combined with the custom class, e.g. `.mbsc-datepicker .mbsc-ltr.check-in { background: linear-gradient(to left top, #46c4f3 50%, transparent 50%) no-repeat; }` and the inverted-stop gradient (`transparent 50%, #46c4f3 50%`) for `.mbsc-ltr.check-out`; the `.mbsc-rtl.check-in`/`.mbsc-rtl.check-out` variants use a `to right bottom` gradient direction instead of `to left top`. Reset `border-color: transparent` on `.mbsc-datepicker .mbsc-windows.check-in`/`.mbsc-windows.check-out` since the Windows theme's default cell border would otherwise show a line through the diagonal.
- Also set `border-color: #46c4f3` on the LTR "check-out"/RTL "check-in" class (`.mbsc-datepicker .mbsc-ltr.check-out`, `.mbsc-datepicker .mbsc-rtl.check-in`) to visually connect adjacent half-day cells into one continuous stay.

## 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: [Mark Days with Custom Shapes](https://demo.mobiscroll.com/javascript/calendar/customize-marked-day-shapes.md) - Add custom-shaped day markers to a Javascript calendar date picker — use the marked option for colored dots, then override styles.