---
title: "JQuery Range Custom Day Styling Example | Mobiscroll"
component: "Range"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/range/half-day-styling"
---

# Custom Day Styling - jQuery Range demo

Style individual day cells in the JQuery date range picker with custom CSS classes and background colors. For jQuery or jQuery Mobile.

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

But sometimes that is not enough. Luckily you can use the `cellCssClass` property of the [`colors`](https://mobiscroll.com/docs/jquery/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 range picker calendar with two months view and custom day cell styling.
- **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.
- **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.

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

## Code

### JS

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

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

## Implementation notes

- Use `controls: ['calendar']`, `select: 'range'`, `display: 'inline'`, and `pages: 2` to show a two-month inline range calendar.
- Use the `colors` option's `cellCssClass` property on single-date entries (e.g. `{ date, cellCssClass: 'check-in' }`, `{ date, cellCssClass: 'check-out' }`) to attach a custom CSS class to specific day cells for fully custom styling beyond `background`/`highlight`.
- Use a `{ start, end, background }` entry in the same `colors` array to fill a date range with a solid background color, independent of the `cellCssClass` entries marking its endpoints.
- Write the actual visual treatment in CSS targeting the custom class combined with Mobiscroll's direction classes, e.g. `.mbsc-datepicker .mbsc-ltr.check-in` / `.mbsc-rtl.check-in` and `.check-out`, using `linear-gradient` backgrounds to render a diagonal half-day split (and a separate `.mbsc-windows.check-in`/`.check-out` override since the Windows theme needs a transparent border instead).
- `date`, `start`, and `end` accept `'YYYY-MM-DD'` strings (or JS Date objects); `cellCssClass` and `background` can be combined with `recurring` rules the same way as fixed dates.

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

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 jquery --trial`.

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

## Related demos

- Previous: [Custom Shaped Day Marks](https://demo.mobiscroll.com/jquery/range/customize-marked-day-shapes.md) - Customize day mark shapes on the JQuery date range picker — show triangles, squares, and dots using CSS overrides or a custom mark CSS class.