---
title: "React Timeline Load Inline Events Example | Mobiscroll"
component: "Timeline"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/timeline/load-inline-data"
---

# Load Inline Events - React Timeline demo

Add events to a React Timeline by passing an inline event array — see how the event object is structured. For React and Next.js.

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

## Description

What is a timeline without any events in it? To populate it with events all you have to do is pass the event array to the [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) option.

In a real-world scenario you would probably [load the events from a remote resource](https://demo.mobiscroll.com/react/timeline/load-events-from-remote-api) or event better, [load them on demand](https://demo.mobiscroll.com/react/timeline/load-events-on-demand). However the point of this example is to understand how easy it is to add events to the timeline.

**Do you want to learn about the event data sctructure?** [See how the event object is built →](https://demo.mobiscroll.com/react/timeline/event-data-structure)

## What this demo shows

- A desktop daily timeline where hours are arranged horizontally and resource arranged vertically on the left.
- **Header navigation** The month and year label opens date navigation, while the previous and next arrows move between days and the Today button returns to the current date.
- **Day view** The strip below the header shows the selected days, 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 appear as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed below the title.
- **Date positioning** Events are positioned by their assigned resource and exact date 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

- **Business schedules** Daily meeting-heavy calendars for product teams, leadership groups, internal planning, and other workdays with overlapping appointments.
- **Operational scheduling** Use cases such as field service, medical scheduling, conference planning, or shift coordination where users need a fast day-by-day view on mobile.

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

## Code

### JSX

```jsx
import { Eventcalendar, setOptions } from '@mobiscroll/react';
import { useMemo } from 'react';

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

const now = new Date();

function App() {
  const myEvents = useMemo(
    () => [
      {
        start: '2026-11-04T09:00',
        end: '2026-11-07T18:00',
        title: 'Business of Software Conference',
        resource: 2,
      },
      {
        start: '2026-11-04T13:00',
        end: '2026-11-05T21:00',
        title: 'Friends binge marathon',
        resource: 4,
      },
      {
        start: '2026-11-11T13:00',
        end: '2026-11-12T21:00',
        title: 'Friends binge marathon',
        resource: 1,
      },
      {
        start: '2026-11-04T08:00',
        end: '2026-11-04T10:00',
        title: 'Product team mtg.',
        resource: 5,
      },
      {
        start: '2026-11-05T07:00',
        end: '2026-11-05T08:00',
        title: 'Green box to post office',
        resource: 5,
      },
      {
        start: '2026-11-03T08:30',
        end: '2026-11-03T10:00',
        title: 'Quick mtg. with Martin',
        resource: 2,
      },
      {
        start: '2026-11-08T09:30',
        end: '2026-11-08T12:00',
        title: 'Product team mtg.',
        resource: 4,
      },
      {
        start: '2026-11-08T11:00',
        end: '2026-11-08T12:30',
        title: 'Stakeholder mtg.',
        resource: 2,
      },
      {
        start: '2026-11-08T13:00',
        end: '2026-11-08T14:30',
        title: "Lunch @ Butcher's",
        resource: 2,
      },
      {
        start: '2026-11-08T15:00',
        end: '2026-11-08T17:00',
        title: 'General orientation',
        resource: 4,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: now.getMonth() + 1,
          day: 14,
        },
        allDay: true,
        title: 'Dexter BD',
        resource: 2,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: now.getMonth() + 1,
          day: 25,
        },
        allDay: true,
        title: 'Luke BD',
        resource: 2,
      },
      {
        recurring: {
          repeat: 'weekly',
          weekDays: 'WE',
        },
        allDay: true,
        title: 'Employment (Semi-weekly)',
        resource: [1, 3],
      },
      {
        start: '2026-11-10T00:00',
        end: '2026-11-15T00:00',
        allDay: true,
        title: 'Sam OFF',
        resource: 4,
      },
      {
        start: '2026-11-18T00:00',
        end: '2026-11-29T00:00',
        allDay: true,
        title: 'Europe tour',
        resource: [1, 4, 5],
      },
      {
        start: '2026-02-07T00:00',
        end: '2026-02-25T00:00',
        allDay: true,
        title: 'Dean OFF',
        resource: 5,
      },
      {
        start: '2026-03-05T00:00',
        end: '2026-03-14T00:00',
        allDay: true,
        title: 'Mike OFF',
        resource: 2,
      },
      {
        start: '2026-05-07T00:00',
        end: '2026-05-16T00:00',
        allDay: true,
        title: 'John OFF',
        resource: 4,
      },
      {
        start: '2026-06-01T00:00',
        end: '2026-06-11T00:00',
        allDay: true,
        title: 'Carol OFF',
        resource: 1,
      },
      {
        start: '2026-07-02T00:00',
        end: '2026-07-17T00:00',
        allDay: true,
        title: 'Jason OFF',
        resource: 5,
      },
      {
        start: '2026-08-06T00:00',
        end: '2026-08-14T00:00',
        allDay: true,
        title: 'Ashley OFF',
        resource: 3,
      },
      {
        start: '2026-09-10T00:00',
        end: '2026-09-20T00:00',
        allDay: true,
        title: 'Marisol OFF',
        resource: 2,
      },
      {
        start: '2026-10-01T00:00',
        end: '2026-10-12T00:00',
        allDay: true,
        title: 'Sharon OFF',
        resource: 3,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 12,
          day: 25,
        },
        allDay: true,
        title: 'Christmas Day',
        resource: [1, 2, 3, 4, 5],
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 1,
          day: 1,
        },
        allDay: true,
        title: "New Year's day",
        resource: [1, 2, 3, 4, 5],
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 4,
          day: 1,
        },
        allDay: true,
        title: "April Fool's Day",
        resource: [1, 2, 3, 4, 5],
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 11,
          day: 2,
        },
        allDay: true,
        title: 'File Form 720 for the third quarter',
        resource: 5,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 11,
          day: 2,
        },
        allDay: true,
        title: 'File Form 730 and pay tax on wagers accepted during September',
        resource: 1,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 11,
          day: 2,
        },
        allDay: true,
        title: 'File Form 2290 and pay the tax for vehicles first used during September',
        resource: 5,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 11,
          day: 2,
        },
        allDay: true,
        title: 'File Form 941 for the third quarter',
        resource: 2,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 11,
          day: 2,
        },
        allDay: true,
        title: 'Deposit FUTA owed through Sep if more than $500',
        resource: 14,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 11,
          day: 30,
        },
        allDay: true,
        title: 'Deposit payroll tax for payments on Nov 21-24 if the semiweekly deposit rule applies',
        resource: 2,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 11,
          day: 30,
        },
        allDay: true,
        title: 'File Form 730 and pay tax on wagers accepted during October',
        resource: 5,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 11,
          day: 30,
        },
        allDay: true,
        title: 'File Form 2290 and pay the tax for vehicles first used during October',
        resource: 4,
      },
    ],
    [],
  );

  const myResources = useMemo(
    () => [
      {
        id: 1,
        name: 'Resource A',
        color: '#fdf500',
      },
      {
        id: 2,
        name: 'Resource B',
        color: '#ff0101',
      },
      {
        id: 3,
        name: 'Resource C',
        color: '#01adff',
      },
      {
        id: 4,
        name: 'Resource D',
        color: '#239a21',
      },
      {
        id: 5,
        name: 'Resource E',
        color: '#ff4600',
      },
    ],
    [],
  );

  const myView = useMemo(() => ({ timeline: { type: 'day' } }), []);

  return <Eventcalendar data={myEvents} resources={myResources} view={myView} />;
}

export default App;
```

### TSX

```tsx
import { Eventcalendar, MbscCalendarEvent, MbscEventcalendarView, MbscResource, setOptions } from '@mobiscroll/react';
import { FC, useMemo } from 'react';

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

const now = new Date();

const App: FC = () => {
  const myEvents: MbscCalendarEvent[] = useMemo(
    () => [
      {
        start: '2026-11-04T09:00',
        end: '2026-11-07T18:00',
        title: 'Business of Software Conference',
        resource: 2,
      },
      {
        start: '2026-11-04T13:00',
        end: '2026-11-05T21:00',
        title: 'Friends binge marathon',
        resource: 4,
      },
      {
        start: '2026-11-11T13:00',
        end: '2026-11-12T21:00',
        title: 'Friends binge marathon',
        resource: 1,
      },
      {
        start: '2026-11-04T08:00',
        end: '2026-11-04T10:00',
        title: 'Product team mtg.',
        resource: 5,
      },
      {
        start: '2026-11-05T07:00',
        end: '2026-11-05T08:00',
        title: 'Green box to post office',
        resource: 5,
      },
      {
        start: '2026-11-03T08:30',
        end: '2026-11-03T10:00',
        title: 'Quick mtg. with Martin',
        resource: 2,
      },
      {
        start: '2026-11-08T09:30',
        end: '2026-11-08T12:00',
        title: 'Product team mtg.',
        resource: 4,
      },
      {
        start: '2026-11-08T11:00',
        end: '2026-11-08T12:30',
        title: 'Stakeholder mtg.',
        resource: 2,
      },
      {
        start: '2026-11-08T13:00',
        end: '2026-11-08T14:30',
        title: "Lunch @ Butcher's",
        resource: 2,
      },
      {
        start: '2026-11-08T15:00',
        end: '2026-11-08T17:00',
        title: 'General orientation',
        resource: 4,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: now.getMonth() + 1,
          day: 14,
        },
        allDay: true,
        title: 'Dexter BD',
        resource: 2,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: now.getMonth() + 1,
          day: 25,
        },
        allDay: true,
        title: 'Luke BD',
        resource: 2,
      },
      {
        recurring: {
          repeat: 'weekly',
          weekDays: 'WE',
        },
        allDay: true,
        title: 'Employment (Semi-weekly)',
        resource: [1, 3],
      },
      {
        start: '2026-11-10T00:00',
        end: '2026-11-15T00:00',
        allDay: true,
        title: 'Sam OFF',
        resource: 4,
      },
      {
        start: '2026-11-18T00:00',
        end: '2026-11-29T00:00',
        allDay: true,
        title: 'Europe tour',
        resource: [1, 4, 5],
      },
      {
        start: '2026-02-07T00:00',
        end: '2026-02-25T00:00',
        allDay: true,
        title: 'Dean OFF',
        resource: 5,
      },
      {
        start: '2026-03-05T00:00',
        end: '2026-03-14T00:00',
        allDay: true,
        title: 'Mike OFF',
        resource: 2,
      },
      {
        start: '2026-05-07T00:00',
        end: '2026-05-16T00:00',
        allDay: true,
        title: 'John OFF',
        resource: 4,
      },
      {
        start: '2026-06-01T00:00',
        end: '2026-06-11T00:00',
        allDay: true,
        title: 'Carol OFF',
        resource: 1,
      },
      {
        start: '2026-07-02T00:00',
        end: '2026-07-17T00:00',
        allDay: true,
        title: 'Jason OFF',
        resource: 5,
      },
      {
        start: '2026-08-06T00:00',
        end: '2026-08-14T00:00',
        allDay: true,
        title: 'Ashley OFF',
        resource: 3,
      },
      {
        start: '2026-09-10T00:00',
        end: '2026-09-20T00:00',
        allDay: true,
        title: 'Marisol OFF',
        resource: 2,
      },
      {
        start: '2026-10-01T00:00',
        end: '2026-10-12T00:00',
        allDay: true,
        title: 'Sharon OFF',
        resource: 3,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 12,
          day: 25,
        },
        allDay: true,
        title: 'Christmas Day',
        resource: [1, 2, 3, 4, 5],
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 1,
          day: 1,
        },
        allDay: true,
        title: "New Year's day",
        resource: [1, 2, 3, 4, 5],
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 4,
          day: 1,
        },
        allDay: true,
        title: "April Fool's Day",
        resource: [1, 2, 3, 4, 5],
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 11,
          day: 2,
        },
        allDay: true,
        title: 'File Form 720 for the third quarter',
        resource: 5,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 11,
          day: 2,
        },
        allDay: true,
        title: 'File Form 730 and pay tax on wagers accepted during September',
        resource: 1,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 11,
          day: 2,
        },
        allDay: true,
        title: 'File Form 2290 and pay the tax for vehicles first used during September',
        resource: 5,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 11,
          day: 2,
        },
        allDay: true,
        title: 'File Form 941 for the third quarter',
        resource: 2,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 11,
          day: 2,
        },
        allDay: true,
        title: 'Deposit FUTA owed through Sep if more than $500',
        resource: 14,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 11,
          day: 30,
        },
        allDay: true,
        title: 'Deposit payroll tax for payments on Nov 21-24 if the semiweekly deposit rule applies',
        resource: 2,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 11,
          day: 30,
        },
        allDay: true,
        title: 'File Form 730 and pay tax on wagers accepted during October',
        resource: 5,
      },
      {
        recurring: {
          repeat: 'yearly',
          month: 11,
          day: 30,
        },
        allDay: true,
        title: 'File Form 2290 and pay the tax for vehicles first used during October',
        resource: 4,
      },
    ],
    [],
  );

  const myResources: MbscResource[] = useMemo(
    () => [
      {
        id: 1,
        name: 'Resource A',
        color: '#fdf500',
      },
      {
        id: 2,
        name: 'Resource B',
        color: '#ff0101',
      },
      {
        id: 3,
        name: 'Resource C',
        color: '#01adff',
      },
      {
        id: 4,
        name: 'Resource D',
        color: '#239a21',
      },
      {
        id: 5,
        name: 'Resource E',
        color: '#ff4600',
      },
    ],
    [],
  );

  const myView = useMemo<MbscEventcalendarView>(() => ({ timeline: { type: 'day' } }), []);

  return <Eventcalendar data={myEvents} view={myView} resources={myResources} />;
};
export default App;
```

## Implementation notes

- Use `timeline: { type: 'day' }` - a single-day view.
- Define 5 resources: Resource A (yellow `#fdf500`), Resource B (red `#ff0101`), Resource C (blue `#01adff`), Resource D (green `#239a21`), Resource E (orange `#ff4600`).
- Pass a static array directly to the `data` option.
- The dataset demonstrates the full range of Mobiscroll event patterns:
  - **Timed events** with `dyndatetime` offsets (yesterday, today, tomorrow, today+N) so the demo always shows content relative to the current date
  - **Multi-day events** spanning several days, including events crossing midnight
  - **All-day events** via `allDay: true`
  - **Multi-resource events** by setting `resource` to an array of IDs (e.g. `resource: [1, 4, 5]`) - the event appears in all listed resource rows simultaneously
  - **Recurring yearly events** using `recurring: { repeat: 'yearly', month: M, day: D }`, including entries anchored to the current month via `now.getMonth() + 1`
  - **Recurring weekly events** using `recurring: { repeat: 'weekly', weekDays: 'WE' }` for specific weekday patterns

## 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

- Next: [Events from Remote API](https://demo.mobiscroll.com/react/timeline/load-events-from-remote-api.md) - Populate the React Timeline with events fetched from a remote API — pass a data array and keep events in sync.