Resource Timeline

@dayflow-pro/resource-timeline adds a scheduler-style horizontal timeline to DayFlow. Time flows left to right, each resource gets its own row, and the view is designed for planning work across people, rooms, projects, or equipment.

Try the live demo

Compared with the built-in calendar views, Resource Timeline is optimized for:

• Long-running tasks and project plans
• Resource allocation across multiple lanes
• Milestones and progress tracking
• Hierarchical or grouped resource lists

Installation

Refer to the Pro Installation guide for installation steps.

Basic usage

import { DayFlowCalendar, useCalendarApp } from '@dayflow/react';
import { createResourceTimelineView } from '@dayflow-pro/resource-timeline';

function App() {
  const calendar = useCalendarApp({
    views: [
      createResourceTimelineView({
        resources: [
          {
            id: 'eng-alice',
            name: 'Alice Chen',
            groupId: 'engineering',
            groupName: 'Engineering',
            subtitle: 'Frontend',
          },
          {
            id: 'eng-bob',
            name: 'Bob Torres',
            groupId: 'engineering',
            groupName: 'Engineering',
            subtitle: 'Platform',
          },
        ],
        defaultView: 'week',
        height: 640,
        getResourceId: event =>
          (event as { resourceId?: string }).resourceId ?? event.calendarId,
      }),
    ],
  });

  return <DayFlowCalendar calendar={calendar} />;
}

Timeline modes

Use defaultView to choose the initial mode. You can also control how switching is rendered through viewSwitcherMode, which supports buttons, select, and filter.

Resource model

Resources are plain objects. The source code supports more than just id and name:

type Resource = {
  id: string;
  name: string;
  parentId?: string;
  collapsed?: boolean;
  groupId?: string;
  groupName?: string;
  order?: number;
  subtitle?: string;
  avatar?: string;
  color?: string;
  style?: {
    colors: { color: string; textColor?: string };
    darkColors?: { color: string; textColor?: string };
    opacity?: number;
    borderRadius?: number;
  };
  meta?: Record<string, unknown>;
};

Useful fields:

• groupId and groupName let you organize resources into grouped sections.
• parentId and collapsed support hierarchical resource trees.
• subtitle, avatar, color, and style let you enrich the sidebar presentation.
• meta is often used to store an external identifier such as calendarId.

Event-to-resource binding

The view resolves each event's row in this order:

1. getResourceId(event) if provided
2. event.resourceId
3. event.meta?.resourceId
4. event.calendarId

That means you can either store resourceId directly on your event objects or map existing DayFlow events into resources with a callback.

const event = {
  id: 'task-1',
  title: 'Build export flow',
  start: new Date(2026, 4, 10, 9, 0),
  end: new Date(2026, 4, 12, 18, 0),
  resourceId: 'eng-alice',
  progress: 65,
};

Milestones and event styling

Events whose start and end are equal are rendered as milestones automatically.

const milestone = {
  id: 'release-gate',
  title: 'Release approval',
  start: new Date(2026, 4, 14, 10, 0),
  end: new Date(2026, 4, 14, 10, 0),
  resourceId: 'eng-bob',
};

ResourceTimelineViewConfig

Core

Layout

Resource visibility and syncing

When calendar syncing is enabled, the fallback resource-to-calendar mapping is resource.meta?.calendarId ?? resource.id.

Focus, sidebar, and integrations

The timeline exposes a few integration points that are easy to miss:

• focusRequest lets host apps programmatically move the timeline to a specific event and date.
• sidebar passes through scheduler sidebar configuration such as context-menu actions.
• customDetailPanelContent and customEventDetailDialog can be passed through the view props when you need custom scheduler detail UIs.
• timeFormat supports 24h and 12h.
• resizeTimeFormat customizes the label shown while resizing events.