---
title: "Javascript Range Range Picker Customization Example | Mobiscroll"
component: "Range"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/range/week-month-view-scrolling-direction"
---

# Range Picker Customization - JavaScript Range demo

Show multiple months or weeks in the Javascript date range picker calendar — set scroll direction, display count, week numbers, and outer day visibility. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/range/week-month-view-scrolling-direction)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/datepicker/range/week-month-view-scrolling-direction)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/range/week-month-view-scrolling-direction.md), [Angular](https://demo.mobiscroll.com/angular/range/week-month-view-scrolling-direction.md), [React](https://demo.mobiscroll.com/react/range/week-month-view-scrolling-direction.md), [Vue](https://demo.mobiscroll.com/vue/range/week-month-view-scrolling-direction.md)

## Description

The calendar view can be customized with a couple of different parameters:

- **Month or week calendar** - switch between `month` and `week` through the [`calendarType`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-calendarType) option and set the number of months or weeks through the [`pages`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-pages) and [`calendarSize`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-calendarSize) options
- **Set a month change direction** - specify `'horizontal'` or `'vertical'` in the [`calendarScroll`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-calendarScroll) option
- **Show week numbers** - set the [`showWeekNumbers`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-showWeekNumbers) to true and show a week counter starting from the first week of every year
- **Hide the outer days of a month** - set the [`showOuterDays`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-showOuterDays) to false in case you don't want to see days from previous and next months

## What this demo shows

- This demo shows independently configurable calendar view options for the date range picker.
- **Month or week view** Users can select if they want to show a month or a week view, by default the month is selected and if they want to display one or two months or weeks.
- **Week numbers** The `showWeekNumbers` option toggles a week counter column on the left side of the grid. Week numbers are hidden by default.
- **Scrolling direction** The `calendarScroll` option controls whether users move between months horizontally, which is the default, or vertically.
- **Outer days** The calendar can display days from the previous and next months at the edges of the grid. They are shown by default with horizontal scrolling and hidden by default with vertical scrolling. The `showOuterDays` option explicitly overrides either default.
- **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.

## Best for

- **Scrolling direction** Date range pickers that need horizontal month paging in compact interfaces or vertical month browsing in a scrolling layout.
- **Week-based planning** Workflows where users refer to dates by week number, such as weekly scheduling, reporting, or delivery planning.
- **Focused month views** Calendars that hide outer days to emphasize the current month and reduce visual clutter.
- **Continuous date context** Calendars that show outer days so users can see adjacent dates without changing months.

## Tutorial

### Configure month or week view

- (x) Month view with One Two months
- ( ) Week view with One Two weeks

### Show annual week numbers

- [ ] Week counter is visible

### Set a scrolling direction

- ( ) Vertical
- (x) Horizontal

### Show days of outer months

- [x] Outer days are visible

```js
mobiscroll.datepicker('#picker', {
    select: 'range',
    calendarType: 'month',
    pages: 1,
    showWeekNumbers: false,
    calendarScroll: 'horizontal',
    showOuterDays: true
});
```

With "Week view with weeks":

```js
mobiscroll.datepicker('#picker', {
    select: 'range',
    calendarType: 'week',
    calendarSize: 1,
    showWeekNumbers: false,
    calendarScroll: 'horizontal'
});
```

With "Two":

```js
mobiscroll.datepicker('#picker', {
    select: 'range',
    calendarType: 'month',
    pages: 2,
    showWeekNumbers: false
});
```

With "One":

```js
mobiscroll.datepicker('#picker', {
    select: 'range',
    calendarType: 'week',
    calendarSize: 1,
    showWeekNumbers: false,
    calendarScroll: 'horizontal'
});
```

With "Two":

```js
mobiscroll.datepicker('#picker', {
    select: 'range',
    calendarType: 'week',
    calendarSize: 2,
    showWeekNumbers: false,
    calendarScroll: 'horizontal'
});
```

With "Vertical":

```js
mobiscroll.datepicker('#picker', {
    select: 'range',
    calendarType: 'month',
    pages: 1,
    showWeekNumbers: false,
    calendarScroll: 'vertical',
    showOuterDays: false
});
```

## 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
- [`select`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-select) - option
- [`display`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-display) - option
- [`calendarType`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-calendarType) - option
- [`pages`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-pages) - option
- [`showWeekNumbers`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-showWeekNumbers) - option
- [`showOuterDays`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-showOuterDays) - option
- [`calendarSize`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-calendarSize) - option
- [`calendarScroll`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-calendarScroll) - option

## Code

### JS

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

mobiscroll.datepicker('#demo-month', {
  controls: ['calendar'],
  select: 'range',
  display: 'inline',
  calendarType: 'month',
  pages: 2,
  showWeekNumbers: true,
  showOuterDays: true,
});

mobiscroll.datepicker('#demo-week', {
  controls: ['calendar'],
  select: 'range',
  display: 'inline',
  calendarType: 'week',
  calendarSize: 2,
  showWeekNumbers: true,
  calendarScroll: 'vertical',
});
```

### HTML

```html
<div id="demo-month"></div>
<div id="demo-week"></div>
```

## Implementation notes

- Set `select: 'range'` and `controls: ['calendar']` on `Datepicker`; `display: 'inline'` embeds the calendar directly in the page for this demo.
- `calendarType` switches between `'month'` (default) and `'week'` view.
- In month view, `pages` sets the number of months shown side by side (e.g. `pages: 1` or `pages: 2`); in week view, `calendarSize` sets the number of weeks shown (e.g. `calendarSize: 1` or `calendarSize: 2`) - only one of the two options applies depending on `calendarType`, the other is passed as `undefined`.
- `showWeekNumbers: true` adds a week-number column to the calendar grid; it defaults to `false`.
- `calendarScroll` sets the month/week paging direction to `'horizontal'` (default) or `'vertical'`.
- `showOuterDays` controls whether dates from the previous/next month appear at the grid edges; it defaults to `true` for horizontal scrolling and `false` for vertical scrolling, and can be set explicitly to override either default.
- All of these options can be changed at runtime on an existing instance via an option update (e.g. `.setOptions({ calendarType, pages, calendarSize, showWeekNumbers, calendarScroll, showOuterDays })` in JS/jQuery), without recreating the picker.

## 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: [Date & Time Range Picker](https://demo.mobiscroll.com/javascript/range/date-time-range.md) - Pick start and end date-times with the Javascript range picker — choose from calendar, time grid, or date-time scroller, with single or split input layouts.
- Next: [Label Customization](https://demo.mobiscroll.com/javascript/range/customizing-labels-selection.md) - Override the start/end date labels on the Javascript date range picker — use “Check in/Check out” for hotels or “Outbound/Return” for flights, or hide them.