Timeline Views

Event Scheduler has three projection families: vertical day and week time grids, true month and year calendar layouts, and the horizontal resourceTimeline. All of them share the same events, resources, filtering, recurrence, conflicts, permissions, selection, history, remote loading, and mutation APIs. 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/scheduler';

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 and week when time should run vertically and days should be generated as columns. These views work well for shift calendars, appointment books, and detailed weekly planning.

Use month for a conventional seven-column calendar whose natural four to six week rows fill the available data viewport. Multi-day events are clipped into continuous week bars, adjacent-month dates remain visible, and dense days expose a +N more overlay. Use year for a responsive overview of twelve mini-months; choosing a month or day requests the detailed month view.

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:

• weekStartDate anchors the active day, week, month, or year.
• dateRange sets an explicit visible range for timeline views. It does not reshape month/year calendars.
• visibleDays filters generated weekdays in time-grid/timeline views. Calendar month/year layouts keep seven weekday columns.
• 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 and week views.
• dayColumnSize controls day columns in day and week; month columns are distributed across the viewport.
• 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.
• rowSize sets the baseline scheduler row height.
• resourceTimelineRowSizing lets dense resource rows grow with their simultaneous event lanes.

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.

const monthCalendar = {
  view: 'month',
  weekStartDate: '2026-07-15',
  weekStartsOn: 1,
};

const yearOverview = {
  ...monthCalendar,
  view: 'year',
};

month now means this conventional calendar layout. Earlier releases projected it as a 31-column vertical time grid; applications that depended on that legacy geometry should use an explicit timeline range instead. There is no compatibility flag for the former rendering.

Demo Sources

The examples keep two focused Event Scheduler demos:

Demo id	Implementation
event-scheduler-shift-week	Shift planner with day, week, month, year, 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 and week views.
• dayColumnSize controls time-grid day columns and supplies the initial calendar sizing hint.
• 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.

Adaptive Resource Rows

Resource timelines can grow only the rows that need more vertical space. Enable resourceTimelineRowSizing when several events can overlap for the same resource and fixed-height lanes make their labels or status icons difficult to read:

const eventScheduler = {
  view: 'resourceTimeline',
  weekStartDate: '2026-08-17',
  dateRange: { start: '2026-08-17', end: '2026-08-30' },
  rowSize: 44,
  resourceTimelineRowSizing: {
    enabled: true,
    minEventHeight: 24,
  },
};

rowSize remains the minimum row height. Scheduler calculates the maximum number of simultaneously overlapping lanes for each visible resource and grows that row enough to keep every bar at least minEventHeight pixels high. It does not use the resource’s total event count, so sequential events that reuse one lane do not make the row taller.

Adaptive sizing is disabled by default. Use resourceTimelineRowSizing: true for the default 24 pixel minimum, or provide an object when the product needs a different minimum. Empty, grouped, sparse, and non-stacked rows keep rowSize; dense rows shrink back when filtering, reassignment, deletion, or another committed update reduces their lane count. Day, week, month, and year views continue to use their normal row behavior.

Row sizes come from projected scheduler lanes rather than DOM measurement, so vertical virtualization remains available. During a live drag or resize preview, row heights stay stable to avoid moving the pointer target; Scheduler recalculates them after the change is committed.

Continuous multi-day bars

In resourceTimeline, an event spanning several dates is rendered as one continuous horizontal bar. Its top and bottom borders remain solid, its outer corners remain rounded, and it does not receive the dashed clipped-edge treatment used by vertically clipped day/week events. Continuation metadata is still retained for customization and accessibility.

Compact titles and state icons stay vertically centered when adaptive rows use the minimum event height. If a title is too wide, normal single-line ellipsis behavior still applies.

Mode-aware resource timeline rows

Resource timelines use compact, scale-aware defaults based on the number of leaf columns per date. When a date spans multiple time columns, Scheduler combines its localized weekday, month, day, and year into one day / time hierarchy, such as Thu, Dec 4, 2025 above hourly labels. When each date owns one column, it keeps separate month / day / time tiers so the shorter labels fit. Day-sized slots use month / day. A product can still 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.