--- title: "React Timeline External Date Navigation Example | Mobiscroll" component: "Timeline" framework: "React" library_version: "6.2.0" url: "https://demo.mobiscroll.com/react/timeline/navigate-view-from-external-calendar" --- # External Date Navigation - React Timeline demo Use a two-panel React Timeline navigated by an external date picker — selecting a date syncs the timeline and the picker instantly. For React and Next.JS. - [Live demo](https://demo.mobiscroll.com/react/timeline/navigate-view-from-external-calendar) - [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/timeline/navigate-view-from-external-calendar) - [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/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), [Angular](https://demo.mobiscroll.com/angular/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 updates the [`selectedDate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-selectedDate) option of the Timeline in its [`onChange`](https://mobiscroll.com/docs/react/datepicker/api#event-onChange) event, while the Timeline updates the datepicker value from its [`onSelectedDateChange`](https://mobiscroll.com/docs/react/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/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 - [`resources`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-resources) - 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(() => ({ timeline: { type: 'day' } }), []); const myResources = useMemo( () => [ { id: 1, name: 'Resource 1', color: 'red' }, { id: 2, name: 'Resource 2', color: 'orange' }, { id: 3, name: 'Resource 3', color: 'blue' }, ], [], ); const handleDateChange = useCallback((args) => { setSelectedDate(args.value); }, []); const handleSelectedDateChange = useCallback((args) => { setSelectedDate(args.date); }, []); useEffect(() => { getJson( 'https://trial.mobiscroll.com/filter-resource-events/', (events) => { setEvents(events); }, 'jsonp', ); }, []); return (
); } export default App; ``` ### TSX ```tsx import { Datepicker, Eventcalendar, getJson, MbscCalendarEvent, MbscDatepickerChangeEvent, MbscDateType, MbscEventcalendarView, MbscResource, MbscSelectedDateChangeEvent, 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(); const dayView = useMemo(() => ({ timeline: { type: 'day' } }), []); const myResources = useMemo( () => [ { id: 1, name: 'Resource 1', color: 'red' }, { id: 2, name: 'Resource 2', color: 'orange' }, { id: 3, name: 'Resource 3', color: 'blue' }, ], [], ); 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/filter-resource-events/', (events: MbscCalendarEvent[]) => { setEvents(events); }, 'jsonp', ); }, []); return (
); } export default App; ``` ### 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; } @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-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 Sidebar](https://demo.mobiscroll.com/react/timeline/searching-events-in-sidebar.md) - Search and filter React 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/react/timeline/role-based-views-with-different-permission.md) - Implement role-based access in a React Timeline: managers edit all tasks, employees edit their own, and clients have read-only access.