Timeline Views

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.

How this applies to RevoGrid

The scheduler owns the generated RevoGrid rows and columns while it is active, so scheduler pages normally keep source and columns empty. The active view decides what the projection generates:

| View | Generated shape | Best fit | | :-- | :-- | :-- | | day | One visible day with time slots. | Appointment books and single-day dispatch views. | | week | Several day columns with time running vertically. | Shift planners and weekly calendars. | | month | Month-style calendar days. | Higher-level date occupancy and planning. | | resourceTimeline | Resources as rows with time slots running horizontally. | Room, equipment, crew, machine, and capacity planning. |

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:

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.

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. For raw configuration types, see the Event Scheduler API reference.

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:

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:

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:

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.