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

# External Date Navigation - Angular Timeline demo

Use a two-panel Angular Timeline navigated by an external date picker — selecting a date syncs the timeline and the picker instantly.

- [Live demo](https://demo.mobiscroll.com/angular/timeline/navigate-view-from-external-calendar)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/timeline/navigate-view-from-external-calendar)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/timeline/navigate-view-from-external-calendar.md), [jQuery](https://demo.mobiscroll.com/jquery/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 and the Timeline binds to the same selected value which makes sure that the displayed dates will be in sync in both of the components. The Datepicker uses the `ngModel` binding and the Timeline its [`selectedDate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-selectedDate) option to update the displayed date on the view.

## 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/angular/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-themeVariant) - option
- [`selectedDate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-selectedDate) - option
- [`display`](https://mobiscroll.com/docs/angular/datepicker/api#opt-display) - option
- [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option
- [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option
- [`resources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources) - option

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  MbscCalendarEvent,
  MbscDateType,
  MbscEventcalendarView,
  MbscModule,
  MbscResource,
  setOptions,
} from '@mobiscroll/angular';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent implements OnInit {
  constructor(private http: HttpClient) {}

  dayView: MbscEventcalendarView = { timeline: { type: 'day' } };
  myEvents: MbscCalendarEvent[] = [];
  selectedDate: MbscDateType = new Date();
  myResources: MbscResource[] = [
    { id: 1, name: 'Resource 1', color: 'red' },
    { id: 2, name: 'Resource 2', color: 'orange' },
    { id: 3, name: 'Resource 3', color: 'blue' },
  ];

  ngOnInit(): void {
    this.http.jsonp<MbscCalendarEvent[]>('https://trial.mobiscroll.com/filter-resource-events/', 'callback').subscribe((resp) => {
      this.myEvents = resp;
    });
  }
}
```

### Template

```html
<div class="mds-external-nav-timeline mbsc-flex">
  <div class="mds-external-nav-dp">
    <mbsc-datepicker [(ngModel)]="selectedDate" display="inline"></mbsc-datepicker>
  </div>
  <div class="mds-external-nav-ec mbsc-flex-1-1">
    <mbsc-eventcalendar [(selectedDate)]="selectedDate" [data]="myEvents" [view]="dayView" [resources]="myResources"></mbsc-eventcalendar>
  </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-calendar {
    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-angular.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 angular
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation

## Related demos

- Previous: [Event Search Sidebar](https://demo.mobiscroll.com/angular/timeline/searching-events-in-sidebar.md) - Search and filter Angular 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/angular/timeline/role-based-views-with-different-permission.md) - Implement role-based access in a Angular Timeline: managers edit all tasks, employees edit their own, and clients have read-only access.