---
title: "JQuery Calendar Scroll Direction, Week Numbers & Outer Days Example | Mobiscroll"
component: "Calendar"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/calendar/month-change-direction-week-numbers-outer-days"
---

# Scroll Direction, Week Numbers & Outer Days - jQuery Calendar demo

Configure a JQuery calendar date picker — set horizontal or vertical month scrolling, show week numbers, and control whether outer days appear. For jQuery or jQuery Mobile.

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

## Description

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

- **Set a month change direction** - specify `'horizontal'` or `'vertical'` in the [`calendarScroll`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-calendarScroll) option
- **Set the first day of the week** - specify the first day of the week using the [`firstDay`](https://mobiscroll.com/docs/jquery/datepicker/api#localization-firstDay) option, where Sunday is 0, Monday is 1, etc.
- **Show week numbers** - set the [`showWeekNumbers`](https://mobiscroll.com/docs/jquery/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/jquery/datepicker/api#opt-showOuterDays) to false in case you don't want to see days from previous and next months

## What this demo shows

- The demo presents independently configurable calendar view options for the date picker.
- **Scrolling direction** The `calendarScroll` option controls whether users move between months horizontally, which is the default, or vertically.
- **First day of the week** The `firstDay` option sets which day appears in the first column of the calendar grid. When it is not set, the calendar follows the locale default, such as Sunday for `en-US` or Monday for `de-DE`.
- **Week numbers** The `showWeekNumbers` option toggles a week counter column on the left side of the grid. Week numbers are hidden by default.
- **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.

## Best for

- **Scrolling direction** Date pickers that need horizontal month paging in compact interfaces or vertical month browsing in a scrolling layout.
- **Regional calendars** Date pickers that need the first day of the week to match a locale, workplace convention, or regional calendar format.
- **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

### Set a scrolling direction

- ( ) Vertical
- (x) Horizontal
- Set the first day of week to `Auto (set by locale)`

### Annual week numbers

- [ ] Show week counter

### Outer days (Hidden by default for vertical, visible by default for horizontal)

- [x] Show outer days

```js
$('#picker').mobiscroll().datepicker({
    calendarScroll: 'horizontal',
    showWeekNumbers: false,
    showOuterDays: true
});
```

With "Vertical":

```js
$('#picker').mobiscroll().datepicker({
    calendarScroll: 'vertical',
    showWeekNumbers: false,
    showOuterDays: false
});
```

With "Sunday":

```js
$('#picker').mobiscroll().datepicker({
    calendarScroll: 'horizontal',
    firstDay: 0,
    showWeekNumbers: false,
    showOuterDays: true
});
```

With "Monday":

```js
$('#picker').mobiscroll().datepicker({
    calendarScroll: 'horizontal',
    firstDay: 1,
    showWeekNumbers: false,
    showOuterDays: true
});
```

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

## Code

### JS

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

$(function () {
  $('#demo')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      display: 'inline',
      calendarScroll: 'horizontal',
      showWeekNumbers: true,
      showOuterDays: true,
    });
});
```

### HTML

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

## Implementation notes

- `calendarScroll`, `firstDay`, `showWeekNumbers`, and `showOuterDays` can all be updated at runtime via option updates on a single instance.
- `calendarScroll` controls the month-change direction; accepts `'vertical'` or `'horizontal'` (defaults to `'horizontal'`).
- `firstDay` can be set to `0` (Sunday) or `1` (Monday), or left unset (default) so the locale decides.
- `showWeekNumbers` toggles the week-number column; off by default.
- `showOuterDays` toggles display of the outer (previous/next month) days; on by default. The default value of `showOuterDays` differs by `calendarScroll` direction (hidden for vertical, visible for horizontal).

## 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: [Colored Dots, Highlights & Labels](https://demo.mobiscroll.com/jquery/calendar/dots-colors-labels.md) - Mark calendar dates with colored dots, background highlights, or text labels — for specific dates, date ranges, or recurring rules.