---
title: "Angular Event calendar External Date Picker Navigation Example | Mobiscroll"
component: "Event calendar"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/eventcalendar/navigate-from-external-date-picker"
---

# External Date Picker Navigation - Angular Event calendar demo

Use a Angular event calendar with an external date picker in two-pane layout — date selection navigates the calendar and keeps both in sync.

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

## Description

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

The Datepicker and the Calendar 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 Calendar its [`selectedDate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-selectedDate) option to update the displayed date on the view.

## What this demo shows

- This demo shows external navigation between a date picker and a month view event calendar in a two-pane desktop layout.
- **Layout** The date picker is displayed in a separate pane on the left, while the event calendar month view fills the right side.
- **External navigation** Selecting a date in the date picker updates the visible date on the event calendar.
- **Event labels** Days with events display labels directly inside the month cells. Labels use different styles and colors to distinguish all-day events, multi-day, and timed events.
- **Overflow handling** The number of visible event labels depends on the available vertical space in the day cell. Additional events are moved into a popover and indicated by an `X more` label, where `X` represents the number of hidden events. Clicking it opens a popover that lists the remaining events for that day.
- **Label interaction** Hovering over or clicking an event label selects it and highlights the selected label.
- **Day cell states** Hovering a day cell highlights the day number with a gray background, while clicking the empty part of the cell selects the day and highlights the day number with a blue background.
- **Month navigation** The month can be changed by clicking and dragging the calendar left or right.
- **Calendar header** The top-left side shows the current month and year, while the top-right side includes blue previous and next navigation arrows with a `Today` button between them.
- **Date picker header** The date picker header shows the current month and year with previous and next navigation arrows.

## Best for

- **External calendar controls** Apps where users need to navigate the event calendar from a secondary navigation surface.
- **Desktop scheduling layouts** Interfaces that use a two-pane layout to keep date navigation and event overview visible at the same time.
- **Selection-driven workflows** Scheduling and planning experiences where users need clear hover, selection, and active-event states while browsing the calendar.
- **Custom navigation patterns** Products that need to keep multiple calendar-related 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

## 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, 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 = { calendar: { type: 'week' }, agenda: { type: 'day' } };
  myEvents: MbscCalendarEvent[] = [];
  selectedDate: MbscDateType = new Date();

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

### Template

```html
<div class="mds-external-nav-calendar 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"></mbsc-eventcalendar>
  </div>
</div>
```

### CSS

```css
.mds-external-nav-calendar {
  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-agenda {
    display: block;
  }
}
```

## Implementation notes

- Render an inline `Datepicker` (`display="inline"`) in a left pane and an `Eventcalendar` in a right pane side by side.
- Keep both components in sync through a shared `selectedDate` state variable: in `Datepicker` `onChange`, update `selectedDate` from `args.value`; in `Eventcalendar` `onSelectedDateChange` (Vue: `@selected-date-change`), update `selectedDate` from `args.date`. Pass `selectedDate` to both components so navigating either one updates the other.
- Angular: bind both components to the same value using `ngModel` on the `Datepicker` and `[selectedDate]` on the `Eventcalendar` - no explicit event handlers are needed since the shared binding keeps them in sync automatically.
- JS/jQuery: in `Datepicker` `onChange`, call `calendarInst.navigate(args.value)` to move the calendar; in `Eventcalendar` `onSelectedDateChange`, call `datepickerInst.setVal(args.date)` to update the datepicker.
- Load events from a remote endpoint using `getJson` and assign them to `data`; for the imperative API, call `inst.setEvents(events)` in the callback.

## 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: [Switch Day, Week and Month Views](https://demo.mobiscroll.com/angular/eventcalendar/switching-day-week-month-view.md) - Switch a Angular event calendar between day, week, and month views using a header segmented control — each view paired with a matching agenda list.