---
title: "React Timeline Component for Resource Scheduling | Mobiscroll"
component: "Timeline"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/timeline"
---

# React Resource Timeline Scheduler for Planning

A horizontally scrollable React timeline with multiple resource rows, configurable day, week, month, and year views, drag and drop, and virtual scrolling. For React and Next.js. Last update: Oct 30, 2026

Build resource scheduling and project planning views in React, with time running horizontally and people, equipment or projects in rows. Show longer-range plans, edit assignments with drag and drop and combine the Timeline with your application's data and state.

Use Mobiscroll's native React components, props and event callbacks rather than wrapping an unrelated JavaScript calendar.

## Overview

The Mobiscroll Timeline is the horizontal scheduling view of the Event Calendar component. Time runs from left to right, while resources such as people, teams, rooms or equipment appear as rows. Unlike the Scheduler's vertical time grid, the Timeline makes it natural to compare assignments across resources and follow work over days, weeks, months or longer periods. It is a configurable UI toolset for building planning experiences, not a predefined resource-management application.

## Timeline highlights

### Horizontal planning from hours to years

Show a resource schedule across hours, days, weeks, months, quarters or years. Adjust the visible range and zoom level so users can switch between detailed work and a wider planning overview.

### Resource hierarchies and shared assignments

Organize people, teams, sites or equipment into expandable resource groups. Show one event against multiple resources and adapt the resource rows to the structure of your application.

### Interactive schedules and task relationships

Create, move and resize events on the timeline. Display progress and links between related tasks, with control over the editing interactions your users are allowed to perform.

### AI-ready developer tooling

Use Mobiscroll's MCP server, coding-agent skills and AI-readable examples to give AI coding assistants version-specific Timeline APIs and framework-aware implementation context.

## Getting started

Add Mobiscroll to your project and enable the `timeline` view of the Event Calendar component. The example below shows a week of work across two teams and a piece of equipment, including an assignment shared by more than one resource. Start with this example or open any Timeline demo below to inspect and reuse its source code.

Install the Mobiscroll CLI once, then configure the React package inside your project. The CLI configures the private npm registry and installs Mobiscroll.

```bash
npm install -g @mobiscroll/cli
mobiscroll config react
```

Use the native React `Eventcalendar` component with a Timeline view. Pass resources and scheduled events as props:

```jsx
import { Eventcalendar } from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

const weekStart = new Date();
weekStart.setDate(weekStart.getDate() - ((weekStart.getDay() + 6) % 7));
weekStart.setHours(0, 0, 0, 0);
const day = (n) => new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + n);

const view = { timeline: { type: 'week', resolutionHorizontal: 'day' } };
const resources = [
  { id: 1, name: 'Installation team' },
  { id: 2, name: 'Inspection team' },
  { id: 3, name: 'Equipment' }
];
const events = [
  { id: 1, title: 'Site preparation', start: day(0), end: day(1), allDay: true, resource: 1 },
  { id: 2, title: 'Equipment installation', start: day(1), end: day(3), allDay: true, resource: [1, 3] },
  { id: 3, title: 'Quality inspection', start: day(3), end: day(4), allDay: true, resource: 2 }
];

export default function App() {
  return <Eventcalendar view={view} selectedDate={weekStart} resources={resources}
    data={events} dragToCreate={true} dragToMove={true} dragToResize={true} />;
}
```

Use React state and Mobiscroll event callbacks when you need to keep edits in sync with your application data. See the [React installation guide](https://mobiscroll.com/docs/react/getting-started/installation) and [Timeline documentation](https://mobiscroll.com/docs/react/eventcalendar/timeline).

The code above is an introductory planning scenario. For a different layout or workflow, explore the full Timeline demo gallery below and start from the source of the closest working example.

## What you can build with the Timeline

Build horizontal planning interfaces that make work and resource availability understandable at a glance. The Timeline is a set of configurable views and interactions: start with the work your users need to plan, then adapt the resources, time scale, event content and editing rules to your application.

### Project & timeline planning

Build project timelines that show tasks, milestones and work spanning several days or months. Display links between related tasks, add progress indicators and let users zoom between detailed and high-level plans ([linked tasks](https://demo.mobiscroll.com/react/timeline/connecting-linking-events-arrows), [task progress](https://demo.mobiscroll.com/react/timeline/show-task-progress-on-event), [zoom levels](https://demo.mobiscroll.com/react/timeline/calendar-zoom)). Useful for project, construction and delivery-planning products that need a visual schedule without imposing a fixed project workflow.

### Resource & asset planning

Build resource calendars for equipment, rooms, vehicles and teams with a horizontal time axis. Group resources by site or department, compare their bookings and show summary information alongside the plan ([resource hierarchy](https://demo.mobiscroll.com/react/timeline/resource-grouping-hierarchy), [compare resources](https://demo.mobiscroll.com/react/timeline/compare-resources-fixed-at-top), [resource group summaries](https://demo.mobiscroll.com/react/timeline/show-summaries-aggregates-for-resource-groups)). Useful for booking and allocation interfaces in B2B software.

### Operations & production planning

Plan production runs, operational jobs or equipment usage across work periods. Show shifts or tasks under resource rows, indicate unavailable periods and display time buffers between assignments ([tasks within shifts](https://demo.mobiscroll.com/react/timeline/tasks-subtasks-under-shifts), [shift slots](https://demo.mobiscroll.com/react/timeline/shift-template), [time buffers](https://demo.mobiscroll.com/react/timeline/event-buffer)). Adapt the schedule to your application's production and operational rules.

### Workforce & shift planning

Create workforce planning timelines with employees or teams in rows and shifts extending across days. Use scheduling interactions to reassign work, display recurring shifts and build specialized views for industries with changing staff coverage ([employee shifts](https://demo.mobiscroll.com/react/timeline/employee-shifts), [restaurant shifts](https://demo.mobiscroll.com/react/timeline/restaurant-shift-management), [recurring shifts](https://demo.mobiscroll.com/react/timeline/recurring-events)).

### Job scheduling & dispatch

Build dispatch boards and work-order timelines for technicians, crews or vehicles. Place work from an unassigned pool onto resources, move jobs to another team and show the sequence of assignments across a wider period ([work-order scheduling](https://demo.mobiscroll.com/react/timeline/work-order-scheduling), [work-order assignment](https://demo.mobiscroll.com/react/timeline/assign-unassign-work-orders-fixed-top-row), [transport planning](https://demo.mobiscroll.com/react/timeline/truck-transport-planning-and-dispatch)).

## Timeline capabilities

Mobiscroll Timeline combines the horizontal scheduling layout with controls for resources, event interactions and rendering. Use these building blocks together to create a resource scheduler, planning board or Gantt-style interface around your own data instead of adopting a predetermined process.

### Horizontal time scales and zoom

Display time from left to right in day, week, month or year views, with time resolution ranging from hours to years. Configure the visible range and switch between zoom levels, such as daily planning and a multi-month overview ([Timeline views](https://demo.mobiscroll.com/react/timeline/daily-weekly-monthly-yearly-timeline), [time scales](https://demo.mobiscroll.com/react/timeline/multiple-days-weeks-months-quarters-years-variable-resolution), [zoom controls](https://demo.mobiscroll.com/react/timeline/calendar-zoom)).

### Resource rows and hierarchies

Show people, teams or assets as rows, and nest them in multi-level hierarchies such as site, building and room. Allow users to expand groups, find resources and reorder the list where the workflow requires it ([resource groups](https://demo.mobiscroll.com/react/timeline/resource-grouping-hierarchy), [resource filtering](https://demo.mobiscroll.com/react/timeline/resource-filtering-search), [reordering resources](https://demo.mobiscroll.com/react/timeline/resource-drag-drop-reorder)).

### Assignments across multiple resources

Display an event against one resource or several resources while retaining the shared event data. Build assignment flows that let users put work onto a team, remove an assignment or assign a person from an external list ([assign and unassign work](https://demo.mobiscroll.com/react/timeline/assign-unassign-work-orders-fixed-top-row), [assign people to events](https://demo.mobiscroll.com/react/timeline/drop-assignee-on-event-from-list), [resource data and assignments](https://mobiscroll.com/docs/react/eventcalendar/resources)).

### Gantt-style task links and progress

Draw connections and directional arrows between events, display task progress and customize the information shown inside each task bar ([linked events](https://demo.mobiscroll.com/react/timeline/connecting-linking-events-arrows), [progress indicators](https://demo.mobiscroll.com/react/timeline/show-task-progress-on-event), [custom task rendering](https://demo.mobiscroll.com/react/timeline/timeline-custom-event-rendering)). These are visual building blocks for project timelines; automatic dependency rescheduling and critical-path calculations are application-side concerns.

### Drag and drop with interaction control

Create events and drag them along the timeline, between resources or across different views. Resize durations and control which changes are permitted for a particular event or resource ([drag editing](https://demo.mobiscroll.com/react/timeline/move-resize-drag-drop-to-create-events), [interaction restrictions](https://demo.mobiscroll.com/react/timeline/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource), [external event lists](https://demo.mobiscroll.com/react/timeline/external-drag-drop-sortable-dragula)).

### Shift slots and scheduling restrictions

Represent work shifts as slots and display tasks within longer-running assignments. Mark time off and unavailable intervals, show buffers before or after events and configure the restrictions that apply when users edit the schedule ([shift slots](https://demo.mobiscroll.com/react/timeline/shift-template), [resource availability](https://demo.mobiscroll.com/react/timeline/dynamically-color-and-invalidate), [overlap restrictions](https://demo.mobiscroll.com/react/timeline/prevent-double-booking-events), [buffer time](https://demo.mobiscroll.com/react/timeline/event-buffer)).

### Resource comparison and visual summaries

Compare a selected resource with the rest of the plan, display aggregate summaries for resource groups and add custom details to resource rows and footers ([compare resources](https://demo.mobiscroll.com/react/timeline/compare-resources-fixed-at-top), [aggregated summaries](https://demo.mobiscroll.com/react/timeline/show-summaries-aggregates-for-resource-groups), [resource details](https://demo.mobiscroll.com/react/timeline/timeline-resource-details-side-panel-footer)). Use these views to explain allocation and workload; your application can supply the underlying capacity calculations.

### Custom event and cell rendering

Adapt event bars, row heights, headers, footers and timeline cells to your own domain. Show progress, status, buffers or resource-specific information in the schedule instead of forcing every workflow into identical event labels ([event appearance](https://demo.mobiscroll.com/react/timeline/timeline-custom-event-rendering), [custom cells](https://demo.mobiscroll.com/react/timeline/dynamic-cell-content-template), [variable event heights](https://demo.mobiscroll.com/react/timeline/variable-event-height), [timeline headers and footers](https://demo.mobiscroll.com/react/timeline/hour-day-week-month-quarter-year-header-footer-template)).

### Recurring and multi-day work

Show work that spans multiple days and events that repeat daily, weekly, monthly or yearly. Customize how overlapping events are displayed or switch to a daily event-listing layout when a summarized view is more useful ([recurring events](https://demo.mobiscroll.com/react/timeline/recurring-events), [overlapping-event display](https://demo.mobiscroll.com/react/timeline/control-number-of-concurrently-shown-events), [daily event listing](https://demo.mobiscroll.com/react/timeline/event-listing)).

### Connect your own data and scale the view

Populate the Timeline from your API, request events as users navigate and load resources while scrolling. Virtualized rendering manages what is visible horizontally and vertically, supporting resource-heavy schedules and longer planning ranges ([remote event data](https://demo.mobiscroll.com/react/timeline/load-events-from-remote-api), [on-demand events](https://demo.mobiscroll.com/react/timeline/load-events-on-demand), [load resources on scroll](https://demo.mobiscroll.com/react/timeline/load-resources-on-scroll), [large data sets](https://demo.mobiscroll.com/react/timeline/loading-big-data-sets)).

### Time zones and localization

Display dates and event times for international teams, including views that show working hours for people in different time zones. Localize labels and date formats, support right-to-left layouts and use the documented Gregorian, Jalali and Hijri calendar options ([time-zone meeting planner](https://demo.mobiscroll.com/react/timeline/timezone-meeting-planner), [localized timeline](https://demo.mobiscroll.com/react/timeline/localization), [calendar systems](https://demo.mobiscroll.com/react/timeline/gregorian-jalali-hijri)).

### Mobile use and accessibility

Configure a more focused timeline on smaller screens and use the component's touch and keyboard interactions to support different devices. Mobiscroll provides keyboard and screen-reader support and documents its current WCAG 2.2 A and AA coverage; consult the [Event Calendar accessibility guide](https://mobiscroll.com/docs/react/eventcalendar/accessibility) and [accessibility support details](https://mobiscroll.com/docs/react/core-concepts/accessibility) for the applicable limitations.

### Themes and printing

Choose an iOS, Material or Windows theme and adapt the Timeline with custom styling. Print the current view with the separately licensed print module when your license includes it ([print and PDF example](https://demo.mobiscroll.com/react/timeline/printing-the-view), [printing documentation](https://mobiscroll.com/docs/react/eventcalendar/print)).

## AI Tooling

Mobiscroll provides AI Tooling for teams building scheduling and planning interfaces with coding assistants. Its hosted MCP server can supply API context for the Mobiscroll version in your project. Agent skills, framework-specific instructions and AI-readable documentation help assistants distinguish Timeline view configuration, event data, resource hierarchies and editing callbacks when adapting examples.

For React, work with the native `Eventcalendar` component, props, application state and event callbacks. Example request: "Build a React resource scheduling timeline with teams as rows, movable project tasks and linked milestones. Use Mobiscroll's current React API and show how state updates are persisted."

Claude Code and Codex can use Mobiscroll's plugin and UI skills with its MCP connection. Cursor and GitHub Copilot can use framework-specific instruction files and optionally connect to the MCP server. Follow the [AI Tooling setup guide](https://mobiscroll.com/docs/react/guides/ai-integration) for the supported setup of each assistant.

Mobiscroll documentation and demos are also available in AI-readable formats, including source code and implementation notes. An assistant can use these to find the correct patterns, but developers should still test the resulting planning and scheduling behavior against their application's rules.

## Timeline demos

Explore working React Timeline examples for horizontal resource scheduling, project planning, shift management, resource hierarchies and drag-and-drop assignment.

Each demo includes a working implementation and code you can inspect. Start with the example closest to your resource or planning problem, then adapt its data, interactions and rendering. The gallery below contains the Timeline examples available for this framework.

### Setting up the timeline

- [Month View](https://demo.mobiscroll.com/react/timeline/calendar-timeline.md) - Show all resources in a monthly React timeline — resources as rows, days as columns, with adjustable daily resolution.
- [Time Grid and Timeline Layout](https://demo.mobiscroll.com/react/timeline/timeline-time-grid.md) - Switch between a vertical time grid and a horizontal resource timeline in a React scheduler — set responsive to show each layout by screen size.
- [Print and PDF Export](https://demo.mobiscroll.com/react/timeline/printing-the-view.md) - Use the React Timeline print add-on to print just the timeline view — apply print-optimized styles and export to PDF through the browser.

### Common use cases

- [Employee Shift Scheduling](https://demo.mobiscroll.com/react/timeline/employee-shifts.md) - Plan employee shifts on a React Timeline — show workers as resource rows with morning and afternoon slots, and manage shifts with a custom add/edit dialog.
- [Work Order Scheduling](https://demo.mobiscroll.com/react/timeline/work-order-scheduling.md) - Schedule work orders across grouped resources — drivers, trucks, and contractors — on a React timeline.
- [Timezone Meeting Planner](https://demo.mobiscroll.com/react/timeline/timezone-meeting-planner.md) - Plan team meetings across multiple time zones using the React Timeline — show availability, time-off blocks, with events in local time.
- [Restaurant Shift Scheduling](https://demo.mobiscroll.com/react/timeline/restaurant-shift-management.md) - Build a restaurant shift planning with React Timeline — organize staff by role, track occupancy per shift, and toggle shifts on or off.
- [Meal Planner](https://demo.mobiscroll.com/react/timeline/meal-planner.md) - Build a weekly meal planner with the React Timeline — meal types as color-coded resource rows, custom add/edit popover for creating or updating meals.
- [Dynamic Resource Availability](https://demo.mobiscroll.com/react/timeline/dynamically-color-and-invalidate.md) - Color-code resource rows and restrict drop zones by task type on a React Timeline — compatible resources turn green, incompatible ones gray during drag.
- [Multi-Classroom Timetable](https://demo.mobiscroll.com/react/timeline/multi-classroom-timetable.md) - Build a weekly classroom timetable with the React Timeline — rooms and days listed vertically with hourly slots from 8 AM to 8 PM, Monday to Friday.
- [Monthly Timetable View](https://demo.mobiscroll.com/react/timeline/monthly-timetable-vertical-days-horizontal-times.md) - Display a monthly timetable in the React Timeline — days listed vertically, hours across, with drag-to-create in a single-resource layout.
- [Compare Resources Fixed at Top](https://demo.mobiscroll.com/react/timeline/compare-resources-fixed-at-top.md) - Use the React Timeline to pin up to 3 resources to a fixed comparison section at the top — compare schedules side by side while the rest scroll below.
- [Work Order Assignment](https://demo.mobiscroll.com/react/timeline/assign-unassign-work-orders-fixed-top-row.md) - Assign work orders to employees on a React Timeline — keep unassigned orders in a fixed top row while scrolling, and drag to assign without changing time.
- [Task Checklist in Events](https://demo.mobiscroll.com/react/timeline/check-list-tasks-within-events.md) - Render a task checklist inside each React Timeline event card — row heights expand as the list grows, and a popup let users add new subtasks.
- [Dual Synchronized Flight Scheduling](https://demo.mobiscroll.com/react/timeline/flight-scheduling-two-synchronized-timelines.md) - Use synchronized React Timeline views to build a flight scheduling UI — drag flights to assign them to aircraft, with fixed event times and conflict detection.
- [Task Progress Tracking](https://demo.mobiscroll.com/react/timeline/show-task-progress-on-event.md) - Show task completion progress on the React Timeline events with an inline hover slider for live updates and a progress field in the add/edit dialog.
- [Shifts and Tasks](https://demo.mobiscroll.com/react/timeline/tasks-subtasks-under-shifts.md) - Display shifts and linked tasks on a React Timeline — group tasks under parent shifts and restrict movement to each shift's time range.
- [Resource Search and Filtering](https://demo.mobiscroll.com/react/timeline/resource-filtering-search.md) - Add live search and filter to a React Timeline resource header — multi-select by status or group, with a custom empty state and reset.
- [External Resource Drag & Drop](https://demo.mobiscroll.com/react/timeline/resource-management-with-dynamic-team-creation.md) - Drag external resources onto a React Timeline to add team members, or drag them off to remove them — build crew scheduling and team management.
- [Event Grouping & Bulk Actions](https://demo.mobiscroll.com/react/timeline/event-grouping-bulk-action.md) - Group React Timeline events into collapsible client/quarter blocks and bulk-drag groups — switch between assignee and work-type, on a year view.
- [36-Hour Rolling Window Schedule](https://demo.mobiscroll.com/react/timeline/36-hour-rolling-window-aircraft-view.md) - Build a fleet scheduling view on the React Timeline — a 36-hour rolling window that auto-advances from the current hour.
- [Drag People onto Events](https://demo.mobiscroll.com/react/timeline/drop-assignee-on-event-from-list.md) - Build a team assignment interface on the React Timeline — drag people from an external list onto meetings with conflict validation.
- [Truck Dispatch Planning](https://demo.mobiscroll.com/react/timeline/truck-transport-planning-and-dispatch.md) - Assign transports on the React timeline — hide trucks with capacity or time-window conflicts during drag and snap failed drops to the nearest valid slot.

### Configuring the view

- [Day, Week, Month & Year Views](https://demo.mobiscroll.com/react/timeline/daily-weekly-monthly-yearly-timeline.md) - Switch between day, week, month, and year views on the React Timeline — configure visible weekdays, working hours, and time scale per view.
- [Multiple Time Scales](https://demo.mobiscroll.com/react/timeline/multiple-days-weeks-months-quarters-years-variable-resolution.md) - Configure span and time scale on a React Timeline — switch day, week, month, quarter, or year views, set resolution, and show or hide empty rows.
- [Calendar Zoom Levels](https://demo.mobiscroll.com/react/timeline/calendar-zoom.md) - Add zoom controls to a React resource timeline to switch from day/hour detail to monthly/yearly overviews— keeping events centered as the view changes.
- [Limit Concurrent Events](https://demo.mobiscroll.com/react/timeline/control-number-of-concurrently-shown-events.md) - Set a maximum number of concurrent events on a React Timeline — cap overlapping events per row and show an overflow indicator for hidden events.
- [Event Buffer Time](https://demo.mobiscroll.com/react/timeline/event-buffer.md) - Visualize buffer time on a React Timeline — show travel time, check-in/out, loading/unloading time, or preparation windows around scheduled events.
- [Custom Range Picker View](https://demo.mobiscroll.com/react/timeline/custom-range-view.md) - Replace the React Timeline's default header navigation with a range picker — let users set any custom date range, synced two-way with the timeline.
- [Custom Event Ordering](https://demo.mobiscroll.com/react/timeline/custom-event-sort.md) - Set event order in the React Timeline - using a per-event order value or a custom ordering function.
- [Equal Row Heights](https://demo.mobiscroll.com/react/timeline/timeline-resource-height.md) - Keep all resources the same height on the React Timeline — overlapping events distribute evenly within each row - CSS override for minimum height.
- [Variable Event Height](https://demo.mobiscroll.com/react/timeline/variable-event-height.md) - Show React Timeline events sized to content — resource rows grow to fit the tallest event, keeping text visible in room or resource schedules.
- [Daily Event Listing](https://demo.mobiscroll.com/react/timeline/event-listing.md) - Display events as full-day labels across resources on the React Timeline — ideal for capacity checks and daily schedule overviews.
- [Day/Week View Switcher](https://demo.mobiscroll.com/react/timeline/switching-day-week-work-week-timeline.md) - Build resource schedules with day, work-week, and full-week views on a React Timeline — switch views from the header to control time-grid detail.
- [Data & Display Timezone](https://demo.mobiscroll.com/react/timeline/setting-the-timezone.md) - Set separate data and display timezones on a React Timeline — configure per-resource event timezone display using Luxon, Moment-timezone, or Day.js.
- [Multiple Timezone Support](https://demo.mobiscroll.com/react/timeline/multiple-timezone-support.md) - Let users switch the display timezone on the fly via a custom dropdown in the React Timeline header — data and display timezones are set independently.
- [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.
- [External Date Navigation](https://demo.mobiscroll.com/react/timeline/navigate-view-from-external-calendar.md) - Use a two-panel React Timeline navigated by an external date picker — selecting a date syncs the timeline and the picker instantly.
- [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.

### Templating

- [Event Appearance & Time Buffers](https://demo.mobiscroll.com/react/timeline/timeline-custom-event-rendering.md) - Customize event layouts on a React Timeline with icons, labels, and colors — visualize before/after buffers for travel, prep, or inspection workflows.
- [Custom Cell Content](https://demo.mobiscroll.com/react/timeline/dynamic-cell-content-template.md) - Add workload badges, status icons, and a hover quick-add button to each React Timeline cell — and cap events per cell.
- [Header and Footer Template](https://demo.mobiscroll.com/react/timeline/hour-day-week-month-quarter-year-header-footer-template.md) - Customize time-scale headers and add occupancy footers to a React Timeline — format cells from hour to year and display per-slot utilization.
- [Employee Shift Slots](https://demo.mobiscroll.com/react/timeline/shift-template.md) - Build a React Timeline with custom shift slot headers — replace hourly intervals with Morning and Afternoon, each with its own time range and color.
- [Resource Header Customization](https://demo.mobiscroll.com/react/timeline/resource-header-template.md) - Add custom filters, labels, or contextual UI to React Timeline resource headers — useful for room booking and resource scheduling views.
- [Custom Event Tooltip](https://demo.mobiscroll.com/react/timeline/custom-event-tooltip.md) - Show native, Mobiscroll popup, or third-party tooltips on the React timeline events — control hover behavior with event callbacks.
- [Resource Row Height](https://demo.mobiscroll.com/react/timeline/setting-row-height.md) - Set fixed heights for resource rows, control parent row sizing, and remove bottom gutter spacing on a React Timeline using CSS overrides.

### Drag & drop

- [Drag, Move & Resize Events](https://demo.mobiscroll.com/react/timeline/move-resize-drag-drop-to-create-events.md) - Drag to create, move, resize, and delete events on a React Timeline — toggle each action per event and set snap resolution for all drag operations.
- [Drag & Drop Restrictions per Event & Resource](https://demo.mobiscroll.com/react/timeline/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource.md) - Restrict drag, move, and resize on a React Timeline per event, resource, or globally — lock events in time, fix length, or prevent resource switches.
- [Cross-Instance Drag and Drop](https://demo.mobiscroll.com/react/timeline/drag-drop-between-calendar-instances.md) - Drag and drop events between two React Timeline views to reassign resources or coordinate schedules — enable cross-timeline transfers.
- [Prevent Event Overlap](https://demo.mobiscroll.com/react/timeline/prevent-double-booking-events.md) - Prevent double booking on the React Timeline — block overlaps per event, per resource, or globally, and show a toast on conflict.
- [Schedule from External Lists](https://demo.mobiscroll.com/react/timeline/external-drag-drop-sortable-dragula.md) - Drag items from Mobiscroll, SortableJS or Dragula lists onto the React Timeline to schedule them — drag events back off to unschedule.

### Resources

- [Resource Footers & Revenue Sidebar](https://demo.mobiscroll.com/react/timeline/timeline-resource-details-side-panel-footer.md) - Add custom resource column footers, a revenue sidebar, and per-day occupancy to a React resource timeline — all column headers are sortable.
- [Resource Grouping & Hierarchy](https://demo.mobiscroll.com/react/timeline/resource-grouping-hierarchy.md) - Build a React resource timeline with collapsible nested groups, pinned resources, and per-group event creation controls.
- [Resource Group Aggregate Summaries](https://demo.mobiscroll.com/react/timeline/show-summaries-aggregates-for-resource-groups.md) - Show aggregate totals in parent resource rows on a React Timeline — summary values recalculate as bookings are added, changed, or removed.
- [Resource Drag & Drop Reorder](https://demo.mobiscroll.com/react/timeline/resource-drag-drop-reorder.md) - Reorder resources on the React Timeline by drag and drop — each row shows a drag handle, and an update callback runs on drop.
- [Dynamic Resource Sort](https://demo.mobiscroll.com/react/timeline/dynamic-calculation-resource-sort.md) - Sort React Timeline resources by metrics — a header popup ranks trucks by standby, payload, or deadhead time, reordering on event changes.
- [Resource Properties](https://demo.mobiscroll.com/react/timeline/resource-data-structure.md) - Define resource properties on the React Timeline — set up nested groups, fixed rows, and per-resource drag, resize, and overlap controls.
- [Resource Hover Tooltip](https://demo.mobiscroll.com/react/timeline/display-resource-information-on-hover.md) - Hover over a resource row in the React Timeline to open a tooltip popup with scheduled hours — keeps the timeline view clean.

### Event data structure

- [Event Data Structure](https://demo.mobiscroll.com/react/timeline/event-data-structure.md) - Define event properties for a React Timeline — titles, dates, colors, resource and slot assignments, recurrence, buffer times, and per-event drag/resize control.
- [Linked Events & Dependencies](https://demo.mobiscroll.com/react/timeline/connecting-linking-events-arrows.md) - Link React Timeline events with arrows to visualize task dependencies — set finish-to-start, start-to-finish, start-to-start, and finish-to-finish connections.
- [Date Formats](https://demo.mobiscroll.com/react/timeline/date-object-ISO-8601-moment.md) - Pass JavaScript date objects, ISO 8601 strings, or Moment.js dates to events, marked dates, colors, and labels in the React Timeline.
- [Recurring Events](https://demo.mobiscroll.com/react/timeline/recurring-events.md) - Configure daily, weekly, monthly, and yearly recurring events on the React Timeline — set recurrence rules, exclude dates with the interactive configurator.

### Loading events & data sources

- [Load Inline Events](https://demo.mobiscroll.com/react/timeline/load-inline-data.md) - Add events to a React Timeline by passing an inline event array — see how the event object is structured.
- [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.
- [Load Events on Demand](https://demo.mobiscroll.com/react/timeline/load-events-on-demand.md) - Load timeline events on demand — fetch only the visible time range from a remote or local source using the React Timeline.
- [Virtual Scrolling](https://demo.mobiscroll.com/react/timeline/load-events-on-scroll.md) - Load events on scroll with a virtualized React Timeline — only the visible date range is fetched, keeping large resource timelines responsive.
- [Load Resources on Demand](https://demo.mobiscroll.com/react/timeline/load-resources-on-demand.md) - Build hierarchical resource scheduling interfaces with on-demand data loading — the React Timeline fetches child resources.
- [Load Resources on Scroll](https://demo.mobiscroll.com/react/timeline/load-resources-on-scroll.md) - Build responsive large-resource scheduling timelines with the React Timeline — use virtual scrolling to load only visible resource rows on demand.
- [Large Dataset Performance](https://demo.mobiscroll.com/react/timeline/loading-big-data-sets.md) - Handle thousands of events and resources in a React Timeline — virtual scrolling keeps navigation smooth across long date ranges on mobile and desktop.

### Third party calendar integrations

- [Google Calendar Sync](https://demo.mobiscroll.com/react/timeline/sync-events-google-calendar.md) - Load Google Calendar events onto the React Timeline — authenticate users, display calendars as resources, and sync changes back to Google Calendar.
- [Outlook Calendar Sync](https://demo.mobiscroll.com/react/timeline/sync-events-outlook-calendar.md) - Display Outlook Calendar events on a React Timeline — each calendar as a separate resource row.
- [Load Events from Google Calendar](https://demo.mobiscroll.com/react/timeline/load-events-from-google-calendar.md) - Load public Google Calendar events into a React Timeline — show holiday calendars as resource rows using a Calendar ID and API key.

### CRUD operations

- [CRUD Events](https://demo.mobiscroll.com/react/timeline/create-read-update-delete-CRUD.md) - Add, edit, move, resize, and delete events on a React Timeline — drag or double-click to create; set color, dates and all-day options in a dialog.
- [Block Past Event Creation](https://demo.mobiscroll.com/react/timeline/disallow-past-event-creation.md) - Keep past dates read-only on a React resource timeline — block creation, moving, and resizing, and show a toast for blocked actions.
- [Multi-Select & Bulk Event Actions](https://demo.mobiscroll.com/react/timeline/event-bulk-actions-edit-delete-update.md) - Select multiple events on a React Timeline by keyboard shortcut or button, then apply bulk delete or update — a side panel tracks the selection.

### Customizing the look & feel

- [Cell Hover Highlight](https://demo.mobiscroll.com/react/timeline/dynamic-resource-column-highlight-on-cell-hover.md) - Add row and column hover highlighting to the React resource timeline — highlight the active resource row and date column on cell hover.
- [Custom Time Range Backgrounds](https://demo.mobiscroll.com/react/timeline/colors-invalids-css-class.md) - Style time range backgrounds and blocked periods on a React Timeline using CSS classes — mark recurring hours or special days.
- [Theme Customization](https://demo.mobiscroll.com/react/timeline/themes-ios-material-windows.md) - Style the React Timeline with iOS, Material, or Windows themes — switch light/dark variants, use the theme builder for colors, or apply CSS overrides.
- [Resource Row Styling](https://demo.mobiscroll.com/react/timeline/resource-background.md) - Highlight resource rows on a React Timeline using background colors or CSS classes — differentiate teams, show status, or style headers and grid sections.

### Localization & tapping into the lifecycle

- [Gregorian, Jalali & Hijri](https://demo.mobiscroll.com/react/timeline/gregorian-jalali-hijri.md) - Use the React Timeline with Gregorian, Jalali, or Hijri calendar systems — switch by locale to build scheduling interfaces for Persian.
- [Event Hooks](https://demo.mobiscroll.com/react/timeline/event-hooks.md) - Explore React Timeline lifecycle hooks — see hooks fire on event clicks, initialization, and date changes, tracked in a live event log.
- [Multi-Language Support](https://demo.mobiscroll.com/react/timeline/localization.md) - Localize the React Timeline across 37 languages — dates, times, labels, and RTL text direction adapt by locale, with manual override support.
- [RTL Layout](https://demo.mobiscroll.com/react/timeline/rtl-right-to-left.md) - Build RTL scheduling interfaces with the React Timeline — set direction or inherit it from locale settings to support right-to-left language users.

## Your data and external calendars

The Timeline renders the event and resource information supplied by your application. You can use your own data and services without connecting any external calendar account.

**Need to bring in your users' calendars?** [Mobiscroll Connect](https://mobiscroll.com/connect) is the separate calendar connectivity layer for Google Calendar, Outlook, Apple Calendar and CalDAV. It provides account connection, authentication, normalized calendar data and synchronization. **Mobiscroll Connect is sold separately** and is not required to use the Timeline.

## Frequently asked questions

### What is a resource timeline scheduler?

A resource timeline scheduler displays time horizontally and resources vertically, so users can see when people, teams, rooms or equipment are booked or assigned. Mobiscroll's Timeline is a configurable view of its Event Calendar component for building this kind of resource scheduling and planning interface.

### What is the difference between the Timeline and Scheduler views?

The Timeline displays resources in horizontal rows with time running left to right, which is useful for resource allocation and work spanning many days or months. The Scheduler is a vertical time grid organized around hours and days, with resources shown as columns. Both belong to the Event Calendar component. Compare the layouts in the [Timeline and time-grid example](https://demo.mobiscroll.com/react/timeline/timeline-time-grid).

### Can I use Timeline as a horizontal scheduler or resource calendar?

Yes. Use the Timeline view to create a horizontal schedule with resource rows, time columns, draggable events and configurable ranges. It is suitable for resource calendars, allocation boards and planning views, including schedules that extend across multiple weeks or months ([range configuration](https://demo.mobiscroll.com/react/timeline/daily-weekly-monthly-yearly-timeline)).

### Is Mobiscroll Timeline a Gantt chart?

It can be used to build a Gantt-style project timeline: display task bars, progress indicators, grouped resources and links between events ([task connections](https://demo.mobiscroll.com/react/timeline/connecting-linking-events-arrows), [progress display](https://demo.mobiscroll.com/react/timeline/show-task-progress-on-event)). It is a UI component, not a complete project-management engine with automatic dependency rescheduling, critical-path analysis or resource-leveling algorithms.

### Can I group resources into teams or hierarchies?

Yes. Resources can have nested child resources, allowing a hierarchy such as region, site, building and room. You can expand or collapse groups, customize resource rendering and reorder resources through the UI ([resource hierarchies](https://demo.mobiscroll.com/react/timeline/resource-grouping-hierarchy), [resource ordering](https://demo.mobiscroll.com/react/timeline/resource-drag-drop-reorder)).

### Can an event appear on more than one resource row?

Yes. A single event can reference multiple resources and appear in their respective rows while remaining one event in your data. This helps when the same job requires people and equipment at once; see [resource assignments](https://mobiscroll.com/docs/react/eventcalendar/resources).

### Can I create and move events by dragging them?

Yes. Configure event creation, moving and resizing through drag and drop, including moving events between resource rows and dragging work from outside the timeline ([drag editing](https://demo.mobiscroll.com/react/timeline/move-resize-drag-drop-to-create-events), [external drag and drop](https://demo.mobiscroll.com/react/timeline/external-drag-drop-sortable-dragula)). You can restrict interactions by event and resource.

### Does the Timeline calculate capacity or prevent double bookings automatically?

The Timeline can visualize resource assignments, display aggregate summaries and apply UI restrictions for invalid time ranges or overlapping events ([resource summaries](https://demo.mobiscroll.com/react/timeline/show-summaries-aggregates-for-resource-groups), [overlap restrictions](https://demo.mobiscroll.com/react/timeline/prevent-double-booking-events)). Your application supplies its authoritative capacity rules and validates concurrent changes when saving; the Timeline is not an automatic optimization or booking backend.

### Can I connect my existing API and database?

Yes. Pass your own events and resources to the component, load them from a remote API and request data as users navigate or scroll. Handle changes using event callbacks to connect the Timeline to your application's persistence logic ([remote API events](https://demo.mobiscroll.com/react/timeline/load-events-from-remote-api), [on-demand loading](https://demo.mobiscroll.com/react/timeline/load-events-on-demand)).

### Can the Timeline handle hundreds of resources or large schedules?

The Timeline uses virtualized horizontal and vertical rendering, and supports loading event or resource data as it becomes relevant. This is designed for resource-heavy schedules without rendering every row and date at once ([load resources on scroll](https://demo.mobiscroll.com/react/timeline/load-resources-on-scroll), [large data example](https://demo.mobiscroll.com/react/timeline/loading-big-data-sets)). Performance still depends on the application's data and custom rendering.

### Does the Timeline work on phones and tablets?

Yes. The Timeline supports touch interaction and responsive configuration. You can show a shorter date range or a different layout on smaller screens while keeping more detailed resource planning on larger displays ([Timeline view configuration](https://mobiscroll.com/docs/react/eventcalendar/timeline)).

### Is the Timeline accessible?

Mobiscroll provides keyboard and screen-reader support and documents its alignment with WCAG 2.2 A and AA criteria, but does not claim full AA compliance. For drag-and-drop workflows, provide an accessible alternative such as an edit dialog or assignment form. See [Event Calendar keyboard support](https://mobiscroll.com/docs/react/eventcalendar/accessibility) and [WCAG support and limitations](https://mobiscroll.com/docs/react/core-concepts/accessibility).

### Is Mobiscroll Timeline free or open source?

No. The Timeline is part of commercially licensed Mobiscroll UI, with a free trial to evaluate it. Internal-project and multi-customer SaaS licensing are different; see [Mobiscroll pricing](https://mobiscroll.com/pricing).

### Can I install it from the public npm registry?

No. Mobiscroll packages are distributed through Mobiscroll's private npm registry, configured through the Mobiscroll CLI. A downloaded package is also available for supported installation paths. Use the installation guide linked in Getting started for the chosen framework.

### Can AI coding assistants help build with Timeline?

Yes. Mobiscroll provides an MCP server, agent skills and framework-specific guidance, along with AI-readable documentation and demo code. The [AI Tooling guide](https://mobiscroll.com/docs/react/guides/ai-integration) describes setup for Claude Code, Codex, Cursor and GitHub Copilot. Generated scheduling logic and UI behavior should be tested in your application.

### Do I need Mobiscroll Connect for Timeline?

No. The Timeline uses your own event and resource data. Mobiscroll Connect is a separate product, sold separately, for connecting Google, Outlook, Apple Calendar and CalDAV accounts when external calendar connectivity is needed.

### Can I use Timeline in a SaaS product?

Yes. Mobiscroll offers Calendaring for SaaS licensing for products delivered to multiple customers as well as licenses for internal projects. Compare the [Mobiscroll UI license options](https://mobiscroll.com/pricing).

### Can I migrate from FullCalendar, Bryntum or DHTMLX?

Mobiscroll provides migration guides covering component configuration, event data and implementation patterns: [FullCalendar](https://mobiscroll.com/docs/react/guides/migrating-from-fullcalendar-to-mobiscroll), [Bryntum](https://mobiscroll.com/docs/react/guides/migrating-from-bryntum-to-mobiscroll) and [DHTMLX](https://mobiscroll.com/docs/react/guides/migrating-from-dhtmlx-to-mobiscroll). Check the relevant features rather than assuming every scheduling or project-management workflow maps one to one.

### Which React versions are supported?

React 17 through React 19. See the [React installation guide](https://mobiscroll.com/docs/react/getting-started/installation).

### Can I use Timeline with Next.js?

Yes. The [Next.js setup guide](https://mobiscroll.com/docs/react/getting-started/with-nextjs) covers adding Mobiscroll components to a Next.js web application.

### Does Mobiscroll Timeline support React Native?

No. Mobiscroll for React uses native React components for web apps; React Native is not supported.

## Licensing

The Timeline is a view of the Event Calendar component in Mobiscroll UI. Internal projects use the appropriate Scheduling & calendaring or broader UI license; software delivered to multiple customers can use Calendaring for SaaS. Licensing and optional features such as the print module vary by package. [Compare Mobiscroll UI licenses](https://mobiscroll.com/pricing).

## Ready to build a resource planning timeline?

Start with the working Timeline example above, explore the demos and use their source code as a starting point, or follow the [AI Tooling guide](https://mobiscroll.com/docs/react/guides/ai-integration) to work with a coding assistant. The [Timeline API and view documentation](https://mobiscroll.com/docs/react/eventcalendar/timeline) is available when you need to configure a specific layout or interaction.

## Built for React

Native React components, not wrappers, built on React's virtual DOM and state management.

- **Supported versions:** React 17 through React 19.
- **Ecosystem:** guides for [Next.js](https://mobiscroll.com/docs/react/getting-started/with-nextjs) and [Ionic React](https://mobiscroll.com/docs/react/getting-started/with-ionic).
- **TypeScript:** types are bundled with the React package ([TypeScript guide](https://mobiscroll.com/docs/react/guides/typescript)).

## Timeline for other frameworks

- [JavaScript Timeline](https://demo.mobiscroll.com/timeline.md) - A standalone JavaScript library with no framework dependency, for bundled apps and plain web pages.
- [jQuery Timeline](https://demo.mobiscroll.com/jquery/timeline.md) - Every Mobiscroll component is available the jQuery way, initialized on a jQuery selection.
- [Angular Timeline](https://demo.mobiscroll.com/angular/timeline.md) - Native Angular components, not wrappers, that use Angular's own rendering and change detection.
- [Vue Timeline](https://demo.mobiscroll.com/vue/timeline.md) - Native Vue 3 components, not wrappers, that use Vue's rendering and reactivity model.