# Timeline Views
URL: https://pro.rv-grid.com/guides/event-scheduler/timeline-views/
Source: src/content/docs/guides/event-scheduler/timeline-views.mdx
Description: Configure day, week, and custom range scheduler views with week and resource timeline layouts.
Event Scheduler supports calendar-style `day`, `week`, and `month` views plus the horizontal `resourceTimeline` layout. Use this page to choose the projection and size the generated scheduler columns. For the full grid bootstrap, start with [Getting Started](../introduction/).

## Framework bindings

React, Vue, and Angular wrappers bind the same grid props. In React, keep the plugin array stable and pass empty host rows and columns:

```tsx
import { useMemo } from 'react';
import { RevoGrid } from '@revolist/react-datagrid';
import { EventSchedulerPlugin } from '@revolist/revogrid-enterprise';

export function ResourceTimeline() {
  const plugins = useMemo(() => [EventSchedulerPlugin], []);

  return (
    <RevoGrid
      plugins={plugins}
      source={[]}
      columns={[]}
      eventScheduler={eventScheduler}
      eventSchedulerEvents={events}
      eventSchedulerResources={resources}
    />
  );
}
```

This example assumes `eventScheduler`, `events`, and `resources` are the same constants you would pass in Vanilla TS. Vue and Angular use the same prop names through their normal bindings. In Vue, use property bindings for direct grid properties, for example `:event-scheduler.prop="eventScheduler"`, `:event-scheduler-events.prop="events"`, and `:event-scheduler-resources.prop="resources"`. In Angular, use `[eventScheduler]="eventScheduler"`, `[eventSchedulerEvents]="events"`, and `[eventSchedulerResources]="resources"`.

## Choose a view

Use `day`, `week`, and `month` when time should run vertically and days should be generated as columns. These views work well for shift calendars, appointment books, and weekly planning screens.

Use `resourceTimeline` when resources should be generated as rows and time slots should run horizontally. This layout is better for room booking, equipment planning, staff coverage, machine schedules, and custom multi-day resource timelines.

The main range controls are:

- `dateRange` sets the explicit visible date range for resource timelines and custom ranges.
- `visibleDays` filters generated weekdays, such as Monday through Friday only.
- `slotMinutes` controls visible slot granularity.
- `snapMinutes` controls drag, resize, paste, and create snapping. It defaults to `slotMinutes`.
- `timeRange` limits the visible hours within each day.

The main layout controls are:

- `timeColumnSize` controls the pinned time column in `day`, `week`, and `month` views.
- `dayColumnSize` controls day columns in `day`, `week`, and `month` views.
- `resourceColumnSize` controls the pinned resource column in `resourceTimeline`.
- `timelineColumnSize` controls each horizontal timeline slot in `resourceTimeline`.
- `columnGrouping` enables or disables grouped scheduler headers.
- `eventLayout`, `maxStackedEvents`, and `compactThreshold` control overlapping event presentation.

```ts
const resourceDayTimeline = {
  view: 'resourceTimeline',
  weekStartDate: '2026-06-08',
  dateRange: { start: '2026-06-08', end: '2026-06-08' },
  slotMinutes: 60,
  timeRange: { start: '6 AM', end: '10 PM' },
  resourceColumnSize: 220,
  timelineColumnSize: 120,
};

const resourceWeekTimeline = {
  ...resourceDayTimeline,
  dateRange: { start: '2026-06-08', end: '2026-06-14' },
  customization: {
    columnSizes: {
      resourceTimeline: {
        resourceColumnSize: 240,
        timelineColumnSize: 132,
      },
    },
    headers: {
      timelineTemplate: (h, context) =>
        h('span', { class: 'scheduler-slot-header' }, context.defaultLabel),
      timelineProperties: (context) => ({
        'data-scheduler-date': context.date,
      }),
    },
  },
};

const customRange = {
  ...resourceDayTimeline,
  dateRange: { start: '2026-06-08', end: '2026-06-10' },
  slotMinutes: 30,
  timelineColumnSize: 132,
};
```

For a practical vertical week setup, continue to [Week View](../week-view/). For raw configuration types, see the [Event Scheduler API reference](/api/event-scheduler/).

## Demo Sources

There are two Event Scheduler implementation families in the examples:

| Demo id | Implementation |
| :-- | :-- |
| `event-scheduler-shift-week` | Shift planner with day, week, month, and resource views. |
| `employee-shift-planner` | Uses the shift-week implementation. |
| `event-scheduler-resource-timeline` | Resource timeline with grouping, filters, coverage, utilization, unassigned demand, templates, and remote mode in Vanilla TS. |
| `event-staff-scheduler` | Uses the resource-timeline implementation. |
| `room-booking-scheduler` | Uses the resource-timeline implementation. |
| `equipment-machine-scheduler` | Uses the resource-timeline implementation. |
| `developer-sprint-scheduler` | Uses the resource-timeline implementation. |

Useful source references:

- `examples/components/src/components/event-scheduler/shift-week/data.ts`
- `examples/components/src/components/event-scheduler/shift-week/index.ts`
- `examples/components/src/components/event-scheduler/resource-timeline/data.ts`
- `examples/components/src/components/event-scheduler/resource-timeline/index.ts`

## Column Widths

Scheduler column widths are controlled by the scheduler config and are applied when the view is projected into RevoGrid columns:

- `timeColumnSize` controls the pinned time column in day, week, and month views.
- `dayColumnSize` controls day columns in day, week, and month views.
- `resourceColumnSize` controls the pinned resource column in resource timeline views.
- `timelineColumnSize` controls each horizontal timeline slot in resource timeline day, week, and custom ranges.

Use wider `timelineColumnSize` values for custom ranges with fine-grained slots, such as 15-minute or 30-minute columns. Wider timeline slots improve header and event-label readability and naturally create more horizontal scroll space.

Use `customization.columnSizes` when the same scheduler instance switches modes and each mode needs a different width profile. Values under `customization.columnSizes[view]` take precedence over the legacy top-level width options:

```ts
const eventScheduler = {
  view: 'resourceTimeline',
  weekStartDate: '2026-06-08',
  customization: {
    columnSizes: {
      week: {
        timeColumnSize: 96,
        dayColumnSize: 220,
      },
      resourceTimeline: {
        resourceColumnSize: 260,
        timelineColumnSize: 144,
      },
    },
  },
};
```

## Grouped Headers

Scheduler views use grouped headers by default so day, week, month, and resource timeline ranges can show broader date context above the leaf columns. Disable them when the extra header row is not useful for a compact embedded scheduler:

```ts
const eventScheduler = {
  view: 'week',
  weekStartDate: '2026-06-08',
  columnGrouping: false,
};
```

When `columnGrouping` is `false`, the scheduler returns flat RevoGrid columns. Day/week/month views show only day leaf headers, and resource timeline views show only timeline slot leaf headers after the pinned resource column.

Header customization hooks map to RevoGrid column templates and properties. Returning `null` or `undefined` from a template keeps the built-in header content:

```ts
const eventScheduler = {
  view: 'resourceTimeline',
  weekStartDate: '2026-06-08',
  customization: {
    headers: {
      groupTemplate: (h, context) =>
        h('strong', { class: 'scheduler-date-group' }, context.defaultLabel),
      timelineProperties: (context) => ({
        class: 'scheduler-slot-header',
        'data-slot-start': context.startDateTime,
      }),
    },
  },
};
```

## Troubleshooting

- No rows or events render: check that `grid.plugins` includes `EventSchedulerPlugin`, `eventScheduler` is set, `eventSchedulerEvents` is populated, and each event's `resourceId` matches an item in `eventSchedulerResources` for resource timelines.
- Events render but cannot be created, moved, or resized: enable `editable` and the needed `allowCreate`, `allowMove`, or `allowResize` flags. Permission callbacks, locked resources, and locked event statuses can still block a specific action.
- Custom `source` or `columns` disappear: this is expected while `eventScheduler` is active. The plugin projects scheduler rows and columns into RevoGrid and restores the host grid state when the scheduler config is removed.
- Range or slot labels look wrong: verify ISO `YYYY-MM-DD` dates, `dateRange`, `timeRange`, `slotMinutes`, and any `timelineHeaderFormatter` or `customization.headers` hooks.
