---
title: "Javascript Scheduler External Date Navigation Example | Mobiscroll"
component: "Scheduler"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/scheduler/navigate-view-from-external-calendar"
---

# External Date Navigation - JavaScript Scheduler demo

Use a two-pane layout to sync a date picker and Javascript Scheduler — selecting a date navigates the scheduler automatically. Plain JavaScript API.

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

## Description

This example demonstrates how the Scheduler can be navigated externally. Here we have a two-pane layout with a Datepicker on the left and a Scheduler on the right. Changing date on the Datepicker will trigger the date change on the Scheduler.

The Datepicker calls the [`navigate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-navigate) method of the Scheduler in its [`onChange`](https://mobiscroll.com/docs/javascript/datepicker/api#event-onChange) event, while the Scheduler sets the datepicker value with the `setVal` method from its [`onSelectedDateChange`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onSelectedDateChange) event.

## What this demo shows

- This demo shows external navigation between an inline Datepicker and a daily Scheduler view in a two-pane desktop layout.
- **Layout** The Datepicker is displayed in a left sidebar, while the daily Scheduler fills the main area on the right.
- **External navigation** Selecting a date in the Datepicker navigates the Scheduler to the selected date.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between dates and jump back to the current day.
- **Week view** The fixed week strip below the header shows the surrounding dates for quick day switching. Dates highlight on hover, and the selected day is marked with a blue circle.
- **All-day events** All-day events are displayed in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler below the all-day row scrolls vertically through the hours of the selected day.
- **Hover feedback** Hovering the time grid shows a time indicator that follows the pointer in 15-minute increments.
- **Event rendering** 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 above the title.
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Event interactions** Hovering an event highlights it and shows resize and drag handles, indicating that events can be resized or repositioned.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.
- **Event selection** Clicking an event selects and highlights it.
- **Current time** A blue line across the scheduler indicates the current time.

## Best for

- **External calendar controls** Apps where users navigate the Scheduler from a separate calendar control.
- **Desktop scheduling layouts** Interfaces that use a two-pane layout to keep date navigation and the daily schedule visible at the same time.
- **Selection-driven workflows** Scheduling and planning experiences that need clear hover, selection, and active-event states while users browse the calendar.
- **Custom navigation patterns** Products that need to keep multiple calendar components in sync when the visible date changes.

## 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
- [`display`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-display) - option
- [`onChange`](https://mobiscroll.com/docs/javascript/datepicker/api#event-onChange) - event
- [`navigate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-navigate) - method
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`onSelectedDateChange`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onSelectedDateChange) - event
- [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method

## Code

### JS

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

var monthInst = mobiscroll.datepicker('#demo-month', {
  display: 'inline',
  onChange: function (args) {
    dayInst.navigate(args.value);
  },
});

var dayInst = mobiscroll.eventcalendar('#demo-day', {
  view: {
    scheduler: { type: 'day' },
  },
  onSelectedDateChange: function (args) {
    monthInst.setVal(args.date);
  },
});

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

### HTML

```html
  <div class="mds-external-nav-scheduler mbsc-flex">
    <div class="mds-external-nav-dp">
      <div id="demo-month"></div>
    </div>
    <div class="mds-external-nav-ec mbsc-flex-1-1">
      <div id="demo-day"></div>
    </div>
  </div>
```

### CSS

```css
  .mds-external-nav-scheduler {
    height: 100%;
  }

  .mds-external-nav-dp .mbsc-datepicker-inline {
    height: auto;
  }

  .mds-external-nav-ec {
    border-left: 1px solid #ccc;
  }

  @media screen and (max-width: 700px) {
    .mds-external-nav-scheduler {
      display: block;
    }
  }
```

## Implementation notes

- Place a `Datepicker` with `display="inline"` in a sidebar next to the `Eventcalendar`. `display="inline"` renders it as an embedded mini calendar.
- Configure the `Eventcalendar` with `view: { scheduler: { type: 'day' } }`. Load events on mount via `getJson` from a remote JSONP endpoint.
- Bind both components to the same selected date. In `Datepicker`'s `onChange`, update the shared date and sync the `Eventcalendar`; for the imperative API, call `calendarInst.navigate(args.value)`. In `Eventcalendar`'s `onSelectedDateChange`, sync back to the `Datepicker`; for the imperative API, call `datepickerInst.setVal(args.date)`.

## 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: [Event Search Sidebar](https://demo.mobiscroll.com/javascript/scheduler/searching-events-in-sidebar.md) - Add a real-time event search sidebar to the Javascript Scheduler — filter events as you type, with matching results grouped by date in an inline agenda list.