---
title: "Javascript Timeline Custom Time Range Backgrounds Example | Mobiscroll"
component: "Timeline"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/timeline/colors-invalids-css-class"
---

# Custom Time Range Backgrounds - JavaScript Timeline demo

Style a Javascript Timeline with disabled periods — add background patterns or labels to mark recurring hours, special days, or blocked slots. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/timeline/colors-invalids-css-class)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/timeline/colors-invalids-css-class)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/timeline/colors-invalids-css-class.md), [Angular](https://demo.mobiscroll.com/angular/timeline/colors-invalids-css-class.md), [React](https://demo.mobiscroll.com/react/timeline/colors-invalids-css-class.md), [Vue](https://demo.mobiscroll.com/vue/timeline/colors-invalids-css-class.md)

## Description

Besides [customizing the background color](https://demo.mobiscroll.com/javascript/scheduler/colored-cell-background) of cells and [setting up invalid/blocked out times](https://demo.mobiscroll.com/javascript/scheduler/time-off-blocked-ranges) you can customize how these blocks and disabled times look by passing a `cssClass` to the [`colors`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-colors) and [`invalid`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-invalid) array elements.

The output could be a custom pattern, custom styling for the labels or anything that you'd like to render as the background. This a great way for adding special meaning to certain days and time ranges.

## What this demo shows

- A desktop weekly timeline where days are arranged horizontally and resources are listed as rows on the left.
- **Header navigation** The month and year label opens date navigation, while the previous and next arrows move between weeks and the Today button returns to the current date.
- **Week view** The strip below the header shows the selected week from Monday to Friday, with the current date highlighted.
- **Time grid** The timeline displays hourly columns from 9 AM to 6 PM.
- **Resources** Multiple resources are shown as separate timeline rows.
- **Current time** A vertical blue line with a time label marks the current time.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Colored time ranges** Predefined customized backgrounds mark specific time grid cells without blocking event labels where the colors option is customized with css. 
- **Lunch marker** Weekdays from Monday to Friday show a grey and white background from 12 PM to 1 PM, with a Lunch break title in the center of the marked cell and these time periods are disabled so the invalid option is customized with css.
- **Event cards** Events appear as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed below the title.
- **Date positioning** Events are positioned by their assigned resource and exact date and time range.
- **Event interaction** Events highlight on hover and show drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** New events can be created by double-clicking the timeline or by clicking and dragging across a time range.
- **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through time and resources.

## Best for

- **Recurring marked hours** Highlighting repeated time ranges such as lunch breaks, maintenance windows, or blocked working hours in a weekly timline.
- **Special dates and observances** Marking public holidays, company observances, or other notable dates directly in the timeline background.
- **Timeline overview screens** Adding background cues that help people scan important hours while keeping event cards visible and readable.
- **Availability context** Showing non-event time markers alongside scheduled events without turning those markers into regular event cards.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`clickToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-eventDelete) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`invalid`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-invalid) - option
- [`cssClass`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-cssClass) - option
- [`colors`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-colors) - option
- [`resources`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-resources) - option
- [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method

## Code

### JS

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

var inst = mobiscroll.eventcalendar('#demo-colors-invalids-css-class', {
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  view: {
    timeline: {
      allDay: false,
      type: 'week',
      startDay: 1,
      endDay: 5,
      startTime: '09:00',
      endTime: '18:00',
    },
  },
  invalid: [
    {
      start: '12:00',
      end: '13:00',
      title: 'Lunch break',
      recurring: {
        repeat: 'weekly',
        weekDays: 'MO,TU,WE,TH,FR',
      },
      cssClass: 'md-lunch-break-class mbsc-flex',
    },
  ],
  colors: [
    {
      resource: 2,
      start: '09:00',
      end: '11:00',
      recurring: {
        repeat: 'weekly',
        weekDays: 'MO',
      },
      cssClass: 'md-rect-bg',
    },
    {
      resource: 1,
      start: '10:00',
      end: '12:00',
      recurring: {
        repeat: 'weekly',
        weekDays: 'WE',
      },
      cssClass: 'md-rect-bg',
    },
    {
      resource: 3,
      start: '14:00',
      end: '17:00',
      recurring: {
        repeat: 'weekly',
        weekDays: 'TH',
      },
      cssClass: 'md-rect-bg',
    },
    {
      resource: 4,
      start: '13:00',
      end: '18:00',
      recurring: {
        repeat: 'weekly',
        weekDays: 'MO',
      },
      cssClass: 'md-rect-bg',
    },
    {
      resource: 1,
      start: '09:00',
      end: '12:00',
      recurring: {
        repeat: 'weekly',
        weekDays: 'FR',
      },
      cssClass: 'md-stripes-bg',
    },
    {
      resource: 3,
      start: '09:00',
      end: '12:00',
      recurring: {
        repeat: 'weekly',
        weekDays: 'TU',
      },
      cssClass: 'md-stripes-bg',
    },
    {
      resource: 5,
      start: '10:00',
      end: '12:00',
      recurring: {
        repeat: 'weekly',
        weekDays: 'MO',
      },
      cssClass: 'md-stripes-bg',
    },
    {
      resource: 5,
      start: '13:00',
      end: '17:00',
      recurring: {
        repeat: 'weekly',
        weekDays: 'TU',
      },
      cssClass: 'md-stripes-bg',
    },
    {
      resource: 1,
      start: '09:00',
      end: '12:00',
      recurring: {
        repeat: 'weekly',
        weekDays: 'TH',
      },
      cssClass: 'md-dots-bg',
    },
    {
      resource: 2,
      start: '06:00',
      end: '12:00',
      recurring: {
        repeat: 'weekly',
        weekDays: 'TU',
      },
      cssClass: 'md-dots-bg',
    },
    {
      resource: 4,
      start: '15:00',
      end: '17:00',
      recurring: {
        repeat: 'weekly',
        weekDays: 'FR',
      },
      cssClass: 'md-dots-bg',
    },
    {
      resource: 4,
      start: '14:00',
      end: '18:00',
      recurring: {
        repeat: 'weekly',
        weekDays: 'WE',
      },
      cssClass: 'md-dots-bg',
    },
  ],
  resources: [
    {
      id: 1,
      color: '#ff0101',
      name: 'Resource A',
    },
    {
      id: 2,
      color: '#239a21',
      name: 'Resource B',
    },
    {
      id: 3,
      color: '#8f1ed6',
      name: 'Resource C',
    },
    {
      id: 4,
      color: '#01adff',
      name: 'Resource D',
    },
    {
      id: 5,
      color: '#d8ca1a',
      name: 'Resource E',
    },
  ],
});

mobiscroll.getJson(
  'https://trial.mobiscroll.com/timeline-events/',
  function (events) {
    inst.setEvents(events);
  },
  'jsonp',
);
```

### HTML

```html
<div id="demo-colors-invalids-css-class"></div>
```

### CSS

```css
.md-lunch-break-class.mbsc-schedule-invalid {
    text-align: center;
    align-items: center;
    font-weight: bold;
    background: repeating-linear-gradient(-45deg, #f3f3f3, #f3f3f3 11px, #e5e5e5 11px, #e5e5e5 22px);
}

.md-stripes-bg {
    background: repeating-linear-gradient(-45deg, #fcfffc, #fcfffc 10px, #eefbec 10px, #eefbec 20px);
}

.md-dots-bg {
    background-image: radial-gradient(#a7a7a7 20%, transparent 20%);
    background-color: #f9f9f9;
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
}

.md-rect-bg {
    opacity: 0.8;
    background-image: repeating-linear-gradient(45deg, #ffd6d6 25%, transparent 25%, transparent 75%, #ffd6d6 75%, #ffd6d6), repeating-linear-gradient(45deg, #ffd6d6 25%, #ffefef 25%, #ffefef 75%, #ffd6d6 75%, #ffd6d6);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
}
```

## Implementation notes

- Use `timeline: { allDay: false, type: 'week', startDay: 1, endDay: 5, startTime: '09:00', endTime: '18:00' }` - a Mon-Fri work week view with the 9am-6pm time range and no all-day row.
- Define 5 resources (A-E), each with `id`, `name`, and `color`.
- Load events from `https://trial.mobiscroll.com/timeline-events/` via JSONP using `getJson(url, callback, 'jsonp')`. In the callback, call `inst.setEvents(events)` for the imperative API.
- **Invalid block** - pass one entry to the `invalid` array: 12:00-13:00 recurring on weekdays (`weekDays: 'MO,TU,WE,TH,FR'`), with `title: 'Lunch break'` and `cssClass: 'md-lunch-break-class mbsc-flex'`. This blocks the lunch slot across all resources and renders it with a custom diagonal grey-stripe pattern, centered bold text.
- **Color overlays** - pass 12 entries to the `colors` array, each targeting a specific resource and time range recurring on one weekday. Assign one of three CSS classes per entry:
  - `md-rect-bg`: a pink checkerboard pattern (4 entries across different resources and weekdays)
  - `md-stripes-bg`: a subtle diagonal green-white stripe pattern (4 entries)
  - `md-dots-bg`: a dot/radial-gradient pattern on a light grey background (4 entries)
- **CSS classes** - implement the four visual patterns:
  - `.md-lunch-break-class.mbsc-schedule-invalid`: `text-align: center; align-items: center; font-weight: bold;` with a diagonal grey `repeating-linear-gradient` background
  - `.md-stripes-bg`: diagonal green-tinted `repeating-linear-gradient`
  - `.md-dots-bg`: `radial-gradient` dot pattern with 20×20px `background-size`
  - `.md-rect-bg`: double `repeating-linear-gradient` at 45° creating a pink checkerboard, `opacity: 0.8`

## 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: [Cell Hover Highlight](https://demo.mobiscroll.com/javascript/timeline/dynamic-resource-column-highlight-on-cell-hover.md) - Add row and column hover highlighting to a Javascript resource timeline — highlight the active resource row and date column on hover.
- Next: [Theme Customization](https://demo.mobiscroll.com/javascript/timeline/themes-ios-material-windows.md) - Style the Javascript Timeline with iOS, Material, or Windows themes — switch light/dark variants, use the theme builder for colors, or apply CSS overrides.