---
title: "React Agenda External Date Navigation Example | Mobiscroll"
component: "Agenda"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/agenda/navigate-from-external-calendar"
---

# External Date Navigation - React Agenda demo

Use a two-pane layout with a date picker and a React agenda view — selecting a date in the picker, sync the agenda. For React and Next.JS.

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

## Description

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

The Datepicker updates the [`selectedDate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-selectedDate) option of the Agenda in its [`onChange`](https://mobiscroll.com/docs/react/datepicker/api#event-onChange) event, while the Agenda updates the datepicker value from its [`onSelectedDateChange`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onSelectedDateChange) event.

## What this demo shows

- This demo shows external navigation between a date picker and a daily agenda view in a two-pane desktop layout.
- **Layout** The date picker is displayed in a separate pane on the left, while the agenda day view fills the right side.
- **External navigation** Selecting a date in the date picker updates the visible date on the agenda.
- **Header navigation** The month and year label in the top left opens date navigation. The previous and next arrows and the Today button on the right move between days and jump back to the current date.
- **Agenda list** The area below the header lists events for the selected day.
- **Events:** Events appear as agenda cards with a colored strip on the left and the event title next to it. Start and end times are stacked on the right side of timed events.
- **Event interaction:** Hovering an event highlights it.
- **Event selection:** Clicking an event selects and highlights it.

## Best for

- **External calendar controls** Apps where users need to navigate the agenda 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/react/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-themeVariant) - option
- [`display`](https://mobiscroll.com/docs/react/datepicker/api#opt-display) - option
- [`onChange`](https://mobiscroll.com/docs/react/datepicker/api#event-onChange) - event
- [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option
- [`selectedDate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-selectedDate) - option
- [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option
- [`onSelectedDateChange`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onSelectedDateChange) - event

## Code

### JSX

```jsx
import { Datepicker, Eventcalendar, getJson, setOptions } from '@mobiscroll/react';
import { useCallback, useEffect, useMemo, useState } from 'react';

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

function App() {
  const [myEvents, setEvents] = useState([]);
  const [mySelectedDate, setSelectedDate] = useState(new Date());
  const dayView = useMemo(() => ({ agenda: { type: 'day' } }), []);

  const handleDateChange = useCallback((args) => {
    setSelectedDate(args.value);
  }, []);

  const handleSelectedDateChange = useCallback((args) => {
    setSelectedDate(args.date);
  }, []);

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/events/?vers=5',
      (events) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <div className="mds-external-nav-agenda mbsc-flex">
      <div className="mds-external-nav-dp">
        <Datepicker display="inline" value={mySelectedDate} onChange={handleDateChange} />
      </div>
      <div className="mds-external-nav-ec mbsc-flex-1-1">
        <Eventcalendar data={myEvents} selectedDate={mySelectedDate} view={dayView} onSelectedDateChange={handleSelectedDateChange} />
      </div>
    </div>
  );
}

export default App;
```

### TSX

```tsx
import {
  Datepicker,
  Eventcalendar,
  getJson,
  MbscCalendarEvent,
  MbscDatepickerChangeEvent,
  MbscDateType,
  MbscEventcalendarView,
  MbscSelectedDateChangeEvent,
  setOptions,
} from '@mobiscroll/react';

import { useCallback, useEffect, useMemo, useState } from 'react';

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

function App() {
  const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
  const [mySelectedDate, setSelectedDate] = useState<MbscDateType>(new Date());
  const dayView = useMemo<MbscEventcalendarView>(() => ({ agenda: { type: 'day' } }), []);

  const handleDateChange = useCallback((args: MbscDatepickerChangeEvent) => {
    if (args.value) {
      setSelectedDate(args.value);
    }
  }, []);

  const handleSelectedDateChange = useCallback((args: MbscSelectedDateChangeEvent) => {
    setSelectedDate(args.date);
  }, []);

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/events/?vers=5',
      (events: MbscCalendarEvent[]) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <div className="mds-external-nav-agenda mbsc-flex">
      <div className="mds-external-nav-dp">
        <Datepicker display="inline" value={mySelectedDate} onChange={handleDateChange} />
      </div>
      <div className="mds-external-nav-ec mbsc-flex-1-1">
        <Eventcalendar data={myEvents} selectedDate={mySelectedDate} view={dayView} onSelectedDateChange={handleSelectedDateChange} />
      </div>
    </div>
  );
}

export default App;
```

### CSS

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

## Implementation notes

- Use `view: { agenda: { type: 'day' } }`. Load events from `https://trial.mobiscroll.com/events/?vers=5` via JSONP using `getJson(url, callback, 'jsonp')`. Angular: use `HttpClient.jsonp()`. For the imperative API, call `inst.setEvents(events)` in the callback.
- Place a Mobiscroll `Datepicker` with `display: 'inline'` and an `Eventcalendar` side by side in a flex row. The Datepicker is a fixed-width left pane; the Eventcalendar takes the remaining width (`mbsc-flex-1-1`).
- Keep a shared `selectedDate` value in sync across both components:
  - On Datepicker change (`onChange`), update `selectedDate` to `args.value` and pass it to the Eventcalendar's `selectedDate` option.
  - On Eventcalendar `onSelectedDateChange`, update `selectedDate` to `args.date` and pass it back to the Datepicker's `value`.
  - **Angular**: use two-way binding `[(selectedDate)]` on the Eventcalendar and `[(ngModel)]` on the Datepicker - both bind to the same variable, no explicit event handlers needed.
  - **JS/jQuery**: use the imperative API - call `agendaInst.navigate(args.value)` in the Datepicker's `onChange`, and `datepickerInst.setVal(args.date)` in the Eventcalendar's `onSelectedDateChange`.

## 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-react.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 react
   ```

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 react --trial`.

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

## Related demos

- Previous: [Event Search](https://demo.mobiscroll.com/react/agenda/searching-events-in-popup.md) - Add real-time event search to the React calendar header — type to filter events and show matching results in a popup agenda list.