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.

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, create, and keyboard snapping. When omitted, it follows the active slotMinutes, including zoom changes. An explicit value stays fixed across zoom levels.
• 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.
• timelineHeaderRows defines one to three resource-timeline header rows from coarse to fine.
• 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

The examples keep two focused Event Scheduler demos:

Demo id	Implementation
event-scheduler-shift-week	Shift planner with day, week, month, and resource views.
equipment-machine-scheduler	Dedicated seven-day equipment view with continuous multi-day runs and context-menu zoom.

Useful source references:

• examples/revogrid-demos/pro-advanced-scheduler/src/data.ts
• examples/revogrid-demos/pro-advanced-scheduler/src/scheduler.ts
• examples/components/src/components/event-scheduler/equipment-machine/base-config.ts
• examples/components/src/components/event-scheduler/equipment-machine/data.ts
• examples/components/src/components/event-scheduler/equipment-machine/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,
      },
    },
  },
};

Timescale Zoom

Scheduler header context menus expose Zoom in and Zoom out when another configured level is available. Zoom changes the projected slot size without changing the configured timeRange or event dates. When snapMinutes is omitted, its effective value follows the active zoom slot, so zooming from 60-minute slots to 30-minute slots also changes interaction snapping from 60 to 30 minutes. An explicitly configured snapMinutes remains unchanged across zoom levels. If a level does not divide the visible time range evenly, Scheduler keeps a shorter final slot so the exact range end remains visible.

Use the built-in levels by omitting zoom, provide product-specific levels, or disable zoom:

const eventScheduler = {
  view: 'week',
  weekStartDate: '2026-07-27',
  slotMinutes: 30,
  snapMinutes: 10,
  timeRange: { start: '06:00', end: '17:00' },
  zoom: {
    levels: [15, 30, 45, 90, 120],
  },
};

const fixedTimescale = {
  ...eventScheduler,
  zoom: false,
};

The active configured slotMinutes is always retained as a zoom level. Invalid, duplicate, and out-of-range level values are ignored. Setting zoom: false or zoom: { enabled: false } removes the built-in zoom actions and makes the plugin’s canZoomIn(), canZoomOut(), zoomIn(), and zoomOut() methods return false.

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.

Mode-aware resource timeline rows

Resource timelines use compact, scale-aware defaults: coarse sub-day slots show day / time, finer sub-day slots show month / day / time, and day-sized slots show year / month / day. A product can define the hierarchy per mode, similar to a Gantt timescale:

const overviewMode = {
  slotMinutes: 360,
  timelineColumnSize: 64,
  timelineHeaderRows: [
    { id: 'day', unit: 'day' },
    { id: 'time', unit: 'time' },
  ],
};

const planningMode = {
  slotMinutes: 180,
  timelineColumnSize: 76,
  timelineHeaderRows: [
    { id: 'month', unit: 'month' },
    {
      id: 'day',
      unit: 'day',
      formatter: ({ defaultLabel }) => defaultLabel.toUpperCase(),
    },
    { id: 'time', unit: 'time' },
  ],
};

Rows must be ordered from the broadest unit to the leaf unit. Sub-day scales end in time; a 1440-minute scale ends in day. Each row accepts its own formatter, while the existing timelineHeaderFormatter remains a compatible shortcut for the leaf row.

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.