---
title: "Javascript Calendar Touch & Desktop Layout Example | Mobiscroll"
component: "Calendar"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/calendar/mobile-desktop-usage"
---

# Touch & Desktop Layout - JavaScript Calendar demo

Set a Javascript date picker to render in touch-optimized or desktop mode — link it to an input, trigger it with a button, or embed it inline. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/calendar/mobile-desktop-usage)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/datepicker/calendar/mobile-desktop-usage)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/calendar/mobile-desktop-usage.md), [Angular](https://demo.mobiscroll.com/angular/calendar/mobile-desktop-usage.md), [React](https://demo.mobiscroll.com/react/calendar/mobile-desktop-usage.md), [Vue](https://demo.mobiscroll.com/vue/calendar/mobile-desktop-usage.md)

## Description

Use the calendar for both mobile and desktop or set it up responsively.

The main difference between the two rendering modes is how the picker is laid out. Set the `touchUi` option to `false` and the component shows up suitable for larger screens and pointer interaction while setting it to `true` renders it suitable for touch screens.

Use the date picker on an existing form field, custom input or use it on Mobiscroll form fields. You can also embed it directly into your page. When linked to an input, the component will be shown on focus or when someone clicks on the field. Alternatively, you can leave the input editable and show the component only on a button click.

**Handle different screen sizes by setting it up responsively** [Check out the responsive demo →](https://demo.mobiscroll.com/javascript/datetime/responsive)

## What this demo shows

- Shows four monthly date picker examples for selecting a single date in touch and desktop layouts.
- **Date picker with inputs** The first example opens the picker when the user focuses or clicks a standard input. The second opens it only from the Show picker button next to the input. The third uses a Mobiscroll input. 
- **Input behavior** In the three input-based examples, the picker opens at the bottom of the container over a darkened backdrop. Clicking outside the picker closes it. 
- **Inline date picker** The fourth example embeds the date picker directly in the page without an input by using inline display mode.
- **Header navigation** The month and year label in the top left opens a month and year picker. The blue previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header displays abbreviated day names from Sunday through Saturday, with the dates arranged in a grid below it.
- **Month navigation** The month can be changed by clicking and dragging the calendar left or right.
- **Day cell states** Hovering a day highlights the day number with a gray background. Selecting a day highlights the day number with a blue background. The current date is highlighted by default and remains blue when the user selects another date.
- **Adjacent months** Dates from the previous and next months appear with a muted style. Selecting one navigates the calendar to the corresponding month. 
- **Footer actions** In the input-based examples, the gray Cancel button discards the change, while the blue Set button confirms the selected date.
- **Input value** In the input-based examples, confirming a date with Set displays the selected value in the input using a month, day, and year format.

## Best for

- **Booking systems** Letting users choose a single date as part of a reservation flow.
- **Appointment creation** Selecting a date when scheduling an appointment.
- **Travel planning** Choosing dates for travel-related forms and workflows.
- **Event management** Assigning a calendar date when creating or updating an event.
- **Responsive forms** Supporting single-date selection across touch and desktop layouts.

## Tutorial

```html
<input id="input-picker" />
```

```js
mobiscroll.datepicker('#input-picker', {
    controls: ['calendar'],
    touchUi: true
});
```

```html
<input id="button-picker" />
<button id="show-picker">Show picker</button>
```

```js
mobiscroll.datepicker('#button-picker', {
    controls: ['calendar'],
    touchUi: true,
    showOnClick: false,
    showOnFocus: false
});

document
    .getElementById('show-picker')
    .addEventListener('click', function () {
        instance.open();
        return false;
    });
```

```html
<label>
    <input id="mobi-picker" mbsc-input />
</label>
```

```js
mobiscroll.datepicker('#mobi-picker', {
    controls: ['calendar'],
    touchUi: true
});
```

```html
<div id="inline-picker"></div>
```

```js
mobiscroll.datepicker('#inline-picker', {
    controls: ['calendar'],
    display: 'inline',
    touchUi: true
});
```

## 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
- [`showOnClick`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-showOnClick) - option
- [`showOnFocus`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-showOnFocus) - option
- [`display`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-display) - option
- [`open`](https://mobiscroll.com/docs/javascript/datepicker/api#method-open) - method

## Code

### JS

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

mobiscroll.datepicker('#demo-mobile-picker-input', {
  controls: ['calendar'],
});

var instance = mobiscroll.datepicker('#demo-mobile-picker-button', {
  controls: ['calendar'],
  showOnClick: false,
  showOnFocus: false,
});

instance.setVal(new Date(), true);

mobiscroll.datepicker('#demo-mobile-picker-mobiscroll', {
  controls: ['calendar'],
});

mobiscroll.datepicker('#demo-mobile-picker-inline', {
  controls: ['calendar'],
  display: 'inline',
});

document.getElementById('show-mobile-date-picker').addEventListener('click', function () {
  instance.open();
  return false;
});
```

### HTML

```html
<div class="mbsc-grid">
    <div class="mbsc-form-group">
        <div class="mbsc-row">
            <div class="mbsc-col-12">
                <div class="mbsc-txt-muted md-mobile-picker-header">Use the picker with any inputs & show on focus/click</div>
                <input id="demo-mobile-picker-input" class="md-mobile-picker-input" placeholder="Please Select..." />
            </div>
        </div>
    </div>
    <div class="mbsc-form-group">
        <div class="mbsc-row">
            <div class="mbsc-col-12 mbsc-txt-muted md-mobile-picker-header">Disable <code>onClick/onFocus</code> and only show on button</div>
            <div class="mbsc-col-8">
                <input id="demo-mobile-picker-button" class="md-mobile-picker-input" />
            </div>
            <div class="mbsc-col-4">
                <button mbsc-button data-variant="outline" data-color="primary" id="show-mobile-date-picker" class="md-mobile-picker-button">Show picker</button>
            </div>
        </div>
    </div>
    <div class=" mbsc-form-group">
        <div class="mbsc-row">
            <div class="mbsc-col-12">
                <div class="mbsc-txt-muted md-mobile-picker-header">Use the picker with a Mobiscroll input</div>
                <label class="md-mobile-picker-box-label">
                <input id="demo-mobile-picker-mobiscroll" mbsc-input data-label-style="stacked" data-input-style="box" placeholder="Please Select..." />
            </label>
            </div>
        </div>
    </div>
    <div class="mbsc-txt-muted md-mobile-picker-header">Use the picker inline in any page</div>
</div>
<div class="md-mobile-picker-inline">
    <div id="demo-mobile-picker-inline"></div>
</div>
```

### CSS

```css
.md-mobile-picker-header {
    font-size: 14px;
}

input.md-mobile-picker-input {
    color: initial;
    width: 100%;
    padding: 10px;
    margin: 6px 0 12px 0;
    border: 1px solid #ccc;
    border-radius: 0;
    font-family: arial, verdana, sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    -webkit-appearance: none;
}

.md-mobile-picker-button.mbsc-button {
    font-size: 13px;
    padding: 0 15px;
    line-height: 36px;
    float: right;
    margin: 6px 0;
    width: 100%;
}

.mbsc-col-no-padding {
    padding-left: 0;
}

.md-mobile-picker-box-label.mbsc-textfield-wrapper-box,
.md-mobile-picker-box-label .mbsc-textfield-wrapper-box,
.md-mobile-picker-inline {
    margin: 6px 0 12px 0;
}
```

## Implementation notes

- **Bind to a plain input**: Angular/Vue/JS/jQuery attach the picker directly to an existing `<input>` with `controls: ['calendar']`/`[controls]="['calendar']"`; React instead sets `inputComponent="input"` with `inputProps` (`className`, `placeholder`) so the `Datepicker` renders into a plain `<input>` - the picker opens on focus/click by default in all frameworks.
- **Trigger-button only**: set `showOnClick: false` and `showOnFocus: false` so the input no longer opens the picker on its own; the picker can then be opened programmatically. JS/jQuery call the instance's imperative `open()` method; React drives visibility with `isOpen`/`onClose` state and Vue with `:isOpen`/`@close`; Angular grabs a template ref (`#picker="mobiscroll"`) and calls `.open()` on it.
- **Mobiscroll-styled input**: render the `Datepicker`/`mbsc-datepicker` component itself (instead of binding to a plain `<input>`) with `inputStyle: 'box'` so it shows its own styled input, no separate input markup needed.
- **Inline, no input**: set `display: 'inline'` on a plain container element instead of an input to embed the calendar directly in the page.
- `touchUi` can be set to control whether the picker renders in touch-optimized (mobile) or desktop mode, across all frameworks.

## 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

- Next: [Input Field or Inline Embed](https://demo.mobiscroll.com/javascript/calendar/usage-on-input-or-inline.md) - Attach the Javascript calendar date picker to a form input or embed it inline without an input — supports generated and custom inputs.