---
title: "Javascript Scheduler Custom Date Range View Example | Mobiscroll"
component: "Scheduler"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/scheduler/display-multiple-days-weeks"
---

# Custom Date Range View - JavaScript Scheduler demo

Configure the Javascript Scheduler with a custom range size — set a reference date to control rolling or fixed multi-period paging. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/scheduler/display-multiple-days-weeks)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/scheduler/display-multiple-days-weeks)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/scheduler/display-multiple-days-weeks.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/display-multiple-days-weeks.md), [React](https://demo.mobiscroll.com/react/scheduler/display-multiple-days-weeks.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/display-multiple-days-weeks.md)

## Description

The scheduler has three types: `day`, `week` and `month`. Use the `size` property of the configuration object to set the length of the range.

Multiples of days, weeks and months are supported. The reference date, controlled through the `refDate` option, is today by default, but it can be set to any date, like the first day of the month, or the first day of the year. The `refDate` serves as the start of the reference range. From that point on you can navigate forward and backward.

A couple of examples:

- **Rolling two weeks** - use `type: 'day'` and `size: 14`
- **Rolling ten days** - use `type: 'day'` and `size: 10`
- **Two weeks (starting with Sun/Mon)** - use `type: 'week'` and `size: 2`
- **Quarter view, starting from January** - use `type: 'month'` and `size: 3` with `refDate: '2021-01-01'`
- **Rolling three months** - use `type: 'month'` and `size: 3`
- **Year view** - use `type: 'month'` and `size: 12` with `refDate: '2021-01-01'`

## What this demo shows

- A desktop scheduler layout with a custom date range in the header, a fixed all-day row below it, and a vertically scrollable time grid for the selected range.
- **Range controls** A configuration panel beside the scheduler lets users choose a numeric size from a select dropdown and switch between `Day`, `Week`, and `Month`, with `Day` selected by default.
- **Range size** The controls define how many days, weeks, or months are shown in the scheduler.
- **Initial view date** The first checkable option is titled `If unset, the initial view date is today`. When enabled, users can set the initial view date with the `Set the initial view date to` checkbox and date picker.
- **Reference date** The second checkable option is titled `If unset, the reference date is today`. When enabled, users can set the date used for paging calculations with the `Paging is calculated from` checkbox and date picker.
- **Header navigation** The custom date range on the left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day.
- **Custom range view** The fixed strip below the header displays the days in the selected range, with the current date highlighted and weekends shown with grey backgrounds.
- **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler grid scrolls vertically through the hours of the selected custom range.
- **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **Event overlapping** Overlapping events are displayed side by side so every event remains visible.
- **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event interaction** Hovering over events highlights them and displays drag and resize handles for editing.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** Users can create events by double-clicking the grid or by clicking and dragging across a time range.

## Best for

- **Event planning** - Planning projects, releases, or roadmaps that span multiple weeks or months.
- **Team management** -  Managing teams that need visibility into schedules beyond a single week.
- **Resource allocation** - Resource allocation and capacity planning across extended time periods.
- **Workload distribution** - Comparing workload distribution and availability across larger date ranges.

## Tutorial

### Configure the page size

- Display `15`
- (x) Day
- ( ) Week
- ( ) Month

### If unset, the initial view date is today

- [ ] Set the initial view date to

`10/01/2026`

### If unset, the [reference date](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-refDate) is today

- [ ] Paging is calculated from

`01/01/2026`

```js
mobiscroll.eventcalendar('#calendar', {
  view: {
    scheduler: { 
      type: 'day',
      size: 15
    }
  }
});
```

With "Week":

```js
mobiscroll.eventcalendar('#calendar', {
  view: {
    scheduler: { 
      type: 'week',
      size: 4
    }
  }
});
```

With "Month":

```js
mobiscroll.eventcalendar('#calendar', {
  view: {
    scheduler: { 
      type: 'month',
      size: 3
    }
  }
});
```

With "Set the initial view date to" on:

```js
mobiscroll.eventcalendar('#calendar', {
  view: {
    scheduler: { 
      type: 'day',
      size: 15
    }
  },
  selectedDate: '2026-10-01'
});
```

With "Paging is calculated from" on:

```js
mobiscroll.eventcalendar('#calendar', {
  view: {
    scheduler: { 
      type: 'day',
      size: 15
    }
  },
  refDate: '2026-01-01'
});
```

## 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
- [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method

## Code

### JS

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

var calendar = mobiscroll.eventcalendar('#demo-display-multiple-days-weeks-months', {
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  view: {
    scheduler: {
      type: 'week',
      size: 2,
    },
  },
});

mobiscroll.getJson(
  'https://trial.mobiscroll.com/events/?vers=5',
  function (events) {
    calendar.setEvents(events);
  },
  'jsonp',
);
```

### HTML

```html
<div id="demo-display-multiple-days-weeks-months"></div>
```

## Implementation notes

- Use `view: { scheduler: { type: 'week', size: 2 } }` - a two-week rolling scheduler. The `size` property multiplies the base `type` unit: `type: 'day'` + `size: 14` = 14-day rolling view, `type: 'month'` + `size: 3` = rolling quarter view.
- `refDate` sets the anchor point for navigation. It defaults to today, producing a "rolling" view that always starts relative to the current date. Set it to a fixed date (e.g., `'2024-01-01'`) to lock navigation to calendar boundaries such as a full quarter or year.
- Load events from `https://trial.mobiscroll.com/events/?vers=5` via JSONP using `getJson(url, callback, 'jsonp')`. React/Angular/Vue: assign the fetched array to the state/property bound to the `data` prop. JS/jQuery (imperative API): call `inst.setEvents(events)` in the callback.

## 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: [Limit Overlapping Events](https://demo.mobiscroll.com/javascript/scheduler/control-number-of-concurrently-shown-events.md) - Set a max count or auto-fit overlapping events to available space in the Javascript Scheduler — useful for appointment-heavy views.
- Next: [Hide All-Day Section](https://demo.mobiscroll.com/javascript/scheduler/disable-all-day-events.md) - Hide the all-day row in the Javascript Scheduler to show only timed events — ideal for appointment booking, service scheduling, or shift-based views.