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

# External Date Navigation - JavaScript Timeline demo

Use a two-panel Javascript Timeline navigated by an external date picker — selecting a date syncs the timeline and the picker instantly. Plain JS api for usage everywhere.

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

## Description

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

The Datepicker calls the [`navigate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-navigate) method of the Timeline in its [`onChange`](https://mobiscroll.com/docs/javascript/datepicker/api#event-onChange) event, while the Timeline 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

- A desktop daily timeline where hours are arranged horizontally and resources are listed as rows on the left.
- **Layout** The datepicker is displayed in a left sidebar, while the daily timeline fills the main area on the right.
- **External navigation** Selecting a date in the datepicker navigates the timeline to the selected date.
- **Header navigation** The month and year label opens date navigation, while the previous and next arrows move between weeks and the Today button returns to the current date.
- **Day view** The strip below the header shows the selected day, with the current date highlighted. The timeline displays hourly columns from 12 AM to 12 PM.
- **Resources** Multiple resources are shown as separate timeline rows.
- **Current time** A vertical blue line with a time label marks the current time.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event cards** Events are shown as colored cards with a left color stripe, a bold title, and the exact time range.
- **Date positioning** Events are positioned by their assigned resource and exact date and time range.
- **Event interaction** Events highlight on hover and show drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** New events can be created by double-clicking the timeline or by clicking and dragging across a time range.
- **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through time and resources.

## Best for

- **External calendar controls** Apps where users navigate the timeline from a separate calendar control.
- **Desktop timeline layouts** Interfaces that use a two-pane layout to keep date navigation and the daily timeline 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
- [`resources`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-resources) - 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: {
    timeline: { type: 'day' },
  },
  resources: [
    { id: 1, name: 'Resource 1', color: 'red' },
    { id: 2, name: 'Resource 2', color: 'orange' },
    { id: 3, name: 'Resource 3', color: 'blue' },
  ],
  onSelectedDateChange: function (args) {
    monthInst.setVal(args.date);
  },
});

mobiscroll.getJson(
  'https://trial.mobiscroll.com/filter-resource-events/',
  function (events) {
    dayInst.setEvents(events);
  },
  'jsonp',
);
```

### HTML

```html
  <div class="mds-external-nav-timeline 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-timeline {
    height: 100%;
  }

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

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

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

## Implementation notes

- Place a `Datepicker` with `display="inline"` in a sidebar next to the timeline `Eventcalendar`. No other `Datepicker` options are needed - `display="inline"` renders it as an embedded mini calendar.
- Configure the `Eventcalendar` with `view: { timeline: { type: 'day' } }` and 3 resources with `id`, `name`, and a named color (red, orange, blue).
- Load events once on mount via `getJson` from `https://trial.mobiscroll.com/filter-resource-events/` (Angular: `HttpClient.jsonp`).
- **Sync between the two components** - the approach differs by framework:
  - **React/Vue**: Hold a shared `selectedDate` state/ref initialised to `new Date()`. Pass it as `value` to the `Datepicker` and as `selectedDate` to the `Eventcalendar`. In the `Datepicker`'s `onChange`, update `selectedDate` from `args.value`. In the `Eventcalendar`'s `onSelectedDateChange`, update it from `args.date`. Changing either component updates the shared value and keeps both in sync.
  - **Angular**: Bind both components to the same `selectedDate` class property using two-way binding - `[(ngModel)]="selectedDate"` on `mbsc-datepicker` and `[(selectedDate)]="selectedDate"` on `mbsc-eventcalendar`. No explicit event handlers are needed; Angular's two-way binding handles sync automatically.
  - **JS/jQuery**: In the `Datepicker`'s `onChange`, call `calendarInst.navigate(args.value)` to drive the timeline forward. In the `Eventcalendar`'s `onSelectedDateChange`, call `datepickerInst.setVal(args.date)` to update the mini calendar when the user navigates the timeline directly.

## 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/timeline/searching-events-in-sidebar.md) - Search and filter Javascript timeline events in real time — results appear in a sidebar agenda as you type, clicking the event navigates to date.
- Next: [Role-Based Access](https://demo.mobiscroll.com/javascript/timeline/role-based-views-with-different-permission.md) - Implement role-based access in a Javascript Timeline: managers edit all tasks, employees edit their own, and clients have read-only access.